Merge e7e0bd9 into b91f157

Author: vagusX

.github/workflows/preview.yml

@@ -0,0 +1,20 @@
+name: 🔂 Surge PR Preview
+
+on: [pull_request]
+
+jobs:
+ preview:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: afc163/surge-preview@v1
+ id: preview_step
+ with:
+ surge_token: ${{ secrets.SURGE_TOKEN }}
+ github_token: ${{ secrets.GITHUB_TOKEN }}
+ dist: .doc
+ build: |
+ npm install
+ npm run docs:build
+ - name: Get the preview_url
+ run: echo "url => ${{ steps.preview_step.outputs.preview_url }}"

.gitignore

@@ -34,4 +34,7 @@ coverage/
 .umi
 .umi-production
 .umi-test
-.env.local 
+.env.local
+
+# vscode
+.vscode

.gitpod.yml

@@ -7,8 +7,8 @@ export default defineConfig({
  logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
  outputPath: '.doc',
  exportStatic: {},
- base: '/segmented/',
- publicPath: '/segmented/',
+ base: '/',
+ publicPath: '/',
  hash: true,
  styles: [
  `

.umirc.ts

@@ -1,4 +1,4 @@
-# rc-segmented 🐾
+# rc-segmented
 
 [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![Dependencies][david-image]](david-url) [![DevDependencies][david-dev-image]][david-dev-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
 
@@ -17,9 +17,9 @@
 [bundlephobia-url]: https://bundlephobia.com/result?p=rc-segmented
 [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-segmented
 
-Pretty segmented react component used in [ant.design](https://ant.design) and [antv.vision](https://antv.vision).
+React Segmented Control.
 
-![](https://gw.alipayobjects.com/zos/antfincdn/z4ie3X8x6u/1cb23945-ec67-45a3-b521-f8da62e12255.png)
+![](https://gw.alipayobjects.com/mdn/rms_50855f/afts/img/A*bmGGQpnWs0oAAAAAAAAAAAAAARQnAQ)
 
 ## Live Demo
 
@@ -32,65 +32,40 @@ https://react-component.github.io/segmented/
 ## Usage
 
 ```js
-import segmented from 'rc-segmented';
+import Segmented from 'rc-segmented';
 import 'rc-segmented/assets/index.css'; // import 'rc-segmented/asssets/index.less';
 import { render } from 'react-dom';
 
 render(
- <segmented
- columns={[
- {
- icon: (
- <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" />
- ),
- title: '语雀',
- url: 'https://yuque.com',
- description: '知识创作与分享工具',
- openExternal: true,
- },
- ]}
- bottom="Made with ❤️ by AFX"
+ <Segmented
+ options={['Antd', 'Antv', 'Egg.js']}
+ onChange={(e) => handleValueChange(e.target.value)}
  />,
  mountNode,
 );
 ```
 
 ## API
 
-| Property | Type | Default | Description |
-| ---------------- | --------------------------------- | -------------- | ------------------------------------------- |
-| prefixCls | string | rc-segmented | |
-| className | string | '' | additional class name of segmented |
-| style | React.CSSProperties | | style properties of segmented |
-| columns | [Column](#Column) Array | [] | columns data inside segmented |
-| bottom | ReactNode | | extra bottom area beneath segmented columns |
-| theme | 'light' \| 'dark' | 'dark' | preset theme of segmented |
-| backgroundColor | string | '#000' | background color of segmented |
-| columnLayout | 'space-around' or 'space-between' | 'space-around' | justify-content value of columns element |
-| maxColumnsPerRow | number | - | max count of columns for each row |
-
-### Column
-
-| Property | Type | Default | Description |
-| --------- | -------------------------- | ------- | ---------------------------------- |
-| icon | ReactNode | | icon that before column title |
-| title | ReactNode | | title of column |
-| items | [Item](#Column-Item) Array | [] | items data inside each column |
-| className | string | '' | additional class name of segmented |
-| style | React.CSSProperties | | style properties of segmented |
-
-### Column Item
-
-| Property | Type | Default | Description |
-| ------------- | ------------------- | ------- | ------------------------------------------------------- |
-| icon | ReactNode | | icon that before column title |
-| title | ReactNode | | title of column |
-| description | ReactNode | | description of column, come after title |
-| url | string | | link url of item title |
-| openExternal | boolean | false | link target would be `_blank` if `openExternal` is ture |
-| className | string | '' | additional class name of segmented |
-| style | React.CSSProperties | | style properties of segmented |
-| LinkComponent | React.ReactType | 'a' | the link element to render item |
+| Property | Type | Default | Description |
+| ------------ | -------------------------------------------------------------- | ------------ | ---------------------------------- |
+| prefixCls | string | rc-segmented | |
+| className | string | '' | additional class name of segmented |
+| style | React.CSSProperties | | style properties of segmented |
+| options | Array<string \| number \| [SegmentedOption](#SegmentedOption)> | [] | options for choices |
+| value | string \| number | | value of segmented |
+| defaultValue | string \| number | | defaultValue of segmented |
+| onChange | (e: any) => void | | defaultValue of segmented |
+| disabled | boolean | false | disabled status of segmented |
+
+### SegmentedOption
+
+| Property | Type | Default | Description |
+| --------- | --------- | ------- | ----------------------------------------- | ------------------------- |
+| label | ReactNode | | label of segmented option |
+| value | string | number | | value of segmented option |
+| className | string | '' | additional class name of segmented option |
+| disabled | boolean | false | disabled status of segmented option |
 
 ## Development
 

README.md

@@ -1,141 +1,95 @@
 @segmented-prefix-cls: rc-segmented;
 
+.segmented-disabled-item() {
+ &,
+ &:hover,
+ &:focus {
+ color: fade(#000, 25%);
+ cursor: not-allowed;
+ }
+}
+
+.segmented-item-selected() {
+ background-color: white;
+}
+
 .@{segmented-prefix-cls} {
  position: relative;
- clear: both;
- color: rgba(255, 255, 255, 0.4);
- font-size: 14px;
- line-height: 1.5;
- background-color: #000;
-
- a {
- color: rgba(255, 255, 255, 0.9);
- text-decoration: none;
- transition: all 0.3s;
-
- &:hover {
- color: #40a9ff;
- }
- }
 
- &-container {
- width: 100%;
- max-width: 1200px;
- margin: auto;
- padding: 80px 0 20px;
- }
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ padding: 2px;
 
- &-columns {
- display: flex;
- justify-content: space-around;
- }
+ background-color: rgba(0, 0, 0, 0.04);
 
- &-column {
- margin-bottom: 60px;
+ border-radius: 2px;
 
- h2 {
- position: relative;
- margin: 0 auto 24px;
- color: #fff;
- font-weight: 500;
- font-size: 16px;
- }
+ &-item {
+ // 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;
 
- &-icon {
- position: relative;
- top: -1px;
- display: inline-block;
- width: 22px;
- margin-right: 0.5em;
- text-align: center;
- vertical-align: middle;
-
- > span,
- > svg,
- img {
- display: block;
- width: 100%;
- }
+ &-selected {
+ .segmented-item-selected();
+ color: #262626;
  }
- }
 
- &-item {
- margin: 12px 0;
-
- &-icon {
- position: relative;
- top: -1px;
- display: inline-block;
- width: 16px;
- margin-right: 0.4em;
- text-align: center;
- vertical-align: middle;
-
- > span,
- > svg,
- img {
- display: block;
- width: 100%;
- }
+ &:hover,
+ &:focus {
+ color: #262626;
  }
 
- &-separator {
- margin: 0 0.3em;
+ &-disabled {
+ .segmented-disabled-item();
  }
- }
 
- &-bottom {
- &-container {
- width: 100%;
- max-width: 1200px;
- margin: 0 auto;
- padding: 16px 0;
- font-size: 16px;
- line-height: 32px;
- text-align: center;
- border-top: 1px solid rgba(255, 255, 255, 0.25);
+ &-label {
+ z-index: 2;
  }
- }
 
- &-light {
- color: rgba(0, 0, 0, 0.85);
- background-color: transparent;
+ &-input {
+ position: absolute;
+ top: 0;
+ left: 0;
 
- h2,
- a {
- color: rgba(0, 0, 0, 0.85);
+ width: 0;
+ height: 0;
+ opacity: 0;
+ pointer-events: none;
  }
  }
 
- &-light &-bottom-container {
- border-top-color: #e8e8e8;
+ // disabled styles
+ &-disabled &-item,
+ &-disabled &-item:hover,
+ &-disabled &-item:focus {
+ .segmented-disabled-item();
  }
 
- &-light &-item-separator,
- &-light &-item-description {
- color: rgba(0, 0, 0, 0.45);
- }
-}
-
-@media only screen and (max-width: 767.99px) {
- .@{segmented-prefix-cls} {
- text-align: center;
+ &-thumb {
+ .segmented-item-selected();
 
- &-container {
- padding: 40px 0;
- }
-
- &-columns {
- display: block;
- }
-
- &-column {
- display: block;
- margin-bottom: 40px;
+ position: absolute;
+ top: 2px;
+ left: 0px;
+ width: 0;
+ height: 28px;
+ padding: 4px 0;
+ }
 
- &:last-child {
- margin-bottom: 0;
- }
- }
+ // transition effect when `enter-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;
  }
 }

assets/index.less

@@ -0,0 +1,5 @@
+@import './index.less';
+
+.wrapper {
+ margin-bottom: 10px;
+}

assets/style.less

@@ -0,0 +1,3 @@
+## basic
+
+<code src="../examples/basic.tsx">

docs/demo/basic.md

@@ -0,0 +1,3 @@
+## controlled
+
+<code src="../examples/controlled.tsx">

docs/demo/controlled.md

@@ -0,0 +1,3 @@
+## dynamic
+
+<code src="../examples/dynamic.tsx">