feat: use input for onChange

Author: 伊北

assets/index.less

@@ -27,13 +27,14 @@
  border-radius: 2px;
 
  &-item {
- position: relative;
  // box-sizing: border-box;
+ position: relative;
  display: inline-block;
  height: 28px;
  padding: 4px 10px;
  color: fade(#000, 85%);
  line-height: 28px;
+ text-align: center;
 
  cursor: pointer;
 
@@ -54,6 +55,17 @@
  &-label {
  z-index: 2;
  }
+
+ &-input {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ width: 0;
+ height: 0;
+ opacity: 0;
+ pointer-events: none;
+ }
  }
 
  // disabled styles

docs/examples/simple.tsx

@@ -6,10 +6,16 @@ export default function App() {
  return (
  <div>
  <div className="wrapper">
- <Segmented options={['iOS', 'Android', 'Web']} />
+ <Segmented
+ options={['iOS', 'Android', 'Web']}
+ onChange={(e) => console.log(e.target.value, typeof e.target.value)}
+ />
  </div>
  <div className="wrapper">
- <Segmented options={['13333333333', '057110000', '02110086']} />
+ <Segmented
+ options={[13333333333, 157110000, 12110086]}
+ onChange={(e) => console.log(e.target.value, typeof e.target.value)}
+ />
  </div>
  <div className="wrapper">
  <Segmented options={['iOS', 'Android', 'Web']} disabled />

src/index.tsx

@@ -18,9 +18,15 @@ type Option = RawOption | LabeledOption;
 
 type Options = Option[];
 
+type ExtendedHTMLInputElement = Omit<HTMLInputElement, 'value'> & {
+ value: RawOption;
+};
+
 export interface SegmentedProps extends React.HTMLProps<HTMLDivElement> {
  options: Options;
  defaultValue?: RawOption;
+ value?: RawOption;
+ onChange?: (e: React.ChangeEvent<ExtendedHTMLInputElement>) => void;
  disabled?: boolean;
  prefixCls?: string;
  direction?: 'ltr' | 'rtl';
@@ -61,7 +67,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
  direction,
  options,
  disabled,
- onClick,
+ onChange,
  prefixCls: customizePrefixCls,
  className = '',
  ...restProps
@@ -97,30 +103,8 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
  className,
  );
 
- const handleItemClick = React.useCallback(
- (
- segmentedOption: LabeledOption,
- event: React.MouseEvent<HTMLDivElement>,
- ) => {
- if (disabled || segmentedOption.disabled) {
- return;
- }
-
- if (segmentedOption.value !== selected) {
- calcThumbMoveStyle(event);
- }
-
- setSelected(segmentedOption.value);
-
- onClick?.(event);
- },
- [selected],
- );
-
- const calcThumbMoveStyle = (event: React.MouseEvent<HTMLDivElement>) => {
- const toElement = (event.target as HTMLElement).closest(
- `.${prefixCls}-item`,
- );
+ const calcThumbMoveStyle = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const toElement = event.target.closest(`.${prefixCls}-item`);
 
  const fromElement = containerRef.current?.querySelector(
  `.${prefixCls}-item-selected`,
@@ -136,6 +120,37 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
  }
  };
 
+ const handleChange = React.useCallback(
+ (
+ event: React.ChangeEvent<HTMLInputElement>,
+ segmentedOption: LabeledOption,
+ ) => {
+ if (disabled || segmentedOption.disabled) {
+ return;
+ }
+
+ if (segmentedOption.value !== selected) {
+ calcThumbMoveStyle(event);
+ }
+
+ setSelected(segmentedOption.value);
+ if (onChange) {
+ const mutationTarget = Object.create(event.target, {
+ value: {
+ value: segmentedOption.value,
+ },
+ });
+ const mutatedEvent = Object.create(event, {
+ target: {
+ value: mutationTarget,
+ },
+ });
+ onChange(mutatedEvent);
+ }
+ },
+ [selected, disabled],
+ );
+
  // --- motion event handlers for thumb move
  const handleThumbEnterStart = () => {
  const fromStyle = thumbMoveStyles.current.from;
@@ -179,26 +194,31 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
  {({ className: motionClassName, style: motionStyle }) => {
  return (
  <div
- className={classNames(`${prefixCls}-thumb`, motionClassName)}
  style={motionStyle}
+ className={classNames(`${prefixCls}-thumb`, motionClassName)}
  />
  );
  }}
  </CSSMotion>
  {segmentedOptions.map((segmentedOption) => (
- <div
+ <label
  key={segmentedOption.value}
  className={classNames(`${prefixCls}-item`, {
  [`${prefixCls}-item-selected`]:
  segmentedOption.value === visualSelected,
  [`${prefixCls}-item-disabled`]: !!segmentedOption.disabled,
  })}
- onClick={(e) => handleItemClick(segmentedOption, e)}
  >
+ <input
+ className={`${prefixCls}-item-input`}
+ type="radio"
+ checked={segmentedOption.value === selected}
+ onChange={(e) => handleChange(e, segmentedOption)}
+ />
  <span className={`${prefixCls}-item-label`}>
  {segmentedOption.label}
  </span>
- </div>
+ </label>
  ))}
  </div>
  );