feat: add wrap div (#35)

Author: vagusX

assets/index.less

@@ -14,15 +14,19 @@
 }
 
 .@{segmented-prefix-cls} {
-  position: relative;
+  display: inline-block;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.04);
 
-  display: inline-flex;
-  align-items: stretch;
-  justify-items: flex-start;
+  &-group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    justify-items: flex-start;
 
-  background-color: rgba(0, 0, 0, 0.04);
-  border-radius: 2px;
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
+    width: 100%;
+    border-radius: 2px;
+  }
 
   &-item {
     position: relative;
@@ -49,6 +53,7 @@
 
     &-label {
       z-index: 2;
+      line-height: 24px;
     }
 
     &-input {

src/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import classNames from 'classnames';
-// import CSSMotion from 'rc-motion';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { composeRef } from 'rc-util/lib/ref';
 import omit from 'rc-util/lib/omit';
+
 import MotionThumb from './MotionThumb';
 
 export type SegmentedValue = string | number;
@@ -178,38 +178,41 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
         )}
         ref={mergedRef}
       >
-        <MotionThumb
-          prefixCls={prefixCls}
-          value={rawValue}
-          containerRef={containerRef}
-          motionName={`${prefixCls}-${motionName}`}
-          getValueIndex={(val) =>
-            segmentedOptions.findIndex((n) => n.value === val)
-          }
-          onMotionStart={() => {
-            setThumbShow(true);
-          }}
-          onMotionEnd={() => {
-            setThumbShow(false);
-          }}
-        />
-        {segmentedOptions.map((segmentedOption) => (
-          <InternalSegmentedOption
-            key={segmentedOption.value}
+        <div className={`${prefixCls}-group`}>
+          <MotionThumb
             prefixCls={prefixCls}
-            className={classNames(
-              segmentedOption.className,
-              `${prefixCls}-item`,
-              {
-                [`${prefixCls}-item-selected`]:
-                  segmentedOption.value === rawValue && !thumbShow,
-              },
-            )}
-            checked={segmentedOption.value === rawValue}
-            onChange={handleChange}
-            {...segmentedOption}
+            value={rawValue}
+            containerRef={containerRef}
+            motionName={`${prefixCls}-${motionName}`}
+            getValueIndex={(val) =>
+              segmentedOptions.findIndex((n) => n.value === val)
+            }
+            onMotionStart={() => {
+              setThumbShow(true);
+            }}
+            onMotionEnd={() => {
+              setThumbShow(false);
+            }}
           />
-        ))}
+          {segmentedOptions.map((segmentedOption) => (
+            <InternalSegmentedOption
+              key={segmentedOption.value}
+              prefixCls={prefixCls}
+              className={classNames(
+                segmentedOption.className,
+                `${prefixCls}-item`,
+                {
+                  [`${prefixCls}-item-selected`]:
+                    segmentedOption.value === rawValue && !thumbShow,
+                },
+              )}
+              checked={segmentedOption.value === rawValue}
+              onChange={handleChange}
+              {...segmentedOption}
+              disabled={!!disabled || !!segmentedOption.disabled}
+            />
+          ))}
+        </div>
       </div>
     );
   },