Skip to content

feat: basic implements #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Feb 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .github/workflows/preview.yml
Original file line number Diff line number Diff line change
@@ -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 }}"
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,7 @@ coverage/
.umi
.umi-production
.umi-test
.env.local
.env.local

# vscode
.vscode
10 changes: 0 additions & 10 deletions .gitpod.yml

This file was deleted.

4 changes: 2 additions & 2 deletions .umirc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
`
Expand Down
77 changes: 26 additions & 51 deletions README.md
Original file line number Diff line number Diff line change
@@ -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]

Expand All @@ -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

Expand All @@ -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

Expand Down
182 changes: 68 additions & 114 deletions assets/index.less
Original file line number Diff line number Diff line change
@@ -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;
}
}
5 changes: 5 additions & 0 deletions assets/style.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import './index.less';

.wrapper {
margin-bottom: 10px;
}
3 changes: 3 additions & 0 deletions docs/demo/basic.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## basic

<code src="../examples/basic.tsx">
3 changes: 3 additions & 0 deletions docs/demo/controlled.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## controlled

<code src="../examples/controlled.tsx">
3 changes: 3 additions & 0 deletions docs/demo/dynamic.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## dynamic

<code src="../examples/dynamic.tsx">
3 changes: 3 additions & 0 deletions docs/demo/refs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## refs

<code src="../examples/refs.tsx">
3 changes: 0 additions & 3 deletions docs/demo/rows.md

This file was deleted.

3 changes: 0 additions & 3 deletions docs/demo/simple.md

This file was deleted.

Loading