@homecode/ui 4.18.20 → 4.18.22
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".Button_root__SZns2{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;justify-content:center;line-height:1em;text-decoration:none;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Button_root__SZns2:focus,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-100)}.Button_root__SZns2[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.
|
|
4
|
-
var S = {"root":"Button_root__SZns2","
|
|
3
|
+
var css_248z = ".Button_root__SZns2{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;justify-content:center;line-height:1em;text-decoration:none;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Button_root__SZns2:focus,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-100)}.Button_root__SZns2[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Button_postfix__DwG-n,.Button_prefix__czqd5{display:flex}.Button_prefix__czqd5:not(:last-child){margin-right:.5em}.Button_postfix__DwG-n:not(:first-child){margin-left:.5em}.Button_size-s__-SIY1{border-radius:4px;font-size:16px;min-height:30px;min-width:30px;padding:0 8px}.Button_size-s__-SIY1.Button_square__eYSY3{max-height:30px;width:30px}.Button_size-m__TBXc-{border-radius:6px;font-size:20px;min-height:40px;min-width:40px;padding:0 12px}.Button_size-m__TBXc-.Button_square__eYSY3{max-height:40px;width:40px}.Button_size-l__Sx37T{border-radius:8px;font-size:24px;min-height:50px;min-width:50px;padding:0 14px}.Button_size-l__Sx37T.Button_square__eYSY3{max-height:50px}.Button_square__eYSY3{justify-content:center;padding:0}.Button_variant-clear__z1HZm:focus,.Button_variant-clear__z1HZm:hover,.Button_variant-default__vbo51:focus,.Button_variant-default__vbo51:hover{background-color:var(--active-color-alpha-300)}.Button_variant-clear__z1HZm{background-color:transparent}.Button_variant-default__vbo51{background-color:var(--accent-color-alpha-100)}.Button_variant-outlined__shnIq{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_variant-outlined__shnIq:focus{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Button_variant-primary__zhEQI{background-color:var(--active-color);color:var(--accent-color-alpha-900)}.Button_variant-primary__zhEQI:hover{background-color:var(--active-color-alpha-800)}.Button_variant-primary__zhEQI:focus{background-color:var(--active-color);box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_spinner__ttaMr{margin-left:var(--indent-s)}.Button_root__SZns2:active,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-300)}.Button_root__SZns2:active{opacity:.7}.Button_root__SZns2.Button_loading__c4pdo{pointer-events:none}.Button_root__SZns2.Button_checked__X7f58,.Button_root__SZns2.Button_checked__X7f58:hover{background-color:var(--accent-color);box-shadow:none;color:var(--decent-color)}.Button_root__SZns2.Button_checked__X7f58 path{fill:var(--decent-color)}";
|
|
4
|
+
var S = {"root":"Button_root__SZns2","prefix":"Button_prefix__czqd5","postfix":"Button_postfix__DwG-n","size-s":"Button_size-s__-SIY1","square":"Button_square__eYSY3","size-m":"Button_size-m__TBXc-","size-l":"Button_size-l__Sx37T","variant-clear":"Button_variant-clear__z1HZm","variant-default":"Button_variant-default__vbo51","variant-outlined":"Button_variant-outlined__shnIq","variant-primary":"Button_variant-primary__zhEQI","spinner":"Button_spinner__ttaMr","loading":"Button_loading__c4pdo","checked":"Button_checked__X7f58"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { S as default };
|
|
@@ -20,11 +20,11 @@ const STORE = createStore('router', {
|
|
|
20
20
|
un(cb) {
|
|
21
21
|
spliceWhere(LISTENERS, cb);
|
|
22
22
|
},
|
|
23
|
-
go(
|
|
24
|
-
if (
|
|
23
|
+
go(path, { replace } = {}) {
|
|
24
|
+
if (path === this.path)
|
|
25
25
|
return;
|
|
26
|
-
history[replace ? 'replaceState' : 'pushState']({}, '',
|
|
27
|
-
onRouteChange(
|
|
26
|
+
history[replace ? 'replaceState' : 'pushState']({}, '', path);
|
|
27
|
+
onRouteChange(path);
|
|
28
28
|
},
|
|
29
29
|
back() {
|
|
30
30
|
history.back();
|
|
@@ -36,10 +36,10 @@ const STORE = createStore('router', {
|
|
|
36
36
|
onRouteChange(href);
|
|
37
37
|
},
|
|
38
38
|
});
|
|
39
|
-
function onRouteChange(
|
|
39
|
+
function onRouteChange(path = window.location.pathname) {
|
|
40
40
|
STORE.queryString = location.search;
|
|
41
41
|
STORE.query = parseQueryParams();
|
|
42
|
-
STORE.path =
|
|
42
|
+
STORE.path = path.replace(/\?.+/, '') || '/';
|
|
43
43
|
LISTENERS.forEach(cb => cb(STORE.path));
|
|
44
44
|
}
|
|
45
45
|
function updateRouteState() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useState,
|
|
2
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
1
|
+
import { useState, useCallback, createElement } from 'react';
|
|
2
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { Button } from '../Button/Button.js';
|
|
5
5
|
import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
|
|
@@ -9,9 +9,8 @@ function isId(id) {
|
|
|
9
9
|
return ['string', 'number'].includes(typeof id);
|
|
10
10
|
}
|
|
11
11
|
function Tabs(props) {
|
|
12
|
-
const { size = 'm', contentClassName, items, onChange, renderAll, activeId: initialId, children, ...rest } = props;
|
|
12
|
+
const { size = 'm', className, contentClassName, items, hideTabsIfSingle = true, onChange, renderAll, activeId: initialId, children, ...rest } = props;
|
|
13
13
|
const [activeId, setActiveId] = useState(isId(initialId) ? initialId : items[0].id);
|
|
14
|
-
const tabsContent = useRef([]);
|
|
15
14
|
const onTabClick = useCallback((e, { id, onClick } = {}) => {
|
|
16
15
|
// @ts-ignore
|
|
17
16
|
if (onClick && !onClick(e)) {
|
|
@@ -21,23 +20,26 @@ function Tabs(props) {
|
|
|
21
20
|
setActiveId(id);
|
|
22
21
|
onChange?.(id);
|
|
23
22
|
}, []);
|
|
24
|
-
tabsContent
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
23
|
+
const tabsContent = [];
|
|
24
|
+
const tabsButtons = items.length === 1 && hideTabsIfSingle
|
|
25
|
+
? []
|
|
26
|
+
: items.map((params) => {
|
|
27
|
+
const { id, label, forceRender, content, contentClassName: currContentClassName, ...rest } = params;
|
|
28
|
+
const isActive = activeId === id;
|
|
29
|
+
const tabContent = typeof content === 'function' ? content() : content;
|
|
30
|
+
if (renderAll || forceRender || isActive) {
|
|
31
|
+
tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
|
|
32
|
+
}
|
|
33
|
+
return (createElement(Button, { ...rest, size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
|
|
34
|
+
});
|
|
35
|
+
const tabs = (jsx(ButtonGroup, { className: className, ...rest, children: tabsButtons }));
|
|
34
36
|
if (typeof children === 'function') {
|
|
35
37
|
return children({
|
|
36
|
-
tabs
|
|
37
|
-
content: tabsContent
|
|
38
|
+
tabs,
|
|
39
|
+
content: tabsContent,
|
|
38
40
|
});
|
|
39
41
|
}
|
|
40
|
-
return
|
|
42
|
+
return (jsxs(Fragment, { children: [tabs, children, tabsContent] }));
|
|
41
43
|
}
|
|
42
44
|
|
|
43
45
|
export { Tabs };
|