Skip to content

Commit c8be6d5

Browse files
vagusXvagusX
authored
feat: basic implements (#1)
1 parent b91f157 commit c8be6d5

32 files changed

+1367
-1609
lines changed

‎.github/workflows/preview.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
name: 🔂 Surge PR Preview
2+
3+
on: [pull_request]
4+
5+
jobs:
6+
preview:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- uses: actions/checkout@v2
10+
- uses: afc163/surge-preview@v1
11+
id: preview_step
12+
with:
13+
surge_token: ${{ secrets.SURGE_TOKEN }}
14+
github_token: ${{ secrets.GITHUB_TOKEN }}
15+
dist: .doc
16+
build: |
17+
npm install
18+
npm run docs:build
19+
- name: Get the preview_url
20+
run: echo "url => ${{ steps.preview_step.outputs.preview_url }}"

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,7 @@ coverage/
3434
.umi
3535
.umi-production
3636
.umi-test
37-
.env.local
37+
.env.local
38+
39+
# vscode
40+
.vscode

‎.gitpod.yml

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎.umirc.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export default defineConfig({
77
logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
88
outputPath: '.doc',
99
exportStatic: {},
10-
base: '/segmented/',
11-
publicPath: '/segmented/',
10+
base: '/',
11+
publicPath: '/',
1212
hash: true,
1313
styles: [
1414
`

‎README.md

Lines changed: 26 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# rc-segmented 🐾
1+
# rc-segmented
22

33
[![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]
44

@@ -17,9 +17,9 @@
1717
[bundlephobia-url]: https://bundlephobia.com/result?p=rc-segmented
1818
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-segmented
1919

20-
Pretty segmented react component used in [ant.design](https://ant.design) and [antv.vision](https://antv.vision).
20+
React Segmented Control.
2121

22-
![](https://gw.alipayobjects.com/zos/antfincdn/z4ie3X8x6u/1cb23945-ec67-45a3-b521-f8da62e12255.png)
22+
![](https://gw.alipayobjects.com/mdn/rms_50855f/afts/img/A*bmGGQpnWs0oAAAAAAAAAAAAAARQnAQ)
2323

2424
## Live Demo
2525

@@ -32,65 +32,40 @@ https://react-component.github.io/segmented/
3232
## Usage
3333

3434
```js
35-
import segmented from 'rc-segmented';
35+
import Segmented from 'rc-segmented';
3636
import 'rc-segmented/assets/index.css'; // import 'rc-segmented/asssets/index.less';
3737
import { render } from 'react-dom';
3838

3939
render(
40-
<segmented
41-
columns={[
42-
{
43-
icon: (
44-
<img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" />
45-
),
46-
title: '语雀',
47-
url: 'https://yuque.com',
48-
description: '知识创作与分享工具',
49-
openExternal: true,
50-
},
51-
]}
52-
bottom="Made with ❤️ by AFX"
40+
<Segmented
41+
options={['Antd', 'Antv', 'Egg.js']}
42+
onChange={(e) => handleValueChange(e.target.value)}
5343
/>,
5444
mountNode,
5545
);
5646
```
5747

5848
## API
5949

60-
| Property | Type | Default | Description |
61-
| ---------------- | --------------------------------- | -------------- | ------------------------------------------- |
62-
| prefixCls | string | rc-segmented | |
63-
| className | string | '' | additional class name of segmented |
64-
| style | React.CSSProperties | | style properties of segmented |
65-
| columns | [Column](#Column) Array | [] | columns data inside segmented |
66-
| bottom | ReactNode | | extra bottom area beneath segmented columns |
67-
| theme | 'light' \| 'dark' | 'dark' | preset theme of segmented |
68-
| backgroundColor | string | '#000' | background color of segmented |
69-
| columnLayout | 'space-around' or 'space-between' | 'space-around' | justify-content value of columns element |
70-
| maxColumnsPerRow | number | - | max count of columns for each row |
71-
72-
### Column
73-
74-
| Property | Type | Default | Description |
75-
| --------- | -------------------------- | ------- | ---------------------------------- |
76-
| icon | ReactNode | | icon that before column title |
77-
| title | ReactNode | | title of column |
78-
| items | [Item](#Column-Item) Array | [] | items data inside each column |
79-
| className | string | '' | additional class name of segmented |
80-
| style | React.CSSProperties | | style properties of segmented |
81-
82-
### Column Item
83-
84-
| Property | Type | Default | Description |
85-
| ------------- | ------------------- | ------- | ------------------------------------------------------- |
86-
| icon | ReactNode | | icon that before column title |
87-
| title | ReactNode | | title of column |
88-
| description | ReactNode | | description of column, come after title |
89-
| url | string | | link url of item title |
90-
| openExternal | boolean | false | link target would be `_blank` if `openExternal` is ture |
91-
| className | string | '' | additional class name of segmented |
92-
| style | React.CSSProperties | | style properties of segmented |
93-
| LinkComponent | React.ReactType | 'a' | the link element to render item |
50+
| Property | Type | Default | Description |
51+
| ------------ | -------------------------------------------------------------- | ------------ | ---------------------------------- |
52+
| prefixCls | string | rc-segmented | |
53+
| className | string | '' | additional class name of segmented |
54+
| style | React.CSSProperties | | style properties of segmented |
55+
| options | Array<string \| number \| [SegmentedOption](#SegmentedOption)> | [] | options for choices |
56+
| value | string \| number | | value of segmented |
57+
| defaultValue | string \| number | | defaultValue of segmented |
58+
| onChange | (e: any) => void | | defaultValue of segmented |
59+
| disabled | boolean | false | disabled status of segmented |
60+
61+
### SegmentedOption
62+
63+
| Property | Type | Default | Description |
64+
| --------- | --------- | ------- | ----------------------------------------- | ------------------------- |
65+
| label | ReactNode | | label of segmented option |
66+
| value | string | number | | value of segmented option |
67+
| className | string | '' | additional class name of segmented option |
68+
| disabled | boolean | false | disabled status of segmented option |
9469

9570
## Development
9671

‎assets/index.less

Lines changed: 68 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,95 @@
11
@segmented-prefix-cls: rc-segmented;
22

3+
.segmented-disabled-item() {
4+
&,
5+
&:hover,
6+
&:focus {
7+
color: fade(#000, 25%);
8+
cursor: not-allowed;
9+
}
10+
}
11+
12+
.segmented-item-selected() {
13+
background-color: white;
14+
}
15+
316
.@{segmented-prefix-cls} {
417
position: relative;
5-
clear: both;
6-
color: rgba(255, 255, 255, 0.4);
7-
font-size: 14px;
8-
line-height: 1.5;
9-
background-color: #000;
10-
11-
a {
12-
color: rgba(255, 255, 255, 0.9);
13-
text-decoration: none;
14-
transition: all 0.3s;
15-
16-
&:hover {
17-
color: #40a9ff;
18-
}
19-
}
2018

21-
&-container {
22-
width: 100%;
23-
max-width: 1200px;
24-
margin: auto;
25-
padding: 80px 0 20px;
26-
}
19+
display: inline-block;
20+
box-sizing: border-box;
21+
margin: 0;
22+
padding: 0;
23+
padding: 2px;
2724

28-
&-columns {
29-
display: flex;
30-
justify-content: space-around;
31-
}
25+
background-color: rgba(0, 0, 0, 0.04);
3226

33-
&-column {
34-
margin-bottom: 60px;
27+
border-radius: 2px;
3528

36-
h2 {
37-
position: relative;
38-
margin: 0 auto 24px;
39-
color: #fff;
40-
font-weight: 500;
41-
font-size: 16px;
42-
}
29+
&-item {
30+
// box-sizing: border-box;
31+
position: relative;
32+
display: inline-block;
33+
height: 28px;
34+
padding: 4px 10px;
35+
color: fade(#000, 85%);
36+
line-height: 28px;
37+
text-align: center;
38+
39+
cursor: pointer;
4340

44-
&-icon {
45-
position: relative;
46-
top: -1px;
47-
display: inline-block;
48-
width: 22px;
49-
margin-right: 0.5em;
50-
text-align: center;
51-
vertical-align: middle;
52-
53-
> span,
54-
> svg,
55-
img {
56-
display: block;
57-
width: 100%;
58-
}
41+
&-selected {
42+
.segmented-item-selected();
43+
color: #262626;
5944
}
60-
}
6145

62-
&-item {
63-
margin: 12px 0;
64-
65-
&-icon {
66-
position: relative;
67-
top: -1px;
68-
display: inline-block;
69-
width: 16px;
70-
margin-right: 0.4em;
71-
text-align: center;
72-
vertical-align: middle;
73-
74-
> span,
75-
> svg,
76-
img {
77-
display: block;
78-
width: 100%;
79-
}
46+
&:hover,
47+
&:focus {
48+
color: #262626;
8049
}
8150

82-
&-separator {
83-
margin: 0 0.3em;
51+
&-disabled {
52+
.segmented-disabled-item();
8453
}
85-
}
8654

87-
&-bottom {
88-
&-container {
89-
width: 100%;
90-
max-width: 1200px;
91-
margin: 0 auto;
92-
padding: 16px 0;
93-
font-size: 16px;
94-
line-height: 32px;
95-
text-align: center;
96-
border-top: 1px solid rgba(255, 255, 255, 0.25);
55+
&-label {
56+
z-index: 2;
9757
}
98-
}
9958

100-
&-light {
101-
color: rgba(0, 0, 0, 0.85);
102-
background-color: transparent;
59+
&-input {
60+
position: absolute;
61+
top: 0;
62+
left: 0;
10363

104-
h2,
105-
a {
106-
color: rgba(0, 0, 0, 0.85);
64+
width: 0;
65+
height: 0;
66+
opacity: 0;
67+
pointer-events: none;
10768
}
10869
}
10970

110-
&-light &-bottom-container {
111-
border-top-color: #e8e8e8;
71+
// disabled styles
72+
&-disabled &-item,
73+
&-disabled &-item:hover,
74+
&-disabled &-item:focus {
75+
.segmented-disabled-item();
11276
}
11377

114-
&-light &-item-separator,
115-
&-light &-item-description {
116-
color: rgba(0, 0, 0, 0.45);
117-
}
118-
}
119-
120-
@media only screen and (max-width: 767.99px) {
121-
.@{segmented-prefix-cls} {
122-
text-align: center;
78+
&-thumb {
79+
.segmented-item-selected();
12380

124-
&-container {
125-
padding: 40px 0;
126-
}
127-
128-
&-columns {
129-
display: block;
130-
}
131-
132-
&-column {
133-
display: block;
134-
margin-bottom: 40px;
81+
position: absolute;
82+
top: 2px;
83+
left: 0px;
84+
width: 0;
85+
height: 28px;
86+
padding: 4px 0;
87+
}
13588

136-
&:last-child {
137-
margin-bottom: 0;
138-
}
139-
}
89+
// transition effect when `enter-active`
90+
&-thumb-motion-enter-active {
91+
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
92+
width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
93+
will-change: transform, width;
14094
}
14195
}

‎assets/style.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import './index.less';
2+
3+
.wrapper {
4+
margin-bottom: 10px;
5+
}

‎docs/demo/basic.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## basic
2+
3+
<code src="../examples/basic.tsx">

‎docs/demo/controlled.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## controlled
2+
3+
<code src="../examples/controlled.tsx">

‎docs/demo/dynamic.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## dynamic
2+
3+
<code src="../examples/dynamic.tsx">

0 commit comments

Comments
 (0)