feat: replace rc-footer with rc-segmented

vagusX · vagusX · commit b91f1570e9b4 · 2022-01-24T07:49:54.000Z
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,10 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: npm install && npm run compile
+    command: npm run start
+vscode:
+  extensions:
+    - dbaeumer.vscode-eslint
diff --git a/.umirc.ts b/.umirc.ts
@@ -2,13 +2,13 @@
 import { defineConfig } from 'dumi';
 
 export default defineConfig({
-  title: 'rc-footer',
+  title: 'rc-segmented',
   favicon: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   outputPath: '.doc',
   exportStatic: {},
-  base: '/footer/',
-  publicPath: '/footer/',
+  base: '/segmented/',
+  publicPath: '/segmented/',
   hash: true,
   styles: [
     `
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,27 +1 @@
 # Changelog
-
-## 0.6.0
-
-- support `maxColumnsPerRow`.
-
-## 0.5.0
-
-- support `theme="dark|light"`.
-
-## 0.4.0
-
-- support `columnLayout`.
-- support `backgroundColor`.
-
-## 0.3.0
-
-- support `style` and `className` for footer column and footer item.
-- support `LinkComponent` for footer item.
-
-## 0.2.0
-
-- Fix `lib` and `es` folders missing.
-
-## 0.1.0
-
-- First release.
diff --git a/README.md b/README.md
@@ -1,43 +1,43 @@
-# rc-footer 🐾
+# 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]
 
-[npm-image]: http://img.shields.io/npm/v/rc-footer.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-footer
-[github-actions-image]: https://github.com/react-component/footer/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/footer/actions
-[codecov-image]: https://img.shields.io/codecov/c/github/react-component/footer/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/react-component/footer/branch/master
-[david-url]: https://david-dm.org/react-component/footer
-[david-image]: https://david-dm.org/react-component/footer/status.svg?style=flat-square
-[david-dev-url]: https://david-dm.org/react-component/footer?type=dev
-[david-dev-image]: https://david-dm.org/react-component/footer/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-footer.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-footer
-[bundlephobia-url]: https://bundlephobia.com/result?p=rc-footer
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-footer
-
-Pretty Footer react component used in [ant.design](https://ant.design) and [antv.vision](https://antv.vision).
+[npm-image]: http://img.shields.io/npm/v/rc-segmented.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-segmented
+[github-actions-image]: https://github.com/react-component/segmented/workflows/CI/badge.svg
+[github-actions-url]: https://github.com/react-component/segmented/actions
+[codecov-image]: https://img.shields.io/codecov/c/github/react-component/segmented/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/react-component/segmented/branch/master
+[david-url]: https://david-dm.org/react-component/segmented
+[david-image]: https://david-dm.org/react-component/segmented/status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/react-component/segmented?type=dev
+[david-dev-image]: https://david-dm.org/react-component/segmented/dev-status.svg?style=flat-square
+[download-image]: https://img.shields.io/npm/dm/rc-segmented.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-segmented
+[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).
 
 ![](https://gw.alipayobjects.com/zos/antfincdn/z4ie3X8x6u/1cb23945-ec67-45a3-b521-f8da62e12255.png)
 
 ## Live Demo
 
-https://react-component.github.io/footer/
+https://react-component.github.io/segmented/
 
 ## Install
 
-[![rc-footer](https://nodei.co/npm/rc-footer.png)](https://npmjs.org/package/rc-footer)
+[![rc-segmented](https://nodei.co/npm/rc-segmented.png)](https://npmjs.org/package/rc-segmented)
 
 ## Usage
 
 ```js
-import Footer from 'rc-footer';
-import 'rc-footer/assets/index.css'; // import 'rc-footer/asssets/index.less';
+import segmented from 'rc-segmented';
+import 'rc-segmented/assets/index.css'; // import 'rc-segmented/asssets/index.less';
 import { render } from 'react-dom';
 
 render(
-  <Footer
+  <segmented
     columns={[
       {
         icon: (
@@ -57,27 +57,27 @@ render(
 
 ## API
 
-| Property         | Type                              | Default        | Description                              |
-| ---------------- | --------------------------------- | -------------- | ---------------------------------------- |
-| prefixCls        | string                            | rc-footer      |                                          |
-| className        | string                            | ''             | additional class name of footer          |
-| style            | React.CSSProperties               |                | style properties of footer               |
-| columns          | [Column](#Column) Array           | []             | columns data inside footer               |
-| bottom           | ReactNode                         |                | extra bottom area beneath footer columns |
-| theme            | 'light' \| 'dark'                 | 'dark'         | preset theme of footer                   |
-| backgroundColor  | string                            | '#000'         | background color of footer               |
-| columnLayout     | 'space-around' or 'space-between' | 'space-around' | justify-content value of columns element |
-| maxColumnsPerRow | number                            | -              | max count of columns for each row        |
+| 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 footer |
-| style     | React.CSSProperties        |         | style properties of footer      |
+| 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
 
@@ -88,8 +88,8 @@ render(
 | 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 footer                         |
-| style         | React.CSSProperties |         | style properties of footer                              |
+| className     | string              | ''      | additional class name of segmented                      |
+| style         | React.CSSProperties |         | style properties of segmented                           |
 | LinkComponent | React.ReactType     | 'a'     | the link element to render item                         |
 
 ## Development
@@ -101,4 +101,4 @@ npm start
 
 ## License
 
-rc-footer is released under the MIT license.
+rc-segmented is released under the MIT license.
diff --git a/assets/index.less b/assets/index.less
@@ -1,6 +1,6 @@
-@footer-prefix-cls: rc-footer;
+@segmented-prefix-cls: rc-segmented;
 
-.@{footer-prefix-cls} {
+.@{segmented-prefix-cls} {
   position: relative;
   clear: both;
   color: rgba(255, 255, 255, 0.4);
@@ -9,9 +9,9 @@
   background-color: #000;
 
   a {
-    transition: all 0.3s;
     color: rgba(255, 255, 255, 0.9);
     text-decoration: none;
+    transition: all 0.3s;
 
     &:hover {
       color: #40a9ff;
@@ -21,8 +21,8 @@
   &-container {
     width: 100%;
     max-width: 1200px;
-    padding: 80px 0 20px;
     margin: auto;
+    padding: 80px 0 20px;
   }
 
   &-columns {
@@ -36,25 +36,25 @@
     h2 {
       position: relative;
       margin: 0 auto 24px;
+      color: #fff;
       font-weight: 500;
       font-size: 16px;
-      color: #fff;
     }
 
     &-icon {
-      margin-right: 0.5em;
-      width: 22px;
-      display: inline-block;
-      vertical-align: middle;
-      top: -1px;
       position: relative;
+      top: -1px;
+      display: inline-block;
+      width: 22px;
+      margin-right: 0.5em;
       text-align: center;
+      vertical-align: middle;
 
       > span,
       > svg,
       img {
-        width: 100%;
         display: block;
+        width: 100%;
       }
     }
   }
@@ -63,19 +63,19 @@
     margin: 12px 0;
 
     &-icon {
-      margin-right: 0.4em;
-      width: 16px;
-      display: inline-block;
-      vertical-align: middle;
-      top: -1px;
       position: relative;
+      top: -1px;
+      display: inline-block;
+      width: 16px;
+      margin-right: 0.4em;
       text-align: center;
+      vertical-align: middle;
 
       > span,
       > svg,
       img {
-        width: 100%;
         display: block;
+        width: 100%;
       }
     }
 
@@ -86,20 +86,20 @@
 
   &-bottom {
     &-container {
-      border-top: 1px solid rgba(255, 255, 255, 0.25);
       width: 100%;
       max-width: 1200px;
-      text-align: center;
       margin: 0 auto;
       padding: 16px 0;
-      line-height: 32px;
       font-size: 16px;
+      line-height: 32px;
+      text-align: center;
+      border-top: 1px solid rgba(255, 255, 255, 0.25);
     }
   }
 
   &-light {
-    background-color: transparent;
     color: rgba(0, 0, 0, 0.85);
+    background-color: transparent;
 
     h2,
     a {
@@ -118,7 +118,7 @@
 }
 
 @media only screen and (max-width: 767.99px) {
-  .@{footer-prefix-cls} {
+  .@{segmented-prefix-cls} {
     text-align: center;
 
     &-container {
diff --git a/docs/examples/rows.tsx b/docs/examples/rows.tsx
@@ -1,11 +1,11 @@
 import '../../assets/index.less';
 import React from 'react';
-import Footer from 'rc-footer';
+import segmented from 'rc-segmented';
 
 export default function App() {
   return (
     <div>
-      <Footer
+      <segmented
         maxColumnsPerRow={4}
         columns={[
           {
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
@@ -1,11 +1,11 @@
 import '../../assets/index.less';
 import React from 'react';
-import Footer from 'rc-footer';
+import segmented from 'rc-segmented';
 
 export default function App() {
   return (
     <div>
-      <Footer
+      <segmented
         columns={[
           {
             title: '相关资源',
diff --git a/docs/examples/theme.tsx b/docs/examples/theme.tsx
@@ -1,12 +1,12 @@
 import '../../assets/index.less';
 import React, { useState } from 'react';
-import Footer from 'rc-footer';
+import segmented from 'rc-segmented';
 
 export default function App() {
   const [theme, setTheme] = useState('light');
   return (
     <div>
-      <Footer
+      <segmented
         theme={theme}
         columns={[
           {
diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,5 @@
 ---
-title: rc-footer
+title: rc-segmented
 ---
 
 <embed src="../README.md"></embed>
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
-  "name": "rc-footer",
-  "version": "0.6.6",
-  "description": "Pretty Footer react component used in used in ant.design",
+  "name": "rc-segmented",
+  "version": "0.0.1",
+  "description": "React segmented controls used in ant.design",
   "keywords": [
     "react",
     "react-component",
-    "react-footer",
-    "footer",
+    "react-segmented",
+    "react-segmented-controls",
+    "segmented controls",
     "antd",
     "ant-design"
   ],
@@ -19,13 +20,13 @@
     "lib",
     "dist"
   ],
-  "homepage": "https://react-component.github.io/footer",
+  "homepage": "https://react-component.github.io/segmented",
   "repository": {
     "type": "git",
-    "url": "git@github.com:react-component/footer.git"
+    "url": "git@github.com:react-component/segmented.git"
   },
   "bugs": {
-    "url": "http://github.com/react-component/footer/issues"
+    "url": "http://github.com/react-component/segmented/issues"
   },
   "license": "MIT",
   "scripts": {
diff --git a/src/column.tsx b/src/column.tsx
diff --git a/src/index.tsx b/src/index.tsx
diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
diff --git a/tests/index.spec.js b/tests/index.spec.js
diff --git a/tsconfig.json b/tsconfig.json
