chore: upgrade tools and format code (#444)

* chore: add husky stylelint lint-staged * chore: prettier all code * chore: add .stylelintrc.json * chore: upgrade deps * chore: upgrade actions
react-component · Feb 7, 2024 · f1fce69 · f1fce69
1 parent d018cb0
commit f1fce69
Show file tree

Hide file tree

Showing 30 changed files with 455 additions and 444 deletions.
diff --git a/.fatherrc.js b/.fatherrc.js
@@ -2,4 +2,4 @@ import { defineConfig } from 'father';
 
 export default defineConfig({
   plugins: ['@rc-component/father-plugin'],
-});
+});
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,31 +1,31 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-    time: "21:00"
-  open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: np
-    versions:
-    - 7.2.0
-    - 7.3.0
-    - 7.4.0
-  - dependency-name: "@types/react"
-    versions:
-    - 17.0.0
-    - 17.0.1
-    - 17.0.2
-    - 17.0.3
-  - dependency-name: "@types/react-dom"
-    versions:
-    - 17.0.0
-    - 17.0.1
-    - 17.0.2
-  - dependency-name: react
-    versions:
-    - 17.0.1
-  - dependency-name: less
-    versions:
-    - 4.1.0
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: daily
+      time: '21:00'
+    open-pull-requests-limit: 10
+    ignore:
+      - dependency-name: np
+        versions:
+          - 7.2.0
+          - 7.3.0
+          - 7.4.0
+      - dependency-name: '@types/react'
+        versions:
+          - 17.0.0
+          - 17.0.1
+          - 17.0.2
+          - 17.0.3
+      - dependency-name: '@types/react-dom'
+        versions:
+          - 17.0.0
+          - 17.0.1
+          - 17.0.2
+      - dependency-name: react
+        versions:
+          - 17.0.1
+      - dependency-name: less
+        versions:
+          - 4.1.0
diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml
@@ -2,29 +2,29 @@ name: CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   setup:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
-          node-version: '12'
+          node-version: '20'
 
       - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for singe file
         run: |
@@ -35,29 +35,29 @@ jobs:
 
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
         run: npm ci
-  
+
   lint:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -66,21 +66,21 @@ jobs:
         run: npm run lint
 
     needs: setup
-  
+
   compile:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -89,21 +89,21 @@ jobs:
         run: npm run compile
 
     needs: setup
-  
+
   coverage:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v4
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-standard-less"]
+}
diff --git a/README.md b/README.md
@@ -35,41 +35,41 @@ ReactDom.render(
 
 ## Browser Support
 
-|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|
-| --- | --- | --- | --- | --- |
-| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
+| ![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true) |
+| ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| IE 10+ ✔                                                                                  | Chrome 31.0+ ✔                                                                                    | Firefox 31.0+ ✔                                                                                      | Opera 30.0+ ✔                                                                                  | Safari 7.0+ ✔                                                                                     |
 
 ## API
 
-| props      | type           | default | description    |
-|------------|----------------|---------|----------------|
-| className       | string | null | - |
-| classNames       | { mask?: string; content?: string; wrapper?: string; } | - | pass className to target area |
-| styles       | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area |
-| prefixCls     |  string  | 'drawer' | prefix class |
-| width       |  string \| number  |  null  | drawer content wrapper width, drawer level transition width  |
-| height      |  string \| number  |  null  | drawer content wrapper height, drawer level transition height  |
-| open        | boolean  | false |  open or close menu  |
-| defaultOpen | boolean  | false | default open menu |
-| placement  | string   |  `left` | `left` `top` `right` `bottom` |
-| level     | string \| array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
-| levelMove | number \| array \| func | null |level move value. default is drawer width |
-| duration | string | `.3s` | level animation duration |
-| ease | string | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function |
-| getContainer    | string \| func \| HTMLElement | `body` | Return the mount node for Drawer. if is `null` use React.creactElement  |
-| showMask    |  boolean  | true | mask is show |
-| maskClosable | boolean  | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
-| maskStyle | CSSProperties | null | mask style |
-| afterVisibleChange  | func | null | transition end callback(open) |
-| onClose | func | null | close click function |
-| keyboard | boolean | true |  Whether support press esc to close |
-| autoFocus | boolean | true |  Whether focusing on the drawer after it opened |
-| onMouseEnter | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse enter drawer panel |
-| onMouseOver | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse over drawer panel |
-| onMouseLeave | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse leave drawer panel |
-| onClick | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse click drawer panel |
-| onKeyDown | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keydown on drawer panel |
-| onKeyUp | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse keyup on drawer panel |
+| props              | type                                                                        | default                                | description                                                                   |
+| ------------------ | --------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
+| className          | string                                                                      | null                                   | -                                                                             |
+| classNames         | { mask?: string; content?: string; wrapper?: string; }                      | -                                      | pass className to target area                                                 |
+| styles             | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | -                                      | pass style to target area                                                     |
+| prefixCls          | string                                                                      | 'drawer'                               | prefix class                                                                  |
+| width              | string \| number                                                            | null                                   | drawer content wrapper width, drawer level transition width                   |
+| height             | string \| number                                                            | null                                   | drawer content wrapper height, drawer level transition height                 |
+| open               | boolean                                                                     | false                                  | open or close menu                                                            |
+| defaultOpen        | boolean                                                                     | false                                  | default open menu                                                             |
+| placement          | string                                                                      | `left`                                 | `left` `top` `right` `bottom`                                                 |
+| level              | string \| array                                                             | `all`                                  | With the drawer level element. `all`/ null / className / id / tagName / array |
+| levelMove          | number \| array \| func                                                     | null                                   | level move value. default is drawer width                                     |
+| duration           | string                                                                      | `.3s`                                  | level animation duration                                                      |
+| ease               | string                                                                      | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function                                               |
+| getContainer       | string \| func \| HTMLElement                                               | `body`                                 | Return the mount node for Drawer. if is `null` use React.creactElement        |
+| showMask           | boolean                                                                     | true                                   | mask is show                                                                  |
+| maskClosable       | boolean                                                                     | true                                   | Clicking on the mask (area outside the Drawer) to close the Drawer or not.    |
+| maskStyle          | CSSProperties                                                               | null                                   | mask style                                                                    |
+| afterVisibleChange | func                                                                        | null                                   | transition end callback(open)                                                 |
+| onClose            | func                                                                        | null                                   | close click function                                                          |
+| keyboard           | boolean                                                                     | true                                   | Whether support press esc to close                                            |
+| autoFocus          | boolean                                                                     | true                                   | Whether focusing on the drawer after it opened                                |
+| onMouseEnter       | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse enter drawer panel                                         |
+| onMouseOver        | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse over drawer panel                                          |
+| onMouseLeave       | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse leave drawer panel                                         |
+| onClick            | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse click drawer panel                                         |
+| onKeyDown          | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse keydown on drawer panel                                    |
+| onKeyUp            | React.MouseEventHandler\<HTMLDivElement\>                                   | -                                      | Trigger when mouse keyup on drawer panel                                      |
 
 > 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`.
 

diff --git a/assets/index.less b/assets/index.less
@@ -4,14 +4,12 @@
 @zIndex: 1050;
 
 .inset-0() {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
 }
 
 .@{prefixCls} {
   .inset-0;
+
   position: fixed;
   z-index: @zIndex;
   pointer-events: none;
@@ -22,9 +20,10 @@
 
   &-mask {
     .inset-0;
+
     position: absolute;
     z-index: @zIndex;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgb(0 0 0 / 50%);
     pointer-events: auto;
   }
 

diff --git a/docs/demo/change-remove.md b/docs/demo/change-remove.md
@@ -5,5 +5,4 @@ nav:
   path: /demo
 ---
 
-
 <code src="../examples/change-remove.tsx"></code>
diff --git a/docs/demo/change.md b/docs/demo/change.md
@@ -5,5 +5,4 @@ nav:
   path: /demo
 ---
 
-
 <code src="../examples/change.tsx"></code>
diff --git a/docs/demo/forceRender.md b/docs/demo/forceRender.md
@@ -5,5 +5,4 @@ nav:
   path: /demo
 ---
 
-
 <code src="../examples/forceRender.tsx"></code>
diff --git a/docs/demo/getContainer.md b/docs/demo/getContainer.md
@@ -5,6 +5,5 @@ nav:
   path: /demo
 ---
 
-
 <code src="../examples/getContainer.tsx"></code>
 <code src="../examples/getContainer-false.tsx"></code>
diff --git a/docs/demo/multiple.md b/docs/demo/multiple.md
@@ -5,5 +5,4 @@ nav:
   path: /demo
 ---
 
-
 <code src="../examples/multiple.tsx"></code>
diff --git a/docs/demo/no-mask.md b/docs/demo/no-mask.md
@@ -5,5 +5,4 @@ nav:
   path: /demo
 ---
 
-
 <code src="../examples/no-mask.tsx"></code>
diff --git a/docs/demo/placement.md b/docs/demo/placement.md
@@ -5,5 +5,4 @@ nav:
   path: /demo
 ---
 
-
 <code src="../examples/placement.tsx"></code>
diff --git a/docs/examples/assets/index.less b/docs/examples/assets/index.less
@@ -3,12 +3,14 @@
   .ant-menu-vertical {
     border-right: none;
   }
+
   &-content {
     padding-top: 40px;
   }
+
   &-left {
-    .ant-menu-inline .ant-menu-item:after,
-    .ant-menu-vertical .ant-menu-item:after {
+    .ant-menu-inline .ant-menu-item::after,
+    .ant-menu-vertical .ant-menu-item::after {
       left: 0;
       right: auto;
     }
@@ -17,13 +19,13 @@
 
 .drawer-wrapper {
   .drawer {
-    animation: AlphaTo .3s ease-out .3s;
+    animation: alpha-to 0.3s ease-out 0.3s;
     animation-fill-mode: forwards;
     opacity: 0;
   }
 }
 
-@keyframes AlphaTo {
+@keyframes alpha-to {
   to {
     opacity: 1;
     left: 0;
@@ -33,6 +35,7 @@
 .parent-demo {
   position: relative;
   overflow: hidden;
+
   .drawer {
     position: absolute;
   }