import _extends from "@babel/runtime/helpers/esm/extends"; import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; import _typeof from "@babel/runtime/helpers/esm/typeof"; var _excluded = ["prefixCls", "direction", "options", "disabled", "defaultValue", "value", "onChange", "className", "motionName"]; import * as React from 'react'; import classNames from 'classnames'; import useMergedState from "rc-util/es/hooks/useMergedState"; import { composeRef } from "rc-util/es/ref"; import omit from "rc-util/es/omit"; import MotionThumb from "./MotionThumb"; function getValidTitle(option) { if (typeof option.title !== 'undefined') { return option.title; } // read `label` when title is `undefined` if (_typeof(option.label) !== 'object') { var _option$label; return (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toString(); } } function normalizeOptions(options) { return options.map(function (option) { if (_typeof(option) === 'object' && option !== null) { var validTitle = getValidTitle(option); return _objectSpread(_objectSpread({}, option), {}, { title: validTitle }); } return { label: option === null || option === void 0 ? void 0 : option.toString(), title: option === null || option === void 0 ? void 0 : option.toString(), value: option }; }); } var InternalSegmentedOption = function InternalSegmentedOption(_ref) { var prefixCls = _ref.prefixCls, className = _ref.className, disabled = _ref.disabled, checked = _ref.checked, label = _ref.label, title = _ref.title, value = _ref.value, onChange = _ref.onChange; var handleChange = function handleChange(event) { if (disabled) { return; } onChange(event, value); }; return /*#__PURE__*/React.createElement("label", { className: classNames(className, _defineProperty({}, "".concat(prefixCls, "-item-disabled"), disabled)) }, /*#__PURE__*/React.createElement("input", { className: "".concat(prefixCls, "-item-input"), type: "radio", disabled: disabled, checked: checked, onChange: handleChange }), /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-item-label"), title: title }, label)); }; var Segmented = /*#__PURE__*/React.forwardRef(function (props, ref) { var _segmentedOptions$, _classNames2; var _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? 'rc-segmented' : _props$prefixCls, direction = props.direction, _props$options = props.options, options = _props$options === void 0 ? [] : _props$options, disabled = props.disabled, defaultValue = props.defaultValue, value = props.value, onChange = props.onChange, _props$className = props.className, className = _props$className === void 0 ? '' : _props$className, _props$motionName = props.motionName, motionName = _props$motionName === void 0 ? 'thumb-motion' : _props$motionName, restProps = _objectWithoutProperties(props, _excluded); var containerRef = React.useRef(null); var mergedRef = React.useMemo(function () { return composeRef(containerRef, ref); }, [containerRef, ref]); var segmentedOptions = React.useMemo(function () { return normalizeOptions(options); }, [options]); // Note: We should not auto switch value when value not exist in options // which may break single source of truth. var _useMergedState = useMergedState((_segmentedOptions$ = segmentedOptions[0]) === null || _segmentedOptions$ === void 0 ? void 0 : _segmentedOptions$.value, { value: value, defaultValue: defaultValue }), _useMergedState2 = _slicedToArray(_useMergedState, 2), rawValue = _useMergedState2[0], setRawValue = _useMergedState2[1]; // ======================= Change ======================== var _React$useState = React.useState(false), _React$useState2 = _slicedToArray(_React$useState, 2), thumbShow = _React$useState2[0], setThumbShow = _React$useState2[1]; var handleChange = function handleChange(event, val) { if (disabled) { return; } setRawValue(val); onChange === null || onChange === void 0 || onChange(val); }; var divProps = omit(restProps, ['children']); return /*#__PURE__*/React.createElement("div", _extends({}, divProps, { className: classNames(prefixCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), className), ref: mergedRef }), /*#__PURE__*/React.createElement("div", { className: "".concat(prefixCls, "-group") }, /*#__PURE__*/React.createElement(MotionThumb, { prefixCls: prefixCls, value: rawValue, containerRef: containerRef, motionName: "".concat(prefixCls, "-").concat(motionName), direction: direction, getValueIndex: function getValueIndex(val) { return segmentedOptions.findIndex(function (n) { return n.value === val; }); }, onMotionStart: function onMotionStart() { setThumbShow(true); }, onMotionEnd: function onMotionEnd() { setThumbShow(false); } }), segmentedOptions.map(function (segmentedOption) { return /*#__PURE__*/React.createElement(InternalSegmentedOption, _extends({}, segmentedOption, { key: segmentedOption.value, prefixCls: prefixCls, className: classNames(segmentedOption.className, "".concat(prefixCls, "-item"), _defineProperty({}, "".concat(prefixCls, "-item-selected"), segmentedOption.value === rawValue && !thumbShow)), checked: segmentedOption.value === rawValue, onChange: handleChange, disabled: !!disabled || !!segmentedOption.disabled })); }))); }); if (process.env.NODE_ENV !== 'production') { Segmented.displayName = 'Segmented'; } var TypedSegmented = Segmented; export default TypedSegmented;