@laser-ui/components 0.1.0 → 0.1.2
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/CHANGELOG.md +10 -0
- package/README.md +23 -24
- package/dropdown/Dropdown.js +1 -1
- package/dropdown/internal/DropdownSub.d.ts +0 -1
- package/dropdown/internal/DropdownSub.js +10 -2
- package/menu/Menu.js +4 -4
- package/menu/internal/MenuSub.d.ts +0 -1
- package/menu/internal/MenuSub.js +10 -2
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [0.1.2](https://github.com/laser-ui/laser-ui/compare/v0.1.1...v0.1.2) (2023-09-14)
|
|
6
|
+
|
|
7
|
+
**Note:** Version bump only for package @laser-ui/components
|
|
8
|
+
|
|
9
|
+
## [0.1.1](https://github.com/laser-ui/laser-ui/compare/v0.1.0...v0.1.1) (2023-09-13)
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
- **components:** fix `container` is null ([151da41](https://github.com/laser-ui/laser-ui/commit/151da41063f8e629ef18ece4d70c9a35cb38b2f8))
|
|
14
|
+
|
|
5
15
|
# [0.1.0](https://github.com/laser-ui/laser-ui/compare/v0.0.5...v0.1.0) (2023-09-12)
|
|
6
16
|
|
|
7
17
|
**Note:** Version bump only for package @laser-ui/components
|
package/README.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<a href="//
|
|
2
|
+
<a href="//laser-ui.surge.sh/" rel="noopener" target="_blank"><img width="150" src="apps/site/public/logo.png" alt="logo"></a>
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
|
-
<h1 align="center">
|
|
5
|
+
<h1 align="center">Laser UI</h1>
|
|
6
6
|
|
|
7
7
|
<div align="center">
|
|
8
8
|
|
|
9
9
|
<!-- prettier-ignore-start -->
|
|
10
|
-
[](https://www.npmjs.com/package/@laser-ui/components)
|
|
11
|
+
[](https://bundlephobia.com/package/@laser-ui/components)
|
|
12
|
+
[](https://github.com/laser-ui/laser-ui/actions/workflows/main.yml)
|
|
13
13
|
<!-- prettier-ignore-end -->
|
|
14
14
|
|
|
15
15
|
</div>
|
|
@@ -23,49 +23,48 @@ English | [简体中文](README.zh-CN.md)
|
|
|
23
23
|
## Installation
|
|
24
24
|
|
|
25
25
|
```bash
|
|
26
|
-
|
|
26
|
+
npm install @laser-ui/components @laser-ui/hooks @laser-ui/themes @laser-ui/utils
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
## Getting Started
|
|
30
30
|
|
|
31
31
|
```tsx
|
|
32
|
-
import type {
|
|
32
|
+
import type { LContextIn } from '@laser-ui/components/context';
|
|
33
33
|
|
|
34
|
+
import { ConfigProvider, Root } from '@laser-ui/components';
|
|
34
35
|
import { useMemo } from 'react';
|
|
35
36
|
|
|
36
|
-
import { DRoot } from '@react-devui/ui';
|
|
37
|
-
|
|
38
37
|
export default function App() {
|
|
39
|
-
const
|
|
38
|
+
const lContext = useMemo<LContextIn>(
|
|
40
39
|
() => ({
|
|
41
|
-
|
|
40
|
+
layoutPageScrollEl: '#app-main',
|
|
41
|
+
layoutContentResizeEl: '#app-content',
|
|
42
42
|
}),
|
|
43
|
-
[]
|
|
43
|
+
[],
|
|
44
44
|
);
|
|
45
45
|
|
|
46
46
|
return (
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
47
|
+
<ConfigProvider context={lContext}>
|
|
48
|
+
<Root>
|
|
49
|
+
<main id="app-main" style={{ overflow: 'auto' }}>
|
|
50
|
+
<section id="app-content" style={{ height: '200vh' }}>
|
|
51
|
+
Some content...
|
|
52
|
+
</section>
|
|
53
|
+
</main>
|
|
54
|
+
</Root>
|
|
55
|
+
</ConfigProvider>
|
|
54
56
|
);
|
|
55
57
|
}
|
|
56
58
|
```
|
|
57
59
|
|
|
58
60
|
## Links
|
|
59
61
|
|
|
60
|
-
- [
|
|
61
|
-
- [admin.react-devui.com](//admin.react-devui.com)
|
|
62
|
+
- [laser-ui.surge.sh](//laser-ui.surge.sh)
|
|
62
63
|
|
|
63
64
|
## Contributing
|
|
64
65
|
|
|
65
66
|
Please read our [contributing guide](/CONTRIBUTING.md) first.
|
|
66
67
|
|
|
67
|
-
Need unit test support (Jest) 🤝.
|
|
68
|
-
|
|
69
68
|
## License
|
|
70
69
|
|
|
71
|
-
[](/LICENSE)
|
package/dropdown/Dropdown.js
CHANGED
|
@@ -234,7 +234,7 @@ function DropdownFC(props, ref) {
|
|
|
234
234
|
else {
|
|
235
235
|
dataRef.current.updatePosition.set(itemId, fn);
|
|
236
236
|
}
|
|
237
|
-
}, namespace: namespace, styled: styled,
|
|
237
|
+
}, namespace: namespace, styled: styled, id: id, level: level, icon: itemIcon, list: children && getNodes(children, 0, newSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: trigger, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, zIndex: isUndefined(zIndex)
|
|
238
238
|
? zIndex
|
|
239
239
|
: isNumber(zIndex)
|
|
240
240
|
? zIndex + 1 + subParents.length
|
|
@@ -3,7 +3,6 @@ import type { Styled } from '../../hooks/useStyled';
|
|
|
3
3
|
import type { CLASSES } from '../vars';
|
|
4
4
|
interface DropdownSubProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
-
dropdownRef: React.RefObject<HTMLDivElement>;
|
|
7
6
|
namespace: string;
|
|
8
7
|
styled: Styled<typeof CLASSES>;
|
|
9
8
|
id: string;
|
|
@@ -12,7 +12,7 @@ import { Transition } from '../../internal/transition';
|
|
|
12
12
|
import { getHorizontalSidePosition, mergeCS } from '../../utils';
|
|
13
13
|
import { TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
|
|
14
14
|
export const DropdownSub = forwardRef((props, ref) => {
|
|
15
|
-
const { children, namespace, styled,
|
|
15
|
+
const { children, namespace, styled, id, level, icon, list, popupState, trigger, empty, focus, disabled, zIndex, onVisibleChange } = props;
|
|
16
16
|
const sheet = useJSS();
|
|
17
17
|
const triggerRef = useRef(null);
|
|
18
18
|
const popupRef = useRef(null);
|
|
@@ -46,7 +46,15 @@ export const DropdownSub = forwardRef((props, ref) => {
|
|
|
46
46
|
}, onVisibleChange: onVisibleChange, children: ({ renderTrigger, renderPopup }) => (_jsxs(_Fragment, { children: [renderTrigger(_jsxs("li", Object.assign({}, mergeCS(styled('dropdown__item', 'dropdown__item--sub', {
|
|
47
47
|
'dropdown__item.is-expand': visible,
|
|
48
48
|
'dropdown__item.is-disabled': disabled,
|
|
49
|
-
}), { style: { paddingLeft: 12 + level * 16 } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": visible, "aria-disabled": disabled, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: children })), _jsx("div", Object.assign({}, styled('dropdown__sub-arrow'), { children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] }))), _jsx(Portal, { selector: () =>
|
|
49
|
+
}), { style: { paddingLeft: 12 + level * 16 } }), { ref: triggerRef, id: id, role: "menuitem", "aria-haspopup": true, "aria-expanded": visible, "aria-disabled": disabled, children: [focus && _jsx("div", { className: `${namespace}-focus-outline` }), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('dropdown__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('dropdown__item-content'), { children: children })), _jsx("div", Object.assign({}, styled('dropdown__sub-arrow'), { children: _jsx(Icon, { children: _jsx(KeyboardArrowRightOutlined, {}) }) }))] }))), _jsx(Portal, { selector: () => {
|
|
50
|
+
let el = document.getElementById(`${namespace}-dropdown-root`);
|
|
51
|
+
if (!el) {
|
|
52
|
+
el = document.createElement('div');
|
|
53
|
+
el.id = `${namespace}-dropdown-root`;
|
|
54
|
+
document.body.appendChild(el);
|
|
55
|
+
}
|
|
56
|
+
return el;
|
|
57
|
+
}, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
|
|
50
58
|
let transitionStyle = {};
|
|
51
59
|
switch (state) {
|
|
52
60
|
case 'enter':
|
package/menu/Menu.js
CHANGED
|
@@ -116,7 +116,7 @@ function MenuFC(props, ref) {
|
|
|
116
116
|
setFocusIds(ids.length === 0 ? (isUndefined(firstId) ? [] : [firstId]) : ids);
|
|
117
117
|
};
|
|
118
118
|
let handleKeyDown;
|
|
119
|
-
const nodes = (
|
|
119
|
+
const nodes = (() => {
|
|
120
120
|
const getNodes = (arr, level, subParents, inNav = false) => {
|
|
121
121
|
const posinset = new Map();
|
|
122
122
|
let noGroup = [];
|
|
@@ -295,7 +295,7 @@ function MenuFC(props, ref) {
|
|
|
295
295
|
else {
|
|
296
296
|
dataRef.current.updatePosition.set(itemId, fn);
|
|
297
297
|
}
|
|
298
|
-
}, namespace: namespace, styled: styled,
|
|
298
|
+
}, namespace: namespace, styled: styled, id: id, level: level, space: space, step: step, icon: itemIcon, list: children && getNodes(children, mode === 'vertical' ? level + 1 : 0, nextSubParents), popupState: popupState === null || popupState === void 0 ? void 0 : popupState.visible, trigger: expandTrigger !== null && expandTrigger !== void 0 ? expandTrigger : (mode === 'vertical' ? 'click' : 'hover'),
|
|
299
299
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
300
300
|
posinset: posinset.get(itemId), mode: mode, inNav: inNav, active: (mode === 'vertical' ? !isExpand : isUndefined(popupState)) && actives.includes(itemId), includeActive: actives.includes(itemId), expand: isExpand, empty: isEmpty, focus: focusVisible && isFocus, disabled: itemDisabled, onVisibleChange: (visible) => {
|
|
301
301
|
if (visible) {
|
|
@@ -322,7 +322,7 @@ function MenuFC(props, ref) {
|
|
|
322
322
|
});
|
|
323
323
|
};
|
|
324
324
|
return getNodes(list, 0, [], true);
|
|
325
|
-
};
|
|
325
|
+
})();
|
|
326
326
|
useImperativeHandle(ref, () => ({
|
|
327
327
|
updatePosition: () => {
|
|
328
328
|
for (const fn of dataRef.current.updatePosition.values()) {
|
|
@@ -380,7 +380,7 @@ function MenuFC(props, ref) {
|
|
|
380
380
|
var _a;
|
|
381
381
|
(_a = restProps.onMouseUp) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
|
|
382
382
|
preventBlur(e);
|
|
383
|
-
}, children: nodes
|
|
383
|
+
}, children: nodes })));
|
|
384
384
|
} }));
|
|
385
385
|
}
|
|
386
386
|
export const Menu = forwardRef(MenuFC);
|
package/menu/internal/MenuSub.js
CHANGED
|
@@ -10,7 +10,7 @@ import { CollapseTransition, Transition } from '../../internal/transition';
|
|
|
10
10
|
import { getHorizontalSidePosition, getVerticalSidePosition, mergeCS } from '../../utils';
|
|
11
11
|
import { TTANSITION_DURING_BASE, TTANSITION_DURING_POPUP, WINDOW_SPACE } from '../../vars';
|
|
12
12
|
export const MenuSub = forwardRef((props, ref) => {
|
|
13
|
-
const { children, namespace, styled,
|
|
13
|
+
const { children, namespace, styled, id, level, space, step, icon, list, popupState, trigger, posinset, mode, inNav, active, includeActive, expand, empty, focus, disabled, onVisibleChange, onClick, } = props;
|
|
14
14
|
const sheet = useJSS();
|
|
15
15
|
const triggerRef = useRef(null);
|
|
16
16
|
const popupRef = useRef(null);
|
|
@@ -71,7 +71,15 @@ export const MenuSub = forwardRef((props, ref) => {
|
|
|
71
71
|
}), { children: [_jsx("div", Object.assign({}, styled('menu__indicator-track', { 'menu__indicator-track--hidden': level === 0 }))), _jsx("div", Object.assign({}, styled('menu__indicator-thumb')))] })), checkNodeExist(icon) && _jsx("div", Object.assign({}, styled('menu__item-icon'), { children: icon })), _jsx("div", Object.assign({}, styled('menu__item-content'), { children: children })), !inHorizontalNav && (_jsxs("div", Object.assign({}, styled('menu__sub-arrow', {
|
|
72
72
|
'menu__sub-arrow--horizontal': mode !== 'vertical' && !inHorizontalNav,
|
|
73
73
|
'menu__sub-arrow.is-expand': mode === 'vertical' && expand,
|
|
74
|
-
}), { "aria-hidden": true, children: [_jsx("div", {}), _jsx("div", {})] })))] }))), mode !== 'vertical' && (_jsx(Portal, { selector: () =>
|
|
74
|
+
}), { "aria-hidden": true, children: [_jsx("div", {}), _jsx("div", {})] })))] }))), mode !== 'vertical' && (_jsx(Portal, { selector: () => {
|
|
75
|
+
let el = document.getElementById(`${namespace}-menu-root`);
|
|
76
|
+
if (!el) {
|
|
77
|
+
el = document.createElement('div');
|
|
78
|
+
el.id = `${namespace}-menu-root`;
|
|
79
|
+
document.body.appendChild(el);
|
|
80
|
+
}
|
|
81
|
+
return el;
|
|
82
|
+
}, children: _jsx(Transition, { enter: visible, during: TTANSITION_DURING_POPUP, afterRender: updatePosition, children: (state) => {
|
|
75
83
|
let transitionStyle = {};
|
|
76
84
|
switch (state) {
|
|
77
85
|
case 'enter':
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@laser-ui/components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "React components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"module": "./index.js",
|
|
27
27
|
"types": "./index.d.ts",
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@laser-ui/hooks": "0.1.
|
|
30
|
-
"@laser-ui/utils": "0.1.
|
|
31
|
-
"@material-design-icons/svg": "^0.14.
|
|
29
|
+
"@laser-ui/hooks": "0.1.2",
|
|
30
|
+
"@laser-ui/utils": "0.1.2",
|
|
31
|
+
"@material-design-icons/svg": "^0.14.12",
|
|
32
32
|
"jss": "^10.10.0",
|
|
33
33
|
"jss-preset-default": "^10.10.0",
|
|
34
34
|
"lodash": "^4.17.21",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"access": "public",
|
|
46
46
|
"directory": "../../dist/libs/components"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "6658d3823bb6ca76b1ffd33defdbeefd7c4297f2"
|
|
49
49
|
}
|