playbook_ui 14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806 → 14.9.0.pre.alpha.PLAY16264818
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_select/_select.tsx +19 -14
- data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx +108 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/index.ts +26 -100
- data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/table.rb +2 -17
- data/app/pb_kits/playbook/utilities/hookFormProps.ts +16 -0
- data/dist/chunks/{_typeahead-CCDoUmRR.js → _typeahead-B8fkIeXA.js} +1 -1
- data/dist/chunks/{_weekday_stacked-CxjKLoMr.js → _weekday_stacked-DxlPBh55.js} +2 -2
- data/dist/chunks/{lib-CVPInSs5.js → lib-SyD3buPZ.js} +1 -1
- data/dist/chunks/{pb_form_validation-CDLJ5eAG.js → pb_form_validation-Dt8UJgrJ.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +0 -95
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fd75b9e4b0f7ce117dbd06fd2a726c2c365b6e5bf64cb203f030ba83659ae448
|
4
|
+
data.tar.gz: 4973b4425fac4133d09a37743f38638af91d63ac3a720555846ca286b0358635
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: cdd757f0e267dede1c878c35a04a53cc26fb39568a802ae979477d938c6fc3e23f4e48150ec4d549717febb1daf69ae8d60285582c1ef58cd539b819ac47ab08
|
7
|
+
data.tar.gz: 9a2776ad808a0e04c2f152e64975d48b02911c3edd4cda0be6d317571fd92553d29cd6e8159444d392d2a48815e4ee1318b4eaabaf5c17bdba9c9c89ff22538b
|
@@ -1,8 +1,10 @@
|
|
1
1
|
import React, { forwardRef } from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
+
import { FieldValues } from 'react-hook-form'
|
3
4
|
|
4
5
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
6
|
import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
|
7
|
+
import { HookFormProps, withHookForm } from '../utilities/hookFormProps'
|
6
8
|
import type { InputCallback } from '../types'
|
7
9
|
import { getAllIcons } from "../utilities/icons/allicons"
|
8
10
|
|
@@ -16,7 +18,7 @@ type SelectOption = {
|
|
16
18
|
disabled?: boolean,
|
17
19
|
}
|
18
20
|
|
19
|
-
type SelectProps = {
|
21
|
+
type SelectProps<T extends FieldValues = FieldValues> = {
|
20
22
|
aria?: { [key: string]: string },
|
21
23
|
blankSelection?: string,
|
22
24
|
children?: Node,
|
@@ -30,16 +32,17 @@ type SelectProps = {
|
|
30
32
|
includeBlank?: string,
|
31
33
|
inline?: boolean,
|
32
34
|
label?: string,
|
33
|
-
margin
|
35
|
+
margin?: string,
|
34
36
|
marginBottom: string,
|
37
|
+
marginTop: string,
|
35
38
|
multiple?: boolean,
|
36
39
|
name?: string,
|
37
|
-
onChange
|
40
|
+
onChange?: InputCallback<HTMLSelectElement>,
|
38
41
|
options: SelectOption[],
|
39
42
|
required?: boolean,
|
40
43
|
showArrow?: boolean,
|
41
44
|
value?: string,
|
42
|
-
} & GlobalProps
|
45
|
+
} & GlobalProps & Partial<HookFormProps<T>>
|
43
46
|
|
44
47
|
const createOptions = (options: SelectOption[]) => options.map((option, index) => (
|
45
48
|
<option
|
@@ -51,7 +54,7 @@ const createOptions = (options: SelectOption[]) => options.map((option, index) =
|
|
51
54
|
</option>
|
52
55
|
))
|
53
56
|
|
54
|
-
const Select = ({
|
57
|
+
const Select = <T extends FieldValues = FieldValues>({
|
55
58
|
aria = {},
|
56
59
|
blankSelection,
|
57
60
|
children,
|
@@ -65,17 +68,20 @@ const Select = ({
|
|
65
68
|
inline = false,
|
66
69
|
multiple = false,
|
67
70
|
name,
|
68
|
-
onChange
|
71
|
+
onChange,
|
69
72
|
options = [],
|
73
|
+
register,
|
70
74
|
required = false,
|
75
|
+
rules,
|
71
76
|
showArrow = false,
|
72
77
|
value,
|
73
78
|
...props
|
74
|
-
}: SelectProps
|
79
|
+
}: SelectProps<T>, ref: React.LegacyRef<HTMLSelectElement>) => {
|
75
80
|
const ariaProps = buildAriaProps(aria)
|
76
81
|
const dataProps = buildDataProps(data)
|
77
82
|
const htmlProps = buildHtmlProps(htmlOptions)
|
78
83
|
const optionsList = createOptions(options)
|
84
|
+
const hookFormProps = name ? withHookForm({ register, name, rules }) : {}
|
79
85
|
|
80
86
|
const inlineClass = inline ? 'inline' : null
|
81
87
|
const compactClass = compact ? 'compact' : null
|
@@ -91,21 +97,22 @@ const Select = ({
|
|
91
97
|
compactClass
|
92
98
|
);
|
93
99
|
|
94
|
-
const
|
100
|
+
const icons = getAllIcons()
|
101
|
+
const angleDown = icons?.angleDown?.icon as { [key: string]: SVGElement }
|
95
102
|
|
96
103
|
const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
|
97
104
|
const selectBody =(() =>{
|
98
105
|
if (children) return children
|
99
106
|
return (
|
100
107
|
<select
|
101
|
-
{...htmlOptions}
|
102
108
|
{...domSafeProps(props)}
|
109
|
+
{...hookFormProps}
|
103
110
|
disabled={disabled}
|
104
111
|
id={name}
|
105
112
|
multiple={multiple}
|
106
113
|
name={name}
|
107
|
-
onChange={onChange}
|
108
|
-
ref={ref}
|
114
|
+
onChange={onChange || hookFormProps.onChange}
|
115
|
+
ref={ref || hookFormProps.ref}
|
109
116
|
required={required}
|
110
117
|
value={value}
|
111
118
|
>
|
@@ -135,14 +142,12 @@ const Select = ({
|
|
135
142
|
htmlFor={name}
|
136
143
|
>
|
137
144
|
{selectBody}
|
138
|
-
{ multiple !== true
|
145
|
+
{ multiple !== true && angleDown &&
|
139
146
|
<Icon
|
140
147
|
className="pb_select_kit_caret svg-inline--fa"
|
141
148
|
customIcon={angleDown}
|
142
149
|
fixedWidth
|
143
150
|
/>
|
144
|
-
:
|
145
|
-
null
|
146
151
|
}
|
147
152
|
{error &&
|
148
153
|
<Body
|
@@ -0,0 +1,108 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { useForm } from 'react-hook-form'
|
3
|
+
import { Select, Card, Body, Button } from 'playbook-ui'
|
4
|
+
|
5
|
+
const SelectForm = (props) => {
|
6
|
+
const {
|
7
|
+
register,
|
8
|
+
handleSubmit,
|
9
|
+
formState: { errors },
|
10
|
+
watch,
|
11
|
+
} = useForm({
|
12
|
+
defaultValues: {
|
13
|
+
favoriteFood: '',
|
14
|
+
mealType: '',
|
15
|
+
dietaryRestrictions: '',
|
16
|
+
}
|
17
|
+
})
|
18
|
+
|
19
|
+
const onSubmit = (data) => {
|
20
|
+
console.log('Form submitted:', data)
|
21
|
+
}
|
22
|
+
|
23
|
+
// Watch form values for real-time display
|
24
|
+
const formValues = watch()
|
25
|
+
|
26
|
+
const foodOptions = [
|
27
|
+
{ value: 'pizza', text: 'Pizza' },
|
28
|
+
{ value: 'burger', text: 'Burger' },
|
29
|
+
{ value: 'sushi', text: 'Sushi' },
|
30
|
+
{ value: 'salad', text: 'Salad' },
|
31
|
+
]
|
32
|
+
|
33
|
+
const mealTypes = [
|
34
|
+
{ value: 'breakfast', text: 'Breakfast' },
|
35
|
+
{ value: 'lunch', text: 'Lunch' },
|
36
|
+
{ value: 'dinner', text: 'Dinner' },
|
37
|
+
]
|
38
|
+
|
39
|
+
const dietaryOptions = [
|
40
|
+
{ value: 'none', text: 'No Restrictions' },
|
41
|
+
{ value: 'vegetarian', text: 'Vegetarian' },
|
42
|
+
{ value: 'vegan', text: 'Vegan' },
|
43
|
+
{ value: 'glutenFree', text: 'Gluten Free' },
|
44
|
+
]
|
45
|
+
|
46
|
+
return (
|
47
|
+
<div>
|
48
|
+
<Card>
|
49
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
50
|
+
<Select
|
51
|
+
error={errors.favoriteFood?.message}
|
52
|
+
label="What's your favorite food?"
|
53
|
+
name="favoriteFood"
|
54
|
+
options={foodOptions}
|
55
|
+
register={register}
|
56
|
+
rules={{
|
57
|
+
required: 'Please select your favorite food',
|
58
|
+
}}
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
<Select
|
62
|
+
blankSelection="Choose a meal type..."
|
63
|
+
error={errors.mealType?.message}
|
64
|
+
label="Preferred meal time"
|
65
|
+
marginTop="md"
|
66
|
+
name="mealType"
|
67
|
+
options={mealTypes}
|
68
|
+
register={register}
|
69
|
+
rules={{
|
70
|
+
required: 'Please select a meal type',
|
71
|
+
}}
|
72
|
+
{...props}
|
73
|
+
/>
|
74
|
+
<Select
|
75
|
+
label="Dietary Restrictions"
|
76
|
+
marginTop="md"
|
77
|
+
name="dietaryRestrictions"
|
78
|
+
options={dietaryOptions}
|
79
|
+
register={register}
|
80
|
+
{...props}
|
81
|
+
/>
|
82
|
+
|
83
|
+
<Button
|
84
|
+
marginTop="lg"
|
85
|
+
text="Submit"
|
86
|
+
type="submit"
|
87
|
+
variant="primary"
|
88
|
+
|
89
|
+
/>
|
90
|
+
</form>
|
91
|
+
<Card marginTop="lg">
|
92
|
+
<Body
|
93
|
+
text="Current Form Values:"
|
94
|
+
variant="bold"
|
95
|
+
/>
|
96
|
+
<pre style={{ marginTop: '8px', color: "white" }}>
|
97
|
+
{JSON.stringify(formValues, null, 2)}
|
98
|
+
</pre>
|
99
|
+
</Card>
|
100
|
+
</Card>
|
101
|
+
</div>
|
102
|
+
)
|
103
|
+
}
|
104
|
+
|
105
|
+
export default SelectForm
|
106
|
+
|
107
|
+
|
108
|
+
|
@@ -10,3 +10,4 @@ export { default as SelectInline } from './_select_inline.jsx'
|
|
10
10
|
export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
|
11
11
|
export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
|
12
12
|
export { default as SelectMultiple } from './_select_multiple.jsx'
|
13
|
+
export { default as SelectForm } from './_select_form.jsx'
|
@@ -1,106 +1,32 @@
|
|
1
1
|
import PbEnhancedElement from '../pb_enhanced_element'
|
2
2
|
|
3
3
|
export default class PbTable extends PbEnhancedElement {
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
//
|
14
|
-
|
15
|
-
|
16
|
-
const
|
17
|
-
|
18
|
-
|
19
|
-
for (let i = 0; i < colSpan; i++) {
|
20
|
-
headers.push(header.textContent.replace(/\r?\n|\r/, ''));
|
21
|
-
}
|
22
|
-
});
|
23
|
-
// for each row in tbody
|
24
|
-
[].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
|
25
|
-
// for each cell
|
26
|
-
[].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
|
27
|
-
// apply the attribute
|
28
|
-
cell.setAttribute('data-title', headers[headerIndex])
|
29
|
-
})
|
30
|
-
})
|
31
|
-
});
|
32
|
-
|
33
|
-
// New sticky columns logic
|
34
|
-
this.initStickyColumns();
|
35
|
-
}
|
36
|
-
|
37
|
-
private initStickyColumns(): void {
|
38
|
-
// Find tables with sticky-left-column class
|
39
|
-
const tables = document.querySelectorAll('.sticky-left-column');
|
40
|
-
|
41
|
-
tables.forEach((table) => {
|
42
|
-
// Extract sticky left column IDs by looking at the component's class
|
43
|
-
const classList = Array.from(table.classList);
|
44
|
-
|
45
|
-
// Look for classes in the format sticky-left-column-{ids}
|
46
|
-
const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
|
47
|
-
if (stickyColumnClass) {
|
48
|
-
// Extract the IDs from the class name
|
49
|
-
this.stickyLeftColumns = stickyColumnClass
|
50
|
-
.replace('sticky-columns-', '')
|
51
|
-
.split('-');
|
52
|
-
|
53
|
-
if (this.stickyLeftColumns.length > 0) {
|
54
|
-
this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
|
55
|
-
this.handleStickyColumns();
|
56
|
-
window.addEventListener('resize', this.handleStickyColumnsRef);
|
57
|
-
}
|
4
|
+
static get selector(): string {
|
5
|
+
return '.table-responsive-collapse'
|
6
|
+
}
|
7
|
+
|
8
|
+
connect(): void {
|
9
|
+
const tables = document.querySelectorAll('.table-responsive-collapse');
|
10
|
+
|
11
|
+
// Each Table
|
12
|
+
[].forEach.call(tables, (table: HTMLTableElement) => {
|
13
|
+
// Header Titles
|
14
|
+
const headers: string[] = [];
|
15
|
+
[].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
|
16
|
+
const colSpan = header.colSpan
|
17
|
+
for (let i = 0; i < colSpan; i++) {
|
18
|
+
headers.push(header.textContent.replace(/\r?\n|\r/, ''));
|
58
19
|
}
|
59
20
|
});
|
60
|
-
}
|
61
|
-
|
62
|
-
private handleStickyColumns(): void {
|
63
|
-
let accumulatedWidth = 0;
|
64
21
|
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
header.classList.remove('sticky-shadow');
|
77
|
-
} else {
|
78
|
-
header.classList.remove('with-border');
|
79
|
-
header.classList.add('sticky-shadow');
|
80
|
-
}
|
81
|
-
|
82
|
-
accumulatedWidth += (header as HTMLElement).offsetWidth;
|
83
|
-
}
|
84
|
-
|
85
|
-
cells.forEach((cell) => {
|
86
|
-
cell.classList.add('sticky');
|
87
|
-
(cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
|
88
|
-
|
89
|
-
if (!isLastColumn) {
|
90
|
-
cell.classList.add('with-border');
|
91
|
-
cell.classList.remove('sticky-shadow');
|
92
|
-
} else {
|
93
|
-
cell.classList.remove('with-border');
|
94
|
-
cell.classList.add('sticky-shadow');
|
95
|
-
}
|
96
|
-
});
|
97
|
-
});
|
98
|
-
}
|
99
|
-
|
100
|
-
// Cleanup method to remove event listener
|
101
|
-
disconnect(): void {
|
102
|
-
if (this.handleStickyColumnsRef) {
|
103
|
-
window.removeEventListener('resize', this.handleStickyColumnsRef);
|
104
|
-
}
|
105
|
-
}
|
106
|
-
}
|
22
|
+
// for each row in tbody
|
23
|
+
[].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
|
24
|
+
// for each cell
|
25
|
+
[].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
|
26
|
+
// apply the attribute
|
27
|
+
cell.setAttribute('data-title', headers[headerIndex])
|
28
|
+
})
|
29
|
+
})
|
30
|
+
})
|
31
|
+
}
|
32
|
+
}
|
@@ -23,8 +23,6 @@ module Playbook
|
|
23
23
|
prop :text
|
24
24
|
prop :sticky, type: Playbook::Props::Boolean,
|
25
25
|
default: false
|
26
|
-
prop :sticky_left_column, type: Playbook::Props::Array,
|
27
|
-
default: []
|
28
26
|
prop :vertical_border, type: Playbook::Props::Boolean,
|
29
27
|
default: false
|
30
28
|
prop :striped, type: Playbook::Props::Boolean,
|
@@ -39,8 +37,8 @@ module Playbook
|
|
39
37
|
def classname
|
40
38
|
generate_classname(
|
41
39
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
42
|
-
disable_hover_class, container_class, data_table_class, sticky_class,
|
43
|
-
|
40
|
+
disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
|
41
|
+
vertical_border_class, striped_class, outer_padding_class,
|
44
42
|
"table-responsive-#{responsive}", separator: " "
|
45
43
|
)
|
46
44
|
end
|
@@ -75,19 +73,6 @@ module Playbook
|
|
75
73
|
sticky ? "sticky-header" : nil
|
76
74
|
end
|
77
75
|
|
78
|
-
def sticky_left_column_class
|
79
|
-
if sticky_left_column.empty?
|
80
|
-
nil
|
81
|
-
else
|
82
|
-
sticky_col_classname = "sticky-left-column sticky-columns"
|
83
|
-
sticky_left_column.each do |id|
|
84
|
-
sticky_col_classname += "-#{id}"
|
85
|
-
end
|
86
|
-
|
87
|
-
sticky_col_classname
|
88
|
-
end
|
89
|
-
end
|
90
|
-
|
91
76
|
def striped_class
|
92
77
|
striped ? "striped" : nil
|
93
78
|
end
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { UseFormRegister, FieldValues, RegisterOptions } from 'react-hook-form'
|
2
|
+
|
3
|
+
export type HookFormProps<T extends FieldValues = FieldValues> = {
|
4
|
+
register?: UseFormRegister<T>
|
5
|
+
rules?: RegisterOptions
|
6
|
+
name: string
|
7
|
+
}
|
8
|
+
|
9
|
+
export const withHookForm = <T extends FieldValues = FieldValues>(
|
10
|
+
props: HookFormProps<T>
|
11
|
+
) => {
|
12
|
+
const { register, name, rules } = props
|
13
|
+
if (!register) return {}
|
14
|
+
|
15
|
+
return register(name, rules)
|
16
|
+
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-
|
1
|
+
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-SyD3buPZ.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
|
2
2
|
/*!
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
4
4
|
Licensed under the MIT License (MIT), see
|