feat(design): add component Segmented (#1618)

packages/design/package.json

@@ -79,6 +79,7 @@
         "rc-input-number": "^9.0.0",
         "rc-menu": "^9.13.0",
         "rc-picker": "^4.3.0",
+        "rc-segmented": "^2.3.0",
         "rc-select": "^14.13.0",
         "rc-tooltip": "^6.2.0",
         "rc-util": "^5.39.1",

packages/design/src/components/segmented/Segmented.stories.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { Segmented } from './Segmented';
+
+const meta: Meta<typeof Segmented> = {
+    title: 'Components / Segmented',
+    component: Segmented,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const SegmentedBasic = {
+    render() {
+        return (
+            <div style={{ width: 280 }}>
+                <Segmented options={[
+                    { label: 'By Values', value: 'Values' },
+                    { label: 'By Conditions', value: 'Conditions' },
+                ]}
+                />
+            </div>
+        );
+    },
+};

packages/design/src/components/segmented/Segmented.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { forwardRef } from 'react';
+import type { SegmentedProps } from 'rc-segmented';
+import RcSegmented from 'rc-segmented';
+
+import styles from './index.module.less';
+
+export interface ISegmentedProps extends Omit<SegmentedProps, 'prefixCls'> {}
+
+export const Segmented = forwardRef<HTMLDivElement | null, ISegmentedProps>(function InnerSegmented(props, ref) {
+    return <RcSegmented prefixCls={styles.segmented} {...props} ref={ref} />;
+});

packages/design/src/components/segmented/index.module.less

@@ -0,0 +1,114 @@
+@segmented-prefix-cls: segmented;
+
+.segmented-disabled-item() {
+    &,
+    &:hover,
+    &:focus {
+        color: fade(#000, 25%);
+        cursor: not-allowed;
+    }
+}
+
+.segmented-item-selected() {
+    background-color: white;
+    box-shadow: 0px 4px 16px 0px rgba(var(--color-black), 0.08);
+}
+
+.@{segmented-prefix-cls} {
+    display: inline-flex;
+    padding: 2px;
+    height: 32px;
+    width: 100%;
+    border-radius: 6px;
+    background-color: rgb(var(--grey-50));
+
+    &-group {
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        justify-items: flex-start;
+
+        width: 100%;
+        border-radius: 2px;
+    }
+
+    &-item {
+        position: relative;
+        min-height: 28px;
+        padding: 4px 10px;
+        border-radius: 4px;
+        height: 100%;
+        flex: 1;
+        flex-grow: 1;
+        flex-shrink: 1;
+        box-sizing: border-box;
+
+        color: rgba(var(--color-black));
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        font-size: 13px;
+
+        &-selected {
+            .segmented-item-selected();
+            color: rgba(var(--color-black));
+        }
+
+        &:hover,
+        &:focus {
+            color: rgba(var(--color-black));
+        }
+
+        &-disabled {
+            .segmented-disabled-item();
+        }
+
+        &-label {
+            z-index: 2;
+            line-height: 24px;
+        }
+
+        &-input {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            width: 0;
+            height: 0;
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    // disabled styles
+    &-disabled &-item,
+    &-disabled &-item:hover,
+    &-disabled &-item:focus {
+        .segmented-disabled-item();
+    }
+
+    &-thumb {
+        .segmented-item-selected();
+
+        position: absolute;
+        box-sizing: border-box;
+        width: 0;
+        height: 100%;
+        border-radius: 4px;
+        padding: 4px 0;
+    }
+
+    // transition effect when `enter-active`
+    &-thumb-motion-appear-active,
+    &-thumb-motion-enter-active {
+        transition:
+            transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+            width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        will-change: transform, width;
+    }
+
+    &-rtl {
+        direction: rtl;
+    }
+}

packages/design/src/components/segmented/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Segmented, type ISegmentedProps } from './Segmented';