138 lines
4.5 KiB
JavaScript
138 lines
4.5 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
useToolbarArrowNavigationProps_unstable: function() {
|
|
return useToolbarArrowNavigationProps_unstable;
|
|
},
|
|
useToolbarBase_unstable: function() {
|
|
return useToolbarBase_unstable;
|
|
},
|
|
useToolbar_unstable: function() {
|
|
return useToolbar_unstable;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
const useToolbar_unstable = (props, ref)=>{
|
|
const { size = 'medium' } = props;
|
|
const state = useToolbarBase_unstable(props, ref);
|
|
const arrowNavigationProps = useToolbarArrowNavigationProps_unstable();
|
|
return {
|
|
size,
|
|
...state,
|
|
root: {
|
|
...state.root,
|
|
...arrowNavigationProps
|
|
}
|
|
};
|
|
};
|
|
const useToolbarBase_unstable = (props, ref)=>{
|
|
const { vertical = false } = props;
|
|
const initialState = {
|
|
vertical,
|
|
// TODO add appropriate props/defaults
|
|
components: {
|
|
// TODO add each slot's element type or component
|
|
root: 'div'
|
|
},
|
|
// TODO add appropriate slots, for example:
|
|
// mySlot: resolveShorthand(props.mySlot),
|
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
role: 'toolbar',
|
|
ref: ref,
|
|
...vertical && {
|
|
'aria-orientation': 'vertical'
|
|
},
|
|
...props
|
|
}), {
|
|
elementType: 'div'
|
|
})
|
|
};
|
|
const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
|
|
checkedValues: props.checkedValues,
|
|
defaultCheckedValues: props.defaultCheckedValues,
|
|
onCheckedValueChange: props.onCheckedValueChange
|
|
});
|
|
const handleToggleButton = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
|
|
if (name && value) {
|
|
const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
|
|
const newCheckedItems = [
|
|
...checkedItems
|
|
];
|
|
if (checked) {
|
|
newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
|
|
} else {
|
|
newCheckedItems.push(value);
|
|
}
|
|
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
name,
|
|
checkedItems: newCheckedItems
|
|
});
|
|
}
|
|
});
|
|
const handleRadio = (0, _reactutilities.useEventCallback)((e, name, value, checked)=>{
|
|
if (name && value) {
|
|
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
name,
|
|
checkedItems: [
|
|
value
|
|
]
|
|
});
|
|
}
|
|
});
|
|
return {
|
|
...initialState,
|
|
handleToggleButton,
|
|
handleRadio,
|
|
checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
|
|
};
|
|
};
|
|
/**
|
|
* Adds appropriate state values and handlers for selectable items
|
|
* i.e checkboxes and radios
|
|
*/ const useToolbarSelectableState = (state)=>{
|
|
const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
|
|
state: state.checkedValues,
|
|
defaultState: state.defaultCheckedValues,
|
|
initialState: {}
|
|
});
|
|
const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
|
|
const onCheckedValueChange = (0, _reactutilities.useEventCallback)((e, { name, checkedItems })=>{
|
|
if (onCheckedValueChangeOriginal) {
|
|
onCheckedValueChangeOriginal(e, {
|
|
name,
|
|
checkedItems
|
|
});
|
|
}
|
|
setCheckedValues((s)=>{
|
|
return s ? {
|
|
...s,
|
|
[name]: checkedItems
|
|
} : {
|
|
[name]: checkedItems
|
|
};
|
|
});
|
|
});
|
|
return [
|
|
checkedValues,
|
|
onCheckedValueChange
|
|
];
|
|
};
|
|
const useToolbarArrowNavigationProps_unstable = ()=>{
|
|
return (0, _reacttabster.useArrowNavigationGroup)({
|
|
circular: true,
|
|
axis: 'both'
|
|
});
|
|
};
|