@wordpress/components
Version:
UI components for WordPress.
109 lines (105 loc) • 3.32 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Option = Option;
var _clsx = _interopRequireDefault(require("clsx"));
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _circularOptionPickerContext = require("./circular-option-picker-context");
var _button = _interopRequireDefault(require("../button"));
var _composite = require("../composite");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function UnforwardedOptionAsButton(props, forwardedRef) {
const {
isPressed,
label,
...additionalProps
} = props;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
...additionalProps,
"aria-pressed": isPressed,
ref: forwardedRef,
label: label
});
}
const OptionAsButton = (0, _element.forwardRef)(UnforwardedOptionAsButton);
function UnforwardedOptionAsOption(props, forwardedRef) {
const {
id,
isSelected,
label,
...additionalProps
} = props;
const {
setActiveId,
activeId
} = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
(0, _element.useEffect)(() => {
if (isSelected && !activeId) {
// The setTimeout call is necessary to make sure that this update
// doesn't get overridden by `Composite`'s internal logic, which picks
// an initial active item if one is not specifically set.
window.setTimeout(() => setActiveId?.(id), 0);
}
}, [isSelected, setActiveId, activeId, id]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Item, {
render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
...additionalProps,
role: "option",
"aria-selected": !!isSelected,
ref: forwardedRef,
label: label
}),
id: id
});
}
const OptionAsOption = (0, _element.forwardRef)(UnforwardedOptionAsOption);
function Option({
className,
isSelected,
selectedIconProps = {},
tooltipText,
...additionalProps
}) {
const {
baseId,
setActiveId
} = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
const id = (0, _compose.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
const commonProps = {
id,
className: 'components-circular-option-picker__option',
__next40pxDefaultSize: true,
...additionalProps
};
const isListbox = setActiveId !== undefined;
const optionControl = isListbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
...commonProps,
label: tooltipText,
isSelected: isSelected
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsButton, {
...commonProps,
label: tooltipText,
isPressed: isSelected
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _clsx.default)(className, 'components-circular-option-picker__option-wrapper'),
children: [optionControl, isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
icon: _icons.check,
...selectedIconProps
})]
});
}
//# sourceMappingURL=circular-option-picker-option.js.map