@box/metadata-template-editor 2.3.1 → 2.3.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import{useFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";import dropdown_messages_default from"../esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js";import{IconButton,TextInput}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{DragDots}from"@box/blueprint-web-assets/icons/Fill";import{useCallback,useEffect,useRef,useState}from"react";import clsx from"clsx";import{Trash}from"@box/blueprint-web-assets/icons/Line";import uniqueId from"lodash/uniqueId";import{DndContext,DragOverlay,KeyboardSensor,PointerSensor,TouchSensor,closestCenter,useSensor,useSensors}from"@dnd-kit/core";import{SortableContext,arrayMove,sortableKeyboardCoordinates,useSortable,verticalListSortingStrategy}from"@dnd-kit/sortable";import{CSS}from"@dnd-kit/utilities";import '../styles/sortable-option-list.css';var sortable_option_list_module_default={sortableOptionList:`_sortableOptionList_dhce1_1`,option:`_option_dhce1_9`,editable:`_editable_dhce1_9`,dragging:`_dragging_dhce1_22`,dragHandle:`_dragHandle_dhce1_26`,input:`_input_dhce1_41`,deleteButtonContainer:`_deleteButtonContainer_dhce1_47`,optionDragOverlay:`_optionDragOverlay_dhce1_53`};function getOptionError(errors,touched,index,option,allOptions,lastChangedOptionId){let err=touched?.dropdown?.options?.[index]&&typeof errors==`object`&&!!errors&&typeof errors.dropdown==`object`&&errors.dropdown?.options?.[index]?.key;if(typeof err!=`string`)return``;if(lastChangedOptionId!==null&&option.id!==lastChangedOptionId){let lastChangedKey=allOptions.find(opt=>opt.id===lastChangedOptionId)?.key;if(lastChangedKey&&option.key===lastChangedKey&&allOptions.some((opt,i)=>i!==index&&opt.key===lastChangedKey))return``}return err}function SortableOptionItem({option,index,isFieldReadOnly,onInputChange,onDelete,onInputRef,error,handleBlur,canDelete,dragAriaLabel,inputPlaceholder,deleteAriaLabel}){let{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id:option.id});return jsxs(`li`,{ref:setNodeRef,style:{transform:CSS.Translate.toString(transform),transition},className:clsx(sortable_option_list_module_default.option,{[sortable_option_list_module_default.dragging]:isDragging,[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,...listeners,...attributes,"aria-label":dragAriaLabel,tabIndex:-1,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:inputPlaceholder,label:inputPlaceholder,hideLabel:!0,onBlur:handleBlur,id:`dropdown.options.${index}.key`,name:`dropdown.options.${index}.key`,value:option.key,className:sortable_option_list_module_default.input,onChange:e=>onInputChange(e,option.id),ref:el=>onInputRef(el,index),error}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{onClick:()=>onDelete(option),"aria-label":deleteAriaLabel,icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:!canDelete
|
|
1
|
+
import ConfirmationModal from"../esm/lib/components/metadata-field-configurator/components/confirmation-modal/confirmation-modal.js";import{useFieldConfigurator}from"../esm/lib/components/metadata-field-configurator/context/field-configurator-context.js";import dropdown_messages_default from"../esm/lib/components/metadata-field-configurator/messages/dropdown-messages.js";import{IconButton,TextInput}from"@box/blueprint-web";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{DragDots}from"@box/blueprint-web-assets/icons/Fill";import{useCallback,useEffect,useRef,useState}from"react";import clsx from"clsx";import{Trash}from"@box/blueprint-web-assets/icons/Line";import uniqueId from"lodash/uniqueId";import{DndContext,DragOverlay,KeyboardSensor,PointerSensor,TouchSensor,closestCenter,useSensor,useSensors}from"@dnd-kit/core";import{SortableContext,arrayMove,sortableKeyboardCoordinates,useSortable,verticalListSortingStrategy}from"@dnd-kit/sortable";import{CSS}from"@dnd-kit/utilities";import '../styles/sortable-option-list.css';var sortable_option_list_module_default={sortableOptionList:`_sortableOptionList_dhce1_1`,option:`_option_dhce1_9`,editable:`_editable_dhce1_9`,dragging:`_dragging_dhce1_22`,dragHandle:`_dragHandle_dhce1_26`,input:`_input_dhce1_41`,deleteButtonContainer:`_deleteButtonContainer_dhce1_47`,optionDragOverlay:`_optionDragOverlay_dhce1_53`};function getOptionError(errors,touched,index,option,allOptions,lastChangedOptionId){let err=touched?.dropdown?.options?.[index]&&typeof errors==`object`&&!!errors&&typeof errors.dropdown==`object`&&errors.dropdown?.options?.[index]?.key;if(typeof err!=`string`)return``;if(lastChangedOptionId!==null&&option.id!==lastChangedOptionId){let lastChangedKey=allOptions.find(opt=>opt.id===lastChangedOptionId)?.key;if(lastChangedKey&&option.key===lastChangedKey&&allOptions.some((opt,i)=>i!==index&&opt.key===lastChangedKey))return``}return err}function SortableOptionItem({option,index,isFieldReadOnly,onInputChange,onDelete,onInputRef,error,handleBlur,canDelete,dragAriaLabel,inputPlaceholder,deleteAriaLabel}){let{attributes,listeners,setNodeRef,transform,transition,isDragging}=useSortable({id:option.id});return jsxs(`li`,{ref:setNodeRef,style:{transform:CSS.Translate.toString(transform),transition},className:clsx(sortable_option_list_module_default.option,{[sortable_option_list_module_default.dragging]:isDragging,[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,...listeners,...attributes,"aria-label":dragAriaLabel,tabIndex:-1,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:inputPlaceholder,label:inputPlaceholder,hideLabel:!0,onBlur:handleBlur,id:`dropdown.options.${index}.key`,name:`dropdown.options.${index}.key`,value:option.key,className:sortable_option_list_module_default.input,onChange:e=>onInputChange(e,option.id),ref:el=>onInputRef(el,index),error}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{onClick:()=>onDelete(option),"aria-label":deleteAriaLabel,icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:!canDelete})})]})}function SortableOptionList({shouldFocusLastOption=!1,onFocusConsumed}){let{formatMessage}=useIntl(),{values,errors,touched,setFieldValue,setFieldTouched,setTouched,handleBlur}=useFieldConfigurator(),sensors=useSensors(useSensor(PointerSensor,{activationConstraint:{distance:8}}),useSensor(TouchSensor,{activationConstraint:{delay:250,tolerance:5}}),useSensor(KeyboardSensor,{coordinateGetter:sortableKeyboardCoordinates})),{options}=values.dropdown,{isFieldReadOnly}=values,[currentItems,setCurrentItems]=useState(options),[lastChangedOptionId,setLastChangedOptionId]=useState(null),focusTimeoutRef=useRef(null),[activeId,setActiveId]=useState(null),[isConfirmationModalOpen,setIsConfirmationModalOpen]=useState(!1),[optionToDelete,setOptionToDelete]=useState(null);useEffect(()=>{setCurrentItems(options)},[options]),useEffect(()=>()=>{focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current)},[]);let updateFormValue=useCallback(newItems=>{setFieldValue(`dropdown`,{...values.dropdown,options:newItems})},[values.dropdown,setFieldValue]),handleInputChange=(event,optionId)=>{setLastChangedOptionId(optionId);let updatedItems=currentItems.map((option,index)=>option.id===optionId?(setFieldTouched(`dropdown.options.${index}.key`,!0),{...option,key:event.target.value}):option);setCurrentItems(updatedItems),updateFormValue(updatedItems)},closeConfirmationModal=()=>{setOptionToDelete(null),setIsConfirmationModalOpen(!1)},handleDelete=optionId=>{if(!optionId)return;let updatedItems=currentItems.filter(option=>option.id!==optionId);setCurrentItems(updatedItems),updateFormValue(updatedItems),optionId===lastChangedOptionId&&setLastChangedOptionId(null);let updatedTouched={...touched},dropdownTouched=updatedTouched.dropdown;dropdownTouched?.options&&(dropdownTouched.options=dropdownTouched.options.filter((_,index)=>currentItems[index]?.id!==optionId)),setTouched(updatedTouched),updatedItems.length===0&&setFieldValue(`dropdown`,{...values.dropdown,options:[{id:uniqueId(),key:``,isNew:!0}]}),closeConfirmationModal()},openConfirmationModal=option=>{option.isNew?handleDelete(option.id):(setOptionToDelete(option),setIsConfirmationModalOpen(!0))},handleDragStart=({active})=>{setActiveId(String(active.id))},handleDragCancel=()=>{setActiveId(null)},handleDragEnd=event=>{setActiveId(null);let{active,over}=event;if(over&&active.id!==over.id){let oldIndex=currentItems.findIndex(item=>item.id===active.id),newIndex=currentItems.findIndex(item=>item.id===over.id);if(oldIndex!==-1&&newIndex!==-1){let newItems=arrayMove(currentItems,oldIndex,newIndex);setCurrentItems(newItems),updateFormValue(newItems);let touchedOptions=touched?.dropdown?.options;touchedOptions&&touchedOptions.length>0&&setTouched({...touched,dropdown:{...touched.dropdown??{},options:arrayMove(touchedOptions,oldIndex,newIndex)}})}}},handleInputRef=useCallback((inputElement,index)=>{inputElement&&shouldFocusLastOption&&index===currentItems.length-1&&(focusTimeoutRef.current&&clearTimeout(focusTimeoutRef.current),focusTimeoutRef.current=setTimeout(()=>{inputElement.focus(),onFocusConsumed(),focusTimeoutRef.current=null},0))},[shouldFocusLastOption,onFocusConsumed,currentItems.length]),activeOption=activeId?currentItems.find(item=>item.id===activeId):null;return jsxs(Fragment,{children:[jsxs(DndContext,{sensors,collisionDetection:closestCenter,onDragStart:handleDragStart,onDragEnd:handleDragEnd,onDragCancel:handleDragCancel,children:[jsx(SortableContext,{items:currentItems.map(item=>item.id),strategy:verticalListSortingStrategy,children:jsx(`ul`,{className:sortable_option_list_module_default.sortableOptionList,children:currentItems.map((option,index)=>jsx(SortableOptionItem,{option,index,isFieldReadOnly:!!isFieldReadOnly,onInputChange:handleInputChange,onDelete:openConfirmationModal,onInputRef:handleInputRef,error:getOptionError(errors,touched,index,option,currentItems,lastChangedOptionId),handleBlur,canDelete:currentItems.length>=2,dragAriaLabel:formatMessage(dropdown_messages_default.dragAndDropOptionAriaLabel),inputPlaceholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),deleteAriaLabel:formatMessage(dropdown_messages_default.deleteDropdownOptionAriaLabel)},option.id))})}),jsx(DragOverlay,{dropAnimation:null,children:activeOption?jsxs(`li`,{className:clsx(sortable_option_list_module_default.option,sortable_option_list_module_default.optionDragOverlay,{[sortable_option_list_module_default.editable]:!isFieldReadOnly}),children:[!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.dragHandle,children:jsx(DragDots,{fontSize:20,"aria-hidden":`true`})}),jsx(TextInput,{disabled:isFieldReadOnly,placeholder:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),label:formatMessage(dropdown_messages_default.addAnOptionOptionPlaceholder),hideLabel:!0,id:`drag-overlay-option`,name:`drag-overlay-option`,value:activeOption.key,className:sortable_option_list_module_default.input}),!isFieldReadOnly&&jsx(`div`,{className:sortable_option_list_module_default.deleteButtonContainer,children:jsx(IconButton,{icon:Trash,size:`x-small`,variant:`default`,tabIndex:-1,focusable:!0,disabled:currentItems.length<2,"aria-label":``})})]}):null})]}),isConfirmationModalOpen&&jsx(ConfirmationModal,{onClose:closeConfirmationModal,onConfirm:()=>handleDelete(optionToDelete?.id??null),title:formatMessage(dropdown_messages_default.deleteOptionTitle,{optionName:optionToDelete?.key??``}),body:formatMessage(dropdown_messages_default.deleteOptionDescription)})]})}export{SortableOptionList as t};
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/metadata-template-editor",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.2",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@box/blueprint-web": "^16.14.
|
|
7
|
-
"@box/blueprint-web-assets": "^5.6.
|
|
6
|
+
"@box/blueprint-web": "^16.14.2",
|
|
7
|
+
"@box/blueprint-web-assets": "^5.6.2",
|
|
8
8
|
"@dnd-kit/core": "^6.1.0",
|
|
9
9
|
"@dnd-kit/sortable": "^8.0.0",
|
|
10
10
|
"@dnd-kit/utilities": "^3.2.2",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
"yup": "^1.6.1"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@box/blueprint-web": "^16.14.
|
|
21
|
-
"@box/blueprint-web-assets": "^5.6.
|
|
20
|
+
"@box/blueprint-web": "^16.14.2",
|
|
21
|
+
"@box/blueprint-web-assets": "^5.6.2",
|
|
22
22
|
"@box/eslint-plugin-blueprint": "2.2.0",
|
|
23
|
-
"@box/storybook-utils": "1.2.
|
|
23
|
+
"@box/storybook-utils": "1.2.2",
|
|
24
24
|
"@dnd-kit/core": "^6.1.0",
|
|
25
25
|
"@dnd-kit/sortable": "^8.0.0",
|
|
26
26
|
"@dnd-kit/utilities": "^3.2.2",
|