@furystack/shades-common-components 6.0.0 → 8.0.0
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/esm/components/command-palette/command-palette-input.d.ts.map +1 -1
- package/esm/components/command-palette/command-palette-input.js +26 -23
- package/esm/components/command-palette/command-palette-input.js.map +1 -1
- package/esm/components/command-palette/command-palette-suggestion-list.d.ts.map +1 -1
- package/esm/components/command-palette/command-palette-suggestion-list.js +33 -29
- package/esm/components/command-palette/command-palette-suggestion-list.js.map +1 -1
- package/esm/components/command-palette/index.d.ts.map +1 -1
- package/esm/components/command-palette/index.js +48 -44
- package/esm/components/command-palette/index.js.map +1 -1
- package/esm/components/data-grid/body.d.ts.map +1 -1
- package/esm/components/data-grid/body.js +0 -5
- package/esm/components/data-grid/body.js.map +1 -1
- package/esm/components/data-grid/data-grid-row.d.ts.map +1 -1
- package/esm/components/data-grid/data-grid-row.js +14 -7
- package/esm/components/data-grid/data-grid-row.js.map +1 -1
- package/esm/components/data-grid/data-grid.d.ts +7 -1
- package/esm/components/data-grid/data-grid.d.ts.map +1 -1
- package/esm/components/data-grid/data-grid.js +7 -6
- package/esm/components/data-grid/data-grid.js.map +1 -1
- package/esm/components/data-grid/footer.d.ts +3 -0
- package/esm/components/data-grid/footer.d.ts.map +1 -1
- package/esm/components/data-grid/footer.js +13 -11
- package/esm/components/data-grid/footer.js.map +1 -1
- package/esm/components/data-grid/header.d.ts +6 -6
- package/esm/components/data-grid/header.d.ts.map +1 -1
- package/esm/components/data-grid/header.js +54 -42
- package/esm/components/data-grid/header.js.map +1 -1
- package/esm/components/data-grid/selection-cell.d.ts.map +1 -1
- package/esm/components/data-grid/selection-cell.js +5 -3
- package/esm/components/data-grid/selection-cell.js.map +1 -1
- package/esm/components/inputs/input.js +1 -1
- package/esm/components/inputs/input.js.map +1 -1
- package/esm/components/suggest/suggest-input.d.ts.map +1 -1
- package/esm/components/suggest/suggest-input.js +12 -9
- package/esm/components/suggest/suggest-input.js.map +1 -1
- package/esm/components/suggest/suggest-manager.js +2 -2
- package/esm/components/suggest/suggest-manager.js.map +1 -1
- package/esm/components/suggest/suggestion-list.js +32 -27
- package/esm/components/suggest/suggestion-list.js.map +1 -1
- package/esm/services/collection-service.d.ts +2 -21
- package/esm/services/collection-service.d.ts.map +1 -1
- package/esm/services/collection-service.js +7 -35
- package/esm/services/collection-service.js.map +1 -1
- package/esm/services/collection-service.spec.js +2 -5
- package/esm/services/collection-service.spec.js.map +1 -1
- package/package.json +5 -5
- package/src/components/command-palette/command-palette-input.tsx +26 -28
- package/src/components/command-palette/command-palette-suggestion-list.tsx +42 -38
- package/src/components/command-palette/index.tsx +55 -51
- package/src/components/data-grid/body.tsx +0 -11
- package/src/components/data-grid/data-grid-row.tsx +43 -41
- package/src/components/data-grid/data-grid.tsx +25 -13
- package/src/components/data-grid/footer.tsx +19 -13
- package/src/components/data-grid/header.tsx +73 -53
- package/src/components/data-grid/selection-cell.tsx +4 -2
- package/src/components/inputs/input.tsx +1 -1
- package/src/components/suggest/suggest-input.tsx +4 -6
- package/src/components/suggest/suggest-manager.ts +2 -2
- package/src/components/suggest/suggestion-list.tsx +32 -32
- package/src/services/collection-service.spec.ts +14 -20
- package/src/services/collection-service.ts +7 -61
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"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"}
|
|
@@ -5,11 +5,8 @@ const testEntries = [{ foo: 1 }, { foo: 2 }, { foo: 3 }];
|
|
|
5
5
|
describe('CollectionService', () => {
|
|
6
6
|
describe('Selection', () => {
|
|
7
7
|
it('Should add and remove selection', async () => {
|
|
8
|
-
await usingAsync(new CollectionService({
|
|
9
|
-
|
|
10
|
-
loader: async () => ({ count: 3, entries: testEntries }),
|
|
11
|
-
}), async (collectionService) => {
|
|
12
|
-
await collectionService.getEntries({});
|
|
8
|
+
await usingAsync(new CollectionService({}), async (collectionService) => {
|
|
9
|
+
collectionService.data.setValue({ count: 3, entries: testEntries });
|
|
13
10
|
testEntries.forEach((entry) => {
|
|
14
11
|
expect(collectionService.isSelected(entry)).toBe(false);
|
|
15
12
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collection-service.spec.js","sourceRoot":"","sources":["../../src/services/collection-service.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAA;AAExD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAC/C,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"collection-service.spec.js","sourceRoot":"","sources":["../../src/services/collection-service.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAA;AAExD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAC/C,MAAM,UAAU,CAAC,IAAI,iBAAiB,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;gBACtE,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAA;gBACnE,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC5B,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBACzD,CAAC,CAAC,CAAA;gBAEF,iBAAiB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBAEhD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC/D,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAChE,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEhE,iBAAiB,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBAErD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;gBAEhE,iBAAiB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;gBACjD,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACjE,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@furystack/shades-common-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"vitest": "^1.4.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@furystack/core": "^
|
|
39
|
-
"@furystack/inject": "^
|
|
40
|
-
"@furystack/shades": "^
|
|
41
|
-
"@furystack/utils": "^
|
|
38
|
+
"@furystack/core": "^14.0.0",
|
|
39
|
+
"@furystack/inject": "^10.0.0",
|
|
40
|
+
"@furystack/shades": "^10.0.0",
|
|
41
|
+
"@furystack/utils": "^6.0.0",
|
|
42
42
|
"path-to-regexp": "^6.2.1",
|
|
43
43
|
"semaphore-async-await": "^1.5.1"
|
|
44
44
|
},
|
|
@@ -3,40 +3,38 @@ import { ThemeProviderService } from '../../services/theme-provider-service.js'
|
|
|
3
3
|
import { promisifyAnimation } from '../../utils/promisify-animation.js'
|
|
4
4
|
import type { CommandPaletteManager } from './command-palette-manager.js'
|
|
5
5
|
|
|
6
|
+
const updateComponent = async (element: HTMLElement, isOpened: boolean) => {
|
|
7
|
+
const input = element.firstChild as HTMLInputElement | null
|
|
8
|
+
if (input) {
|
|
9
|
+
if (isOpened) {
|
|
10
|
+
input.value = ''
|
|
11
|
+
await promisifyAnimation(element, [{ width: '0%' }, { width: '100%' }], {
|
|
12
|
+
duration: 300,
|
|
13
|
+
fill: 'forwards',
|
|
14
|
+
easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
|
|
15
|
+
})
|
|
16
|
+
input.focus()
|
|
17
|
+
} else {
|
|
18
|
+
await promisifyAnimation(element, [{ width: '100%' }, { width: '0%' }], {
|
|
19
|
+
duration: 300,
|
|
20
|
+
fill: 'forwards',
|
|
21
|
+
easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
|
|
22
|
+
})
|
|
23
|
+
input.value = ''
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
6
28
|
export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
|
|
7
29
|
shadowDomName: 'shades-command-palette-input',
|
|
8
30
|
render: ({ element, props, injector, useObservable }) => {
|
|
9
31
|
const { theme } = injector.getInstance(ThemeProviderService)
|
|
10
32
|
const { manager } = props
|
|
11
33
|
|
|
12
|
-
useObservable(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const input = element.firstChild as HTMLInputElement | null
|
|
17
|
-
if (input) {
|
|
18
|
-
if (isOpened) {
|
|
19
|
-
input.value = ''
|
|
20
|
-
await promisifyAnimation(element, [{ width: '0%' }, { width: '100%' }], {
|
|
21
|
-
duration: 300,
|
|
22
|
-
fill: 'forwards',
|
|
23
|
-
easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
|
|
24
|
-
})
|
|
25
|
-
input.focus()
|
|
26
|
-
} else {
|
|
27
|
-
await promisifyAnimation(element, [{ width: '100%' }, { width: '0%' }], {
|
|
28
|
-
duration: 300,
|
|
29
|
-
fill: 'forwards',
|
|
30
|
-
easing: 'cubic-bezier(0.595, 0.425, 0.415, 0.845)',
|
|
31
|
-
})
|
|
32
|
-
input.value = ''
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
true,
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
element.style.width = manager.isOpened.getValue() ? '100%' : '0%'
|
|
34
|
+
const [isCurrentlyOpened] = useObservable('isOpened', manager.isOpened, {
|
|
35
|
+
onChange: (newValue) => updateComponent(element, newValue),
|
|
36
|
+
})
|
|
37
|
+
element.style.width = isCurrentlyOpened ? '100%' : '0%'
|
|
40
38
|
element.style.overflow = 'hidden'
|
|
41
39
|
return (
|
|
42
40
|
<input
|
|
@@ -10,46 +10,50 @@ export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManag
|
|
|
10
10
|
const { theme } = injector.getInstance(ThemeProviderService)
|
|
11
11
|
|
|
12
12
|
const [suggestions] = useObservable('suggestions', props.manager.currentSuggestions)
|
|
13
|
-
const [selectedIndex] = useObservable('selectedIndex', props.manager.selectedIndex,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
13
|
+
const [selectedIndex] = useObservable('selectedIndex', props.manager.selectedIndex, {
|
|
14
|
+
onChange: (idx) => {
|
|
15
|
+
;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
|
|
16
|
+
if (i === idx) {
|
|
17
|
+
s.style.background = theme.background.paper
|
|
18
|
+
s.style.fontWeight = 'bolder'
|
|
19
|
+
} else {
|
|
20
|
+
s.style.background = theme.background.default
|
|
21
|
+
s.style.fontWeight = 'normal'
|
|
22
|
+
}
|
|
23
|
+
})
|
|
24
|
+
},
|
|
23
25
|
})
|
|
24
26
|
|
|
25
|
-
const [isOpenedAtRender] = useObservable('isOpenedAtRender', props.manager.isOpened,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
27
|
+
const [isOpenedAtRender] = useObservable('isOpenedAtRender', props.manager.isOpened, {
|
|
28
|
+
onChange: async (isOpened) => {
|
|
29
|
+
const container = element.firstElementChild as HTMLDivElement
|
|
30
|
+
if (isOpened) {
|
|
31
|
+
container.style.display = 'initial'
|
|
32
|
+
container.style.zIndex = '1'
|
|
33
|
+
container.style.width = `calc(${Math.round(
|
|
34
|
+
element.parentElement?.getBoundingClientRect().width || 200,
|
|
35
|
+
)}px - 3em)`
|
|
36
|
+
await promisifyAnimation(
|
|
37
|
+
container,
|
|
38
|
+
[
|
|
39
|
+
{ opacity: 0, transform: 'translate(0, -50px)' },
|
|
40
|
+
{ opacity: 1, transform: 'translate(0, 0)' },
|
|
41
|
+
],
|
|
42
|
+
{ fill: 'forwards', duration: 500 },
|
|
43
|
+
)
|
|
44
|
+
} else {
|
|
45
|
+
await promisifyAnimation(
|
|
46
|
+
container,
|
|
47
|
+
[
|
|
48
|
+
{ opacity: 1, transform: 'translate(0, 0)' },
|
|
49
|
+
{ opacity: 0, transform: 'translate(0, -50px)' },
|
|
50
|
+
],
|
|
51
|
+
{ fill: 'forwards', duration: 200 },
|
|
52
|
+
)
|
|
53
|
+
container.style.zIndex = '-1'
|
|
54
|
+
container.style.display = 'none'
|
|
55
|
+
}
|
|
56
|
+
},
|
|
53
57
|
})
|
|
54
58
|
|
|
55
59
|
return (
|
|
@@ -29,69 +29,73 @@ export const CommandPalette = Shade<CommandPaletteProps>({
|
|
|
29
29
|
|
|
30
30
|
useDisposable('clickAwayService', () => new ClickAwayService(element, () => manager.isOpened.setValue(false)))
|
|
31
31
|
|
|
32
|
-
const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
})
|
|
39
|
-
} else {
|
|
40
|
-
promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
|
|
41
|
-
duration: 100,
|
|
42
|
-
fill: 'forwards',
|
|
43
|
-
})
|
|
44
|
-
}
|
|
45
|
-
})
|
|
46
|
-
|
|
47
|
-
const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, (isOpened) => {
|
|
48
|
-
{
|
|
49
|
-
const suggestions = element.querySelector('.close-suggestions')
|
|
50
|
-
const postControls = element.querySelector('.post-controls')
|
|
51
|
-
const inputContainer = element.querySelector('.input-container') as HTMLDivElement
|
|
52
|
-
if (isOpened) {
|
|
53
|
-
promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
|
|
54
|
-
duration: 500,
|
|
32
|
+
const [isLoadingAtRender] = useObservable('isLoading', manager.isLoading, {
|
|
33
|
+
onChange: async (isLoading) => {
|
|
34
|
+
const loader = element.querySelector('.loader-container')
|
|
35
|
+
if (isLoading) {
|
|
36
|
+
promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
|
|
37
|
+
duration: 100,
|
|
55
38
|
fill: 'forwards',
|
|
56
39
|
})
|
|
57
|
-
|
|
58
|
-
promisifyAnimation(
|
|
40
|
+
} else {
|
|
41
|
+
promisifyAnimation(loader, [{ opacity: 1 }, { opacity: 0 }], {
|
|
59
42
|
duration: 100,
|
|
60
43
|
fill: 'forwards',
|
|
61
44
|
})
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
})
|
|
62
48
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
49
|
+
const [isOpenedAtRender, setIsOpened] = useObservable('isOpened', manager.isOpened, {
|
|
50
|
+
onChange: (isOpened) => {
|
|
51
|
+
{
|
|
52
|
+
const suggestions = element.querySelector('.close-suggestions')
|
|
53
|
+
const postControls = element.querySelector('.post-controls')
|
|
54
|
+
const inputContainer = element.querySelector('.input-container') as HTMLDivElement
|
|
55
|
+
if (isOpened) {
|
|
56
|
+
promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
|
|
67
57
|
duration: 500,
|
|
68
58
|
fill: 'forwards',
|
|
69
|
-
|
|
70
|
-
},
|
|
71
|
-
)
|
|
72
|
-
} else {
|
|
73
|
-
promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
|
|
74
|
-
duration: 500,
|
|
75
|
-
fill: 'forwards',
|
|
76
|
-
})
|
|
59
|
+
})
|
|
77
60
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
61
|
+
promisifyAnimation(postControls, [{ width: '0px' }, { width: '50px' }], {
|
|
62
|
+
duration: 100,
|
|
63
|
+
fill: 'forwards',
|
|
64
|
+
})
|
|
65
|
+
|
|
66
|
+
promisifyAnimation(
|
|
67
|
+
inputContainer,
|
|
68
|
+
[{ background: 'transparent' }, { background: theme.background.default }],
|
|
69
|
+
{
|
|
70
|
+
duration: 500,
|
|
71
|
+
fill: 'forwards',
|
|
72
|
+
easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
|
|
73
|
+
},
|
|
74
|
+
)
|
|
75
|
+
} else {
|
|
76
|
+
promisifyAnimation(suggestions, [{ opacity: 1 }, { opacity: 0 }], {
|
|
77
|
+
duration: 500,
|
|
78
|
+
fill: 'forwards',
|
|
79
|
+
})
|
|
83
80
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
[{ background: theme.background.default }, { background: 'transparent' }],
|
|
87
|
-
{
|
|
88
|
-
duration: 300,
|
|
81
|
+
promisifyAnimation(postControls, [{ width: '50px' }, { width: '0px' }], {
|
|
82
|
+
duration: 500,
|
|
89
83
|
fill: 'forwards',
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
84
|
+
delay: 300,
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
promisifyAnimation(
|
|
88
|
+
inputContainer,
|
|
89
|
+
[{ background: theme.background.default }, { background: 'transparent' }],
|
|
90
|
+
{
|
|
91
|
+
duration: 300,
|
|
92
|
+
fill: 'forwards',
|
|
93
|
+
easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
|
|
94
|
+
},
|
|
95
|
+
)
|
|
96
|
+
}
|
|
93
97
|
}
|
|
94
|
-
}
|
|
98
|
+
},
|
|
95
99
|
})
|
|
96
100
|
|
|
97
101
|
return (
|
|
@@ -2,7 +2,6 @@ import type { CollectionService } from '../../services/collection-service.js'
|
|
|
2
2
|
import type { ChildrenList } from '@furystack/shades'
|
|
3
3
|
import { Shade, createComponent } from '@furystack/shades'
|
|
4
4
|
import type { DataRowCells } from './data-grid.js'
|
|
5
|
-
import { Loader } from '../loader.js'
|
|
6
5
|
import { DataGridRow } from './data-grid-row.js'
|
|
7
6
|
|
|
8
7
|
export interface DataGridBodyProps<T> {
|
|
@@ -29,16 +28,6 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
|
|
|
29
28
|
},
|
|
30
29
|
render: ({ props, useObservable }) => {
|
|
31
30
|
const [data] = useObservable('data', props.service.data)
|
|
32
|
-
const [isLoading] = useObservable('isLoading', props.service.isLoading)
|
|
33
|
-
|
|
34
|
-
if (isLoading) {
|
|
35
|
-
return (
|
|
36
|
-
<div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
|
|
37
|
-
{/* TODO: Skeleton */}
|
|
38
|
-
{props.loaderComponent || <Loader style={{ height: '128px', width: '128px' }} />}
|
|
39
|
-
</div>
|
|
40
|
-
)
|
|
41
|
-
}
|
|
42
31
|
|
|
43
32
|
if (!data?.entries?.length) {
|
|
44
33
|
return props.emptyComponent || <div> - No Data - </div>
|
|
@@ -39,53 +39,55 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
const
|
|
42
|
+
const attachFocusedStyle = (newEntry?: any) => {
|
|
43
|
+
if (newEntry === props.entry) {
|
|
44
|
+
attachStyles(element, {
|
|
45
|
+
style: props.focusedRowStyle || {
|
|
46
|
+
boxShadow: `0 0 50px 1px rgba(255,255,255,0.2) inset, 0 0 35px 1px var(--shades-theme-palette-primary-main) inset, 2px 0px 5px 0px rgba(0,0,0,0.3)`,
|
|
47
|
+
transition: 'box-shadow 0.1s ease-in-out',
|
|
48
|
+
fontWeight: 'bolder',
|
|
49
|
+
},
|
|
50
|
+
})
|
|
43
51
|
|
|
44
|
-
|
|
52
|
+
element.classList.add('focused')
|
|
45
53
|
|
|
46
|
-
|
|
47
|
-
'focus',
|
|
48
|
-
service.focusedEntry,
|
|
49
|
-
(newEntry) => {
|
|
50
|
-
if (newEntry === props.entry) {
|
|
51
|
-
attachStyles(element, {
|
|
52
|
-
style: props.focusedRowStyle || {
|
|
53
|
-
boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
|
|
54
|
-
fontWeight: 'bolder',
|
|
55
|
-
},
|
|
56
|
-
})
|
|
54
|
+
const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
|
|
57
55
|
|
|
58
|
-
|
|
56
|
+
const parent = element.closest('.shade-grid-wrapper') as HTMLElement
|
|
57
|
+
const maxTop = element.offsetTop - headerHeight
|
|
58
|
+
const currentTop = parent.scrollTop
|
|
59
|
+
if (maxTop < currentTop) {
|
|
60
|
+
parent.scrollTo({ top: maxTop, behavior: 'smooth' })
|
|
61
|
+
}
|
|
59
62
|
|
|
60
|
-
|
|
63
|
+
const footerHeight =
|
|
64
|
+
element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
|
|
65
|
+
42
|
|
66
|
+
const visibleMaxTop = parent.clientHeight - footerHeight
|
|
67
|
+
const desiredMaxTop = element.offsetTop + element.clientHeight
|
|
68
|
+
if (desiredMaxTop > visibleMaxTop) {
|
|
69
|
+
parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
|
|
70
|
+
}
|
|
71
|
+
} else {
|
|
72
|
+
element.classList.remove('focused')
|
|
73
|
+
attachStyles(element, {
|
|
74
|
+
style: props.unfocusedRowStyle || {
|
|
75
|
+
boxShadow: 'none',
|
|
76
|
+
fontWeight: 'inherit',
|
|
77
|
+
},
|
|
78
|
+
})
|
|
79
|
+
}
|
|
80
|
+
}
|
|
61
81
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
parent.scrollTo({ top: maxTop, behavior: 'smooth' })
|
|
67
|
-
}
|
|
82
|
+
const [selection] = useObservable('isSelected', service.selection, {
|
|
83
|
+
onChange: attachSelectedStyles,
|
|
84
|
+
})
|
|
85
|
+
attachSelectedStyles(selection)
|
|
68
86
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
const desiredMaxTop = element.offsetTop + element.clientHeight
|
|
74
|
-
if (desiredMaxTop > visibleMaxTop) {
|
|
75
|
-
parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
|
|
76
|
-
}
|
|
77
|
-
} else {
|
|
78
|
-
element.classList.remove('focused')
|
|
79
|
-
attachStyles(element, {
|
|
80
|
-
style: props.unfocusedRowStyle || {
|
|
81
|
-
boxShadow: 'none',
|
|
82
|
-
fontWeight: 'inherit',
|
|
83
|
-
},
|
|
84
|
-
})
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
true,
|
|
88
|
-
)
|
|
87
|
+
const [focus] = useObservable('focus', service.focusedEntry, {
|
|
88
|
+
onChange: attachFocusedStyle,
|
|
89
|
+
})
|
|
90
|
+
attachFocusedStyle(focus)
|
|
89
91
|
|
|
90
92
|
element.style.display = 'table-row'
|
|
91
93
|
element.style.cursor = 'default'
|
|
@@ -7,6 +7,8 @@ import { DataGridBody } from './body.js'
|
|
|
7
7
|
import { DataGridFooter } from './footer.js'
|
|
8
8
|
import { ThemeProviderService } from '../../services/theme-provider-service.js'
|
|
9
9
|
import { ClickAwayService } from '../../services/click-away-service.js'
|
|
10
|
+
import type { FindOptions } from '@furystack/core'
|
|
11
|
+
import type { ObservableValue } from '@furystack/utils'
|
|
10
12
|
|
|
11
13
|
export type DataHeaderCells<T> = {
|
|
12
14
|
[TKey in keyof T | 'default']?: (name: keyof T) => JSX.Element
|
|
@@ -27,7 +29,12 @@ export interface DataGridProps<T> {
|
|
|
27
29
|
/**
|
|
28
30
|
* A collection service to use for data source
|
|
29
31
|
*/
|
|
30
|
-
|
|
32
|
+
collectionService: CollectionService<T>
|
|
33
|
+
/**
|
|
34
|
+
* The query settings to use for the data source
|
|
35
|
+
*/
|
|
36
|
+
findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>
|
|
37
|
+
|
|
31
38
|
/**
|
|
32
39
|
* A list of custom header components to use
|
|
33
40
|
*/
|
|
@@ -68,12 +75,10 @@ export interface DataGridProps<T> {
|
|
|
68
75
|
loaderComponent?: JSX.Element
|
|
69
76
|
}
|
|
70
77
|
|
|
71
|
-
export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any> = Shade
|
|
72
|
-
DataGridProps<any>
|
|
73
|
-
>({
|
|
78
|
+
export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
|
|
74
79
|
shadowDomName: 'shade-data-grid',
|
|
75
80
|
constructed: ({ props }) => {
|
|
76
|
-
const listener = (ev: KeyboardEvent) => props.
|
|
81
|
+
const listener = (ev: KeyboardEvent) => props.collectionService.handleKeyDown(ev)
|
|
77
82
|
window.addEventListener('keydown', listener)
|
|
78
83
|
return () => window.removeEventListener('keydown', listener)
|
|
79
84
|
},
|
|
@@ -85,12 +90,13 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
|
|
|
85
90
|
'clickAway',
|
|
86
91
|
() =>
|
|
87
92
|
new ClickAwayService(element, () => {
|
|
88
|
-
props.
|
|
93
|
+
props.collectionService.hasFocus.setValue(false)
|
|
89
94
|
}),
|
|
90
95
|
)
|
|
91
96
|
|
|
92
97
|
const headerStyle: Partial<CSSStyleDeclaration> = {
|
|
93
98
|
backdropFilter: 'blur(12px) saturate(180%)',
|
|
99
|
+
background: 'rgba(128,128,128,0.3)',
|
|
94
100
|
color: theme.text.secondary,
|
|
95
101
|
height: '38px',
|
|
96
102
|
alignItems: 'center',
|
|
@@ -114,18 +120,24 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
|
|
|
114
120
|
zIndex: '1',
|
|
115
121
|
}}
|
|
116
122
|
onclick={() => {
|
|
117
|
-
props.
|
|
123
|
+
props.collectionService.hasFocus.setValue(true)
|
|
118
124
|
}}
|
|
119
125
|
ariaMultiSelectable="true"
|
|
120
126
|
>
|
|
121
127
|
<table style={{ width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative' }}>
|
|
122
128
|
<thead>
|
|
123
129
|
<tr>
|
|
124
|
-
{props.columns.map((column
|
|
130
|
+
{props.columns.map((column) => {
|
|
125
131
|
return (
|
|
126
132
|
<th style={headerStyle}>
|
|
127
133
|
{props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
|
|
128
|
-
<DataGridHeader<
|
|
134
|
+
<DataGridHeader<
|
|
135
|
+
ReturnType<typeof props.collectionService.data.getValue>['entries'][number],
|
|
136
|
+
typeof column
|
|
137
|
+
>
|
|
138
|
+
field={column}
|
|
139
|
+
findOptions={props.findOptions}
|
|
140
|
+
/>
|
|
129
141
|
)}
|
|
130
142
|
</th>
|
|
131
143
|
)
|
|
@@ -134,10 +146,10 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
|
|
|
134
146
|
</thead>
|
|
135
147
|
<DataGridBody
|
|
136
148
|
columns={props.columns}
|
|
137
|
-
service={props.
|
|
149
|
+
service={props.collectionService}
|
|
138
150
|
rowComponents={props.rowComponents}
|
|
139
|
-
onRowClick={(entry, ev) => props.
|
|
140
|
-
onRowDoubleClick={(entry) => props.
|
|
151
|
+
onRowClick={(entry, ev) => props.collectionService.handleRowClick(entry, ev)}
|
|
152
|
+
onRowDoubleClick={(entry) => props.collectionService.handleRowDoubleClick(entry)}
|
|
141
153
|
style={props.styles?.cell}
|
|
142
154
|
focusedRowStyle={props.focusedRowStyle}
|
|
143
155
|
selectedRowStyle={props.selectedRowStyle}
|
|
@@ -147,7 +159,7 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
|
|
|
147
159
|
loaderComponent={props.loaderComponent}
|
|
148
160
|
/>
|
|
149
161
|
</table>
|
|
150
|
-
<DataGridFooter service={props.
|
|
162
|
+
<DataGridFooter service={props.collectionService} findOptions={props.findOptions} />
|
|
151
163
|
</div>
|
|
152
164
|
)
|
|
153
165
|
},
|