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 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