ywana-core8 0.0.354 → 0.0.355
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/index.cjs +94 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +119 -1
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +93 -2
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +94 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/menu.css +0 -1
- package/src/html/menu.js +2 -2
- package/src/widgets/explorer/Explorer.css +118 -0
- package/src/widgets/explorer/Explorer.js +77 -0
- package/src/widgets/explorer/Explorer.test.js +35 -0
- package/src/widgets/index.js +2 -1
package/package.json
CHANGED
package/src/html/menu.css
CHANGED
package/src/html/menu.js
CHANGED
|
@@ -25,7 +25,7 @@ export const Menu = (props) => {
|
|
|
25
25
|
*/
|
|
26
26
|
export const MenuIcon = (props) => {
|
|
27
27
|
|
|
28
|
-
const { icon = "more_vert", children, align } = props
|
|
28
|
+
const { icon = "more_vert", children, align, size="normal" } = props
|
|
29
29
|
const [open, setOpen] = useState(false)
|
|
30
30
|
|
|
31
31
|
function toggle() {
|
|
@@ -35,7 +35,7 @@ export const MenuIcon = (props) => {
|
|
|
35
35
|
return (
|
|
36
36
|
<MenuContext.Provider value={[open, setOpen]}>
|
|
37
37
|
<div className="menu-icon">
|
|
38
|
-
<Icon icon={icon} clickable action={toggle} />
|
|
38
|
+
<Icon icon={icon} size={size} clickable action={toggle} />
|
|
39
39
|
{open ? (
|
|
40
40
|
<menu className={`${align}`}>
|
|
41
41
|
{children}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
.file-explorer {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
display: grid;
|
|
5
|
+
grid-template-areas:
|
|
6
|
+
"header header header"
|
|
7
|
+
"nav nav nav"
|
|
8
|
+
"menu main aside"
|
|
9
|
+
"footer footer footer";
|
|
10
|
+
grid-template-columns: auto 1fr auto;
|
|
11
|
+
grid-template-rows: auto auto 1fr auto;
|
|
12
|
+
padding: 2px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.file-explorer>* {
|
|
16
|
+
margin: 2px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.file-explorer>header {
|
|
20
|
+
grid-area: header;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.file-explorer>nav {
|
|
24
|
+
grid-area: nav;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.file-explorer>menu {
|
|
28
|
+
grid-area: menu;
|
|
29
|
+
padding: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.file-explorer>main {
|
|
33
|
+
grid-area: main;
|
|
34
|
+
border-left: solid 1px var(--divider-color);
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.file-explorer>aside {
|
|
41
|
+
grid-area: aside;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.file-explorer>footer {
|
|
45
|
+
grid-area: footer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.file-view {
|
|
49
|
+
flex: 1;
|
|
50
|
+
overflow: auto;
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-wrap: wrap;
|
|
53
|
+
gap: .5rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.file-icon {
|
|
57
|
+
margin: .5rem;
|
|
58
|
+
border: solid 1px var(--divider-color);
|
|
59
|
+
width: 8rem;
|
|
60
|
+
height: 10rem;
|
|
61
|
+
position: relative;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.file-icon--selected {
|
|
67
|
+
background-color: var(--divider-color);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.file-icon:hover {
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
box-shadow: var(--shadow1);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.file-icon>header {
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: 0px;
|
|
78
|
+
left: 0px;
|
|
79
|
+
width: 100%;
|
|
80
|
+
height: 2rem;
|
|
81
|
+
display: flex;
|
|
82
|
+
justify-content: space-between;
|
|
83
|
+
color: var(--text-color-lighter);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.file-icon>picture {
|
|
87
|
+
flex: 1;
|
|
88
|
+
padding: 0 1rem;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.file-icon>picture>img {
|
|
92
|
+
width: 100%;
|
|
93
|
+
height: 100%;
|
|
94
|
+
object-fit: contain;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.file-icon>main {
|
|
98
|
+
height: 2rem;
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
align-items: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.file-icon>main>label {
|
|
106
|
+
font-size: .8rem;
|
|
107
|
+
color: var(--text-color);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.file-icon>footer {
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 1.5rem;
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
border-top: solid 1px var(--divider-color);
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
padding: 0 .5rem;
|
|
118
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import React, {useState} from 'react'
|
|
2
|
+
import { MenuIcon, MenuItem, Icon } from '../../html'
|
|
3
|
+
import './Explorer.css'
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* File Explorer
|
|
7
|
+
*/
|
|
8
|
+
export const FileExplorer = (props) => {
|
|
9
|
+
const { files = [], onSelect } = props
|
|
10
|
+
return (
|
|
11
|
+
<div className="file-explorer">
|
|
12
|
+
<header>header</header>
|
|
13
|
+
<nav>nav</nav>
|
|
14
|
+
<menu>menu</menu>
|
|
15
|
+
<main>
|
|
16
|
+
<FileIconsView files={files} />
|
|
17
|
+
</main>
|
|
18
|
+
<aside></aside>
|
|
19
|
+
<footer>footer</footer>
|
|
20
|
+
</div>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* File Icons View
|
|
26
|
+
*/
|
|
27
|
+
export const FileIconsView = (props) => {
|
|
28
|
+
const { files = [], onSelect } = props
|
|
29
|
+
const [selected, setSelected] = useState()
|
|
30
|
+
|
|
31
|
+
function select(id) {
|
|
32
|
+
setSelected(id)
|
|
33
|
+
if (onSelect) onSelect(id)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function isSelected(id) {
|
|
37
|
+
return selected === id
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<div className="file-view file-view--icons">
|
|
42
|
+
{files.map(file => <FileIcon file={file} onSelect={select} selected={isSelected(file.id)} />)}
|
|
43
|
+
</div>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* File Icon
|
|
49
|
+
*/
|
|
50
|
+
const FileIcon = (props) => {
|
|
51
|
+
|
|
52
|
+
const { file = {}, selected = false, onSelect } = props
|
|
53
|
+
const { id, icon, label, actions = [], src = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png", footer } = file
|
|
54
|
+
|
|
55
|
+
function select() {
|
|
56
|
+
if (onSelect && !selected) onSelect(id)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const style = selected ? 'file-icon--selected' :''
|
|
60
|
+
return (
|
|
61
|
+
<div className={`file-icon ${style}`} onClick={select}>
|
|
62
|
+
<header>
|
|
63
|
+
{icon? <Icon size="small" icon={icon} /> : null }
|
|
64
|
+
<MenuIcon size="small">
|
|
65
|
+
{actions.map(action => <MenuItem icon={action.icon} label={action.label} onSelect={action.execute} />)}
|
|
66
|
+
</MenuIcon>
|
|
67
|
+
</header>
|
|
68
|
+
<picture>
|
|
69
|
+
<img src={src}></img>
|
|
70
|
+
</picture>
|
|
71
|
+
<main>
|
|
72
|
+
<label>{label}</label>
|
|
73
|
+
</main>
|
|
74
|
+
{ footer ? <footer>{footer}</footer> : null }
|
|
75
|
+
</div>
|
|
76
|
+
)
|
|
77
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Button } from '../../html'
|
|
3
|
+
import { FileExplorer, FileIconsView } from './explorer'
|
|
4
|
+
|
|
5
|
+
const thumb1 = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png"
|
|
6
|
+
|
|
7
|
+
const files = [
|
|
8
|
+
{ id: "0001", icon: "star", label: "File 1", src:thumb1, actions: [ { icon:"info", label:"Action1", execute: () => alert("Action1")} ], footer: <span>ok</span> },
|
|
9
|
+
{ id: "0002", icon: "star", label: "File 2", src:thumb1 },
|
|
10
|
+
{ id: "0003", icon: "star", label: "File 3", src:thumb1 },
|
|
11
|
+
{ id: "0004", icon: "star", label: "File 4", src:thumb1 },
|
|
12
|
+
{ id: "0005", icon: "star", label: "File 5", src:thumb1 },
|
|
13
|
+
{ id: "0006", icon: "star", label: "File 6", src:thumb1 },
|
|
14
|
+
{ id: "0007", icon: "star", label: "File 7", src:thumb1 },
|
|
15
|
+
{ id: "0008", icon: "star", label: "File 8", src:thumb1 },
|
|
16
|
+
{ id: "0009", icon: "star", label: "File 9", src:thumb1 },
|
|
17
|
+
{ id: "0010", icon: "star", label: "File 10", src:thumb1 },
|
|
18
|
+
]
|
|
19
|
+
|
|
20
|
+
const FileExplorerTest = (props) => {
|
|
21
|
+
return (
|
|
22
|
+
<div style={{ padding: "1rem", flex: "1", height: "100%" }}>
|
|
23
|
+
<FileExplorer files={files} />
|
|
24
|
+
</div>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
const FileIconViewTest = (props) => {
|
|
30
|
+
return (
|
|
31
|
+
<div style={{ padding: "1rem", flex: "1", height: "100%" }}>
|
|
32
|
+
<FileIconsView files={files} />
|
|
33
|
+
</div>
|
|
34
|
+
)
|
|
35
|
+
}
|
package/src/widgets/index.js
CHANGED