playbook_ui 14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806 → 14.9.0.pre.alpha.PLAY16264818

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d89f4517dd122bc15bf46cece276b7623372b18e9c168bda22529f464e335b52
4
- data.tar.gz: f4627b91aeb56d610c20341ffdf10f0d4d56df24889ce87e56c01f1878b3959a
3
+ metadata.gz: fd75b9e4b0f7ce117dbd06fd2a726c2c365b6e5bf64cb203f030ba83659ae448
4
+ data.tar.gz: 4973b4425fac4133d09a37743f38638af91d63ac3a720555846ca286b0358635
5
5
  SHA512:
6
- metadata.gz: 00b7e5e785ad232a9e119eb3ad5911b540354cf83b50c69a25e16f928fee3f87819ae9b433be0a5d9ac6027d5e7a1e048dc1b0cd2db0362bf28b59e4e756fe30
7
- data.tar.gz: 23c75179a18b0f6eb118e581e056deb65fd85c3d78f4316ba57d939f3a92452d62d3770a98c40a2b16efcaf52f49eb55647c443f672c1c9caf1c056184ce205e
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: string,
35
+ margin?: string,
34
36
  marginBottom: string,
37
+ marginTop: string,
35
38
  multiple?: boolean,
36
39
  name?: string,
37
- onChange: InputCallback<HTMLSelectElement>,
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 = () => undefined,
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, ref: React.LegacyRef<HTMLSelectElement>) => {
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 angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
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
+
@@ -30,6 +30,7 @@ examples:
30
30
  - select_inline_show_arrow: Select Inline (Always Show Arrow)
31
31
  - select_inline_compact: Select Inline Compact
32
32
  - select_multiple: Select Multiple
33
+ - select_form: Form
33
34
 
34
35
  swift:
35
36
  - select_default_swift: Default
@@ -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
- private stickyLeftColumns: string[] = [];
5
- private handleStickyColumnsRef: () => void;
6
-
7
- static get selector(): string {
8
- return '.table-responsive-collapse'
9
- }
10
-
11
- connect(): void {
12
- const tables = document.querySelectorAll('.table-responsive-collapse');
13
- // Each Table
14
- [].forEach.call(tables, (table: HTMLTableElement) => {
15
- // Header Titles
16
- const headers: string[] = [];
17
- [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
18
- const colSpan = header.colSpan
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
- this.stickyLeftColumns.forEach((colId, index) => {
66
- const isLastColumn = index === this.stickyLeftColumns.length - 1;
67
- const header = document.querySelector(`th[id="${colId}"]`);
68
- const cells = document.querySelectorAll(`td[id="${colId}"]`);
69
-
70
- if (header) {
71
- header.classList.add('sticky');
72
- (header as HTMLElement).style.left = `${accumulatedWidth}px`;
73
-
74
- if (!isLastColumn) {
75
- header.classList.add('with-border');
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
+ }
@@ -18,4 +18,4 @@
18
18
  <%= content.presence %>
19
19
  <% end %>
20
20
  <% end %>
21
- <% end %>
21
+ <% end %>
@@ -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, sticky_left_column_class,
43
- collapse_class, vertical_border_class, striped_class, outer_padding_class,
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-CVPInSs5.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:{}};
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