@fluentui/react-northstar
Version:
A themable React component library.
198 lines (195 loc) • 8.47 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.radioGroupClassName = exports.RadioGroup = void 0;
var _map2 = _interopRequireDefault(require("lodash/map"));
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var _findIndex2 = _interopRequireDefault(require("lodash/findIndex"));
var _accessibility = require("@fluentui/accessibility");
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
var _RadioGroupItem = require("./RadioGroupItem");
var _reactBindings = require("@fluentui/react-bindings");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// TODO:
// vertical - padding variable?
var radioGroupClassName = 'ui-radiogroup';
exports.radioGroupClassName = radioGroupClassName;
/**
* A RadioGroup allows user to select a value from a small set of mutually exclusive options.
*
* @accessibility
* Implements [ARIA Radio Group](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton) design pattern.
* @accessibilityIssues
* [JAWS narrates instruction message on each radio in radiogroup](https://github.com/FreedomScientific/VFO-standards-support/issues/473)
*/
var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.useTelemetry)(RadioGroup.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var children = props.children,
vertical = props.vertical,
items = props.items,
className = props.className,
design = props.design,
styles = props.styles,
variables = props.variables;
var ElementType = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(RadioGroup.handledProps, props);
var getA11yProps = (0, _reactBindings.useAccessibility)(props.accessibility, {
debugName: RadioGroup.displayName,
actionHandlers: {
nextItem: function nextItem(event) {
return setCheckedItem(event, 1);
},
prevItem: function prevItem(event) {
return setCheckedItem(event, -1);
}
},
rtl: context.rtl
});
var _useStyles = (0, _reactBindings.useStyles)(RadioGroup.displayName, {
className: radioGroupClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
vertical: vertical
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes;
var _useAutoControlled = (0, _reactBindings.useAutoControlled)({
defaultValue: props.defaultCheckedValue,
value: props.checkedValue,
initialValue: undefined
}),
checkedValue = _useAutoControlled[0],
setCheckedValue = _useAutoControlled[1];
var _React$useState = React.useState(false),
shouldFocus = _React$useState[0],
setShouldFocus = _React$useState[1];
var getItemProps = function getItemProps(item) {
return item.props || item;
};
var setCheckedItem = function setCheckedItem(event, direction) {
var nextItem = findNextEnabledCheckedItem(direction);
if (nextItem) {
checkedValueChange({
nextCheckedValue: nextItem.value,
shouldFocus: true,
event: event,
itemProps: nextItem
});
}
event.preventDefault();
};
var findNextEnabledCheckedItem = function findNextEnabledCheckedItem(direction) {
if (!props.items || !props.items.length) {
return undefined;
}
var currentIndex =
// if none of the values selected, set current index to the first item
checkedValue !== undefined ? (0, _findIndex2.default)(props.items, function (item) {
return getItemProps(item).value === checkedValue;
}) : 0;
for (var newIndex = currentIndex + direction; newIndex !== currentIndex; newIndex += direction) {
if (newIndex < 0) {
newIndex = props.items.length - 1;
} else if (newIndex >= props.items.length) {
newIndex = 0;
}
if (newIndex === currentIndex) {
return undefined;
}
var itemProps = getItemProps(props.items[newIndex]);
if (!itemProps.disabled) {
return itemProps;
}
}
return undefined;
};
var handleItemOverrides = function handleItemOverrides(predefinedProps) {
return {
checked: typeof checkedValue !== 'undefined' && checkedValue === predefinedProps.value,
onClick: function onClick(event, itemProps) {
var value = itemProps.value,
disabled = itemProps.disabled;
if (!disabled && value !== checkedValue) {
checkedValueChange({
nextCheckedValue: value,
shouldFocus: false,
event: event,
itemProps: itemProps
});
}
(0, _invoke2.default)(predefinedProps, 'onClick', event, itemProps);
},
shouldFocus: shouldFocus
};
};
var renderItems = function renderItems(vertical) {
var isNoneValueSelected = checkedValue === undefined;
return (0, _map2.default)(items, function (item, index) {
return _RadioGroupItem.RadioGroupItem.create(item, {
defaultProps: function defaultProps() {
return getA11yProps('item', Object.assign({
vertical: vertical
}, index === 0 && isNoneValueSelected && {
tabIndex: 0
}));
},
overrideProps: handleItemOverrides
});
});
};
var checkedValueChange = function checkedValueChange(_ref) {
var nextCheckedValue = _ref.nextCheckedValue,
shouldFocus = _ref.shouldFocus,
event = _ref.event,
itemProps = _ref.itemProps;
setCheckedValue(nextCheckedValue);
setShouldFocus(shouldFocus);
(0, _invoke2.default)(props, 'onCheckedValueChange', event, itemProps);
};
var element = getA11yProps.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: classes.root,
ref: ref
}, unhandledProps, _utils.rtlTextContainer.getAttributes({
forElements: [children]
}))), (0, _utils.childrenExist)(children) ? children : renderItems(vertical)));
setEnd();
return element;
});
exports.RadioGroup = RadioGroup;
RadioGroup.displayName = 'RadioGroup';
RadioGroup.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
content: false
}), {
checkedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
defaultCheckedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
items: customPropTypes.collectionShorthand,
onCheckedValueChange: PropTypes.func,
vertical: PropTypes.bool
});
RadioGroup.defaultProps = {
accessibility: _accessibility.radioGroupBehavior
};
RadioGroup.handledProps = Object.keys(RadioGroup.propTypes);
RadioGroup.Item = _RadioGroupItem.RadioGroupItem;
RadioGroup.create = (0, _utils.createShorthandFactory)({
Component: RadioGroup
});
//# sourceMappingURL=RadioGroup.js.map