Skip to content

Commit 2d36e4c

Browse files
saschb2bleMaik
saschb2b
authored and
leMaik
committed
feat: migrate to MUI v6
BREAKING CHANGE: Requires MUI v5 or MUI V6
1 parent 3daa872 commit 2d36e4c

30 files changed

+2958
-10267
lines changed

‎.babelrc

-4
This file was deleted.

‎.eslintrc.cjs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

‎.github/workflows/pr.yml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: 'Check PR'
2+
3+
on:
4+
pull_request_target:
5+
types:
6+
- opened
7+
- synchronize
8+
- reopened
9+
10+
jobs:
11+
check-code:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- name: Checkout code
15+
uses: actions/checkout@v2
16+
with:
17+
fetch-depth: 0
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v2
20+
with:
21+
node-version: '20'
22+
- name: Install dependencies
23+
run: yarn install --frozen-lockfile
24+
- name: Lint code
25+
run: yarn lint
26+
- name: Build library code
27+
run: yarn build
28+
check-versioning:
29+
runs-on: ubuntu-latest
30+
steps:
31+
- uses: amannn/[email protected]
32+
env:
33+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/release.yml

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
name: 'Create release'
2+
3+
on: [workflow_dispatch]
4+
5+
jobs:
6+
release:
7+
name: Release
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout code
11+
uses: actions/checkout@v2
12+
with:
13+
fetch-depth: 0
14+
- name: Setup Node.js
15+
uses: actions/setup-node@v2
16+
with:
17+
node-version: '20'
18+
registry-url: 'https://registry.npmjs.org/'
19+
- name: Install dependencies
20+
run: yarn install --frozen-lockfile
21+
- name: Lint code
22+
run: yarn lint
23+
- name: Build library code
24+
run: yarn build
25+
- name: release
26+
env:
27+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
28+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
29+
run: npx semantic-release

‎.gitignore

+22-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
110
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
218
.idea
3-
build
4-
lib
5-
coverage
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.npmignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
**/*
1+
node_modules
2+
3+
src/*

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/dist

‎.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"endOfLine": "auto"
5+
}

‎.releaserc.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"branches": ["main"],
3+
"plugins": [
4+
"@semantic-release/commit-analyzer",
5+
"@semantic-release/release-notes-generator",
6+
"@semantic-release/github",
7+
"@semantic-release/npm"
8+
]
9+
}

‎.travis.yml

-4
This file was deleted.

‎LICENSE

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2016-2020 Wertarbyte and contributors
3+
Copyright (c) 2024 Wertarbyte and contributors
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21-
SOFTWARE.
21+
SOFTWARE.

‎README.md

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
# Material-UI Dots
22

33
[![npm Package](https://img.shields.io/npm/v/material-ui-dots.svg)](https://www.npmjs.com/package/material-ui-dots)
4-
[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-dots.svg?branch=master)](https://travis-ci.org/TeamWertarbyte/material-ui-dots)
5-
[![Coverage Status](https://coveralls.io/repos/github/TeamWertarbyte/material-ui-dots/badge.svg?branch=master)](https://coveralls.io/github/TeamWertarbyte/material-ui-dots?branch=next)
6-
[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
74

85
This component gives you animated pagination dots as seen in the [Material Design specs][material-specs] and in the quick settings menu of Android N. The dots were extracted from our [auto-rotating carousel][material-auto-rotating-carousel] component.
96

@@ -12,33 +9,36 @@ This component gives you animated pagination dots as seen in the [Material Desig
129

1310
## Installation
1411
```shell
15-
npm i --save material-ui-dots
12+
yarn add material-ui-dots
1613
```
1714

1815
## Usage
1916

2017
There is only a single `Dots` component which is to be used in controlled mode. The following example component will display five dots and select a dot when clicking on it.
2118

2219
```js
23-
import React from 'react'
24-
import Dots from 'material-ui-dots'
25-
26-
class Demo extends React.Component {
27-
constructor (props) {
28-
super(props)
29-
this.state = { index: 0 }
30-
}
31-
32-
render () {
33-
return (
34-
<Dots
35-
index={this.state.index}
36-
count={5}
37-
onDotClick={(index) => this.setState({ index })}
38-
/>
39-
)
40-
}
41-
}
20+
import * as React from 'react'
21+
import { Dots } from 'material-ui-dots'
22+
import { Box } from '@mui/material';
23+
24+
export const App: React.FC = () => {
25+
const [index, setIndex] = React.useState<number>(0);
26+
27+
return (
28+
<Box
29+
sx={{
30+
display: 'flex',
31+
justifyContent: 'center',
32+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
33+
borderRadius: 6,
34+
pb: 0.5,
35+
width: 200,
36+
}}
37+
>
38+
<Dots index={index} count={5} onDotClick={(value) => setIndex(value)} />
39+
</Box>
40+
);
41+
};
4242
```
4343

4444
## License

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Dots - React Material UI component</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎lib/components/Dots/Dots.tsx

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React, { useEffect, useState } from 'react';
2+
import Paper from '@mui/material/Paper';
3+
import Box from '@mui/material/Box';
4+
import { SxProps, Theme } from '@mui/material/styles';
5+
6+
interface DotsProps {
7+
count: number;
8+
index: number;
9+
sx?: SxProps<Theme>;
10+
onDotClick?: (
11+
index: number,
12+
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
13+
) => void;
14+
}
15+
16+
export const Dots: React.FC<DotsProps> = ({ count, index, sx, onDotClick }) => {
17+
const [previousIndex, setPreviousIndex] = useState<number>(index);
18+
19+
useEffect(() => {
20+
if (index !== previousIndex) {
21+
const timeout = setTimeout(() => {
22+
setPreviousIndex(index);
23+
}, 400);
24+
return () => clearTimeout(timeout);
25+
}
26+
}, [index, previousIndex]);
27+
28+
const handleDotClick = (
29+
dotIndex: number,
30+
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
31+
) => {
32+
if (onDotClick) {
33+
onDotClick(dotIndex, event);
34+
}
35+
};
36+
37+
return (
38+
<Box sx={{ width: count * 16, ...sx }}>
39+
<Box sx={{ position: 'relative', padding: '20px 0 28px' }}>
40+
{[...Array(count).keys()].map((i) => (
41+
<Box
42+
key={i}
43+
sx={{
44+
width: 8,
45+
height: 8,
46+
padding: 0.5,
47+
position: 'absolute',
48+
left: i * 16,
49+
cursor: onDotClick ? 'pointer' : 'inherit',
50+
}}
51+
onClick={(event) => handleDotClick(i, event)}
52+
>
53+
<Paper
54+
elevation={0}
55+
sx={{
56+
width: 8,
57+
height: 8,
58+
background: '#fff',
59+
borderRadius: 4,
60+
transition: 'all 400ms cubic-bezier(0.4, 0.0, 0.2, 1)',
61+
opacity:
62+
i >= Math.min(previousIndex, index) &&
63+
i <= Math.max(previousIndex, index)
64+
? 0
65+
: 0.5,
66+
}}
67+
/>
68+
</Box>
69+
))}
70+
<Paper
71+
elevation={0}
72+
sx={{
73+
position: 'absolute',
74+
marginTop: 0.5,
75+
left: Math.min(previousIndex, index) * 16 + 4,
76+
width: Math.abs(previousIndex - index) * 16 + 8,
77+
height: 8,
78+
background: '#fff',
79+
borderRadius: 4,
80+
transition: 'all 400ms cubic-bezier(0.4, 0.0, 0.2, 1)',
81+
}}
82+
/>
83+
</Box>
84+
</Box>
85+
);
86+
};

‎lib/components/Dots/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Dots.tsx';

‎lib/material-ui-dots.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './components/Dots';

‎lib/vite-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

0 commit comments

Comments
 (0)