Skip to content

Commit 895519f

Browse files
xiejay97xiejay97
committed
refactor: refactor design of style override
1 parent 864290d commit 895519f

File tree

25 files changed

+1047
-1091
lines changed

25 files changed

+1047
-1091
lines changed

‎.stylelintrc‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,28 @@
66
"stylelint-config-prettier"
77
],
88
"rules": {
9-
"custom-property-pattern": null,
10-
"no-invalid-position-at-import-rule": null,
9+
"import-notation": null,
1110
"selector-class-pattern": null,
12-
"block-no-empty": null,
13-
"selector-pseudo-class-no-unknown": [
14-
true,
15-
{
16-
"ignorePseudoClasses": ["global"]
17-
}
18-
]
11+
"block-no-empty": null
1912
},
2013
"overrides": [
2114
{
2215
"files": ["*.scss", "**/*.scss"],
2316
"rules": {
24-
"function-no-unknown": null,
17+
"selector-pseudo-class-no-unknown": [
18+
true,
19+
{
20+
"ignorePseudoClasses": ["global"]
21+
}
22+
],
2523
"declaration-property-value-allowed-list": {
2624
"/color/": ["/var/", "/\\$/", "currentcolor", "transparent", "unset", "inherit"],
2725
"font-size": ["/var/", "/\\$/", "/[0-9]+em$/", "unset", "inherit"],
2826
"border-radius": ["/var/", "/\\$/", "50%", "0", "inherit"]
2927
},
3028
"declaration-property-value-disallowed-list": {
3129
"transition": ["/all/", "/[0-9]ms/"]
32-
},
33-
"annotation-no-unknown": [
34-
true,
35-
{
36-
"ignoreAnnotations": ["default", "global"]
37-
}
38-
]
30+
}
3931
}
4032
},
4133
{

‎package.json‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,19 @@
2626
"dependencies": {},
2727
"devDependencies": {
2828
"@amap/amap-jsapi-loader": "^1.0.1",
29-
"@amap/amap-jsapi-types": "^0.0.8",
29+
"@amap/amap-jsapi-types": "^0.0.10",
3030
"@ant-design/icons-svg": "^4.2.1",
3131
"@commitlint/cli": "^17.1.2",
3232
"@commitlint/config-conventional": "^17.1.0",
33-
"@nrwl/cli": "14.8.4",
34-
"@nrwl/eslint-plugin-nx": "14.8.4",
35-
"@nrwl/jest": "14.8.4",
36-
"@nrwl/linter": "14.8.4",
37-
"@nrwl/nx-cloud": "14.7.0",
38-
"@nrwl/react": "14.8.4",
39-
"@nrwl/tao": "14.8.4",
40-
"@nrwl/web": "14.8.4",
41-
"@nrwl/workspace": "14.8.4",
33+
"@nrwl/cli": "15.0.2",
34+
"@nrwl/eslint-plugin-nx": "15.0.2",
35+
"@nrwl/jest": "15.0.2",
36+
"@nrwl/linter": "15.0.2",
37+
"@nrwl/nx-cloud": "15.0.0",
38+
"@nrwl/react": "15.0.2",
39+
"@nrwl/tao": "15.0.2",
40+
"@nrwl/web": "15.0.2",
41+
"@nrwl/workspace": "15.0.2",
4242
"@stackblitz/sdk": "^1.8.0",
4343
"@testing-library/jest-dom": "^5.16.5",
4444
"@testing-library/react": "^13.4.0",
@@ -47,28 +47,26 @@
4747
"@types/jest": "^27.4.1",
4848
"@types/lodash": "^4.14.186",
4949
"@types/marked": "^4.0.7",
50-
"@types/mocha": "^10.0.0",
51-
"@types/node": "^18.8.5",
52-
"@types/react": "^18.0.21",
53-
"@types/react-dom": "^18.0.6",
50+
"@types/node": "16.18.0",
51+
"@types/react": "^18.0.22",
52+
"@types/react-dom": "^18.0.7",
5453
"@types/vscode": "^1.72.0",
5554
"@types/yaml-front-matter": "^4.1.0",
56-
"@typescript-eslint/eslint-plugin": "^5.40.0",
57-
"@typescript-eslint/parser": "^5.40.0",
58-
"@vscode/test-electron": "^2.1.5",
55+
"@typescript-eslint/eslint-plugin": "^5.41.0",
56+
"@typescript-eslint/parser": "^5.41.0",
5957
"axios": "^1.1.2",
6058
"axios-mock-adapter": "^1.21.2",
6159
"babel-jest": "^29.1.2",
6260
"bootstrap": "^5.2.2",
6361
"codesandbox": "^2.2.3",
6462
"colors": "^1.4.0",
65-
"core-js": "^3.25.5",
66-
"dayjs": "^1.11.5",
63+
"core-js": "^3.26.0",
64+
"dayjs": "^1.11.6",
6765
"echarts": "^5.4.0",
68-
"eslint": "^8.25.0",
66+
"eslint": "^8.26.0",
6967
"eslint-config-prettier": "^8.5.0",
7068
"eslint-plugin-import": "^2.26.0",
71-
"eslint-plugin-jsdoc": "^39.3.6",
69+
"eslint-plugin-jsdoc": "^39.3.24",
7270
"eslint-plugin-jsx-a11y": "^6.6.1",
7371
"eslint-plugin-markdown": "^3.0.0",
7472
"eslint-plugin-prettier": "^4.2.1",
@@ -80,15 +78,14 @@
8078
"highlight.js": "^11.6.0",
8179
"husky": "^8.0.1",
8280
"i18next": "^21.10.0",
83-
"immer": "^9.0.15",
81+
"immer": "^9.0.16",
8482
"is-builtin-module": "^3.2.0",
8583
"jest": "^27.5.1",
8684
"jest-environment-jsdom": "28.1.1",
87-
"lerna": "^6.0.0",
85+
"lerna": "^6.0.1",
8886
"lodash": "^4.17.21",
8987
"marked": "^4.1.1",
90-
"mocha": "^10.0.0",
91-
"nx": "14.8.4",
88+
"nx": "15.0.2",
9289
"postcss-html": "^1.5.0",
9390
"postcss-markdown": "^1.2.0",
9491
"prettier": "^2.7.1",
@@ -97,17 +94,17 @@
9794
"react-i18next": "^11.18.6",
9895
"react-router-dom": "^6.4.2",
9996
"react-test-renderer": "^18.2.0",
100-
"regenerator-runtime": "^0.13.9",
97+
"regenerator-runtime": "^0.13.10",
10198
"rfs": "^9.0.6",
10299
"rxjs": "^7.5.7",
103100
"rxjs-for-await": "^1.0.0",
104101
"sass": "^1.55.0",
105102
"sort-package-json": "^2.0.0",
106-
"stylelint": "^14.13.0",
103+
"stylelint": "^14.14.0",
107104
"stylelint-config-prettier": "^9.0.3",
108105
"stylelint-config-recess-order": "^3.0.0",
109-
"stylelint-config-recommended-scss": "^7.0.0",
110-
"stylelint-config-standard": "^28.0.0",
106+
"stylelint-config-recommended-scss": "^8.0.0",
107+
"stylelint-config-standard": "^29.0.0",
111108
"stylelint-scss": "^4.3.0",
112109
"swiper": "^8.4.4",
113110
"table": "^6.8.0",

‎packages/platform/src/app/routes/dashboard/amap/AMap.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ export default function AMap(): JSX.Element | null {
2525
/>
2626
<AppMap
2727
style={{ paddingTop: '61.8%' }}
28-
aOptions={{
29-
center: [104.937478, 35.439575],
30-
zoom: 5,
31-
}}
28+
aOptions={
29+
{
30+
center: [104.937478, 35.439575],
31+
zoom: 5,
32+
} as any
33+
}
3234
>
3335
{mapTmp === 'Marker' ? (
3436
<AppMap.Marker aOptions={{ position: [116.406315, 39.908775] }}></AppMap.Marker>

‎packages/site/src/styles/theme-dark.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* stylelint-disable declaration-property-value-allowed-list */
22
body.dark {
3+
/* stylelint-disable-next-line no-invalid-position-at-import-rule */
34
@import '~highlight.js/scss/github-dark';
45

56
--app-background-color: rgb(18 18 18);

‎packages/ui/src/components/pagination/Pagination.tsx‎

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { isNull } from 'lodash';
2-
import { useEffect, useRef, useState } from 'react';
2+
import React, { useEffect, useRef, useState } from 'react';
33

44
import { DoubleLeftOutlined, DoubleRightOutlined, EllipsisOutlined, LeftOutlined, RightOutlined } from '@react-devui/icons';
55
import { getClassName } from '@react-devui/utils';
@@ -105,15 +105,10 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
105105
{...getButtonRoleAttributes(() => {
106106
changeActive(active - 1);
107107
}, active === 1)}
108-
className={getClassName(
109-
`${dPrefix}pagination__item`,
110-
`${dPrefix}pagination__item--button`,
111-
112-
{
113-
'is-disabled': active === 1,
114-
[`${dPrefix}pagination__item--border`]: !(dCustomRender && dCustomRender.prev),
115-
}
116-
)}
108+
className={getClassName(`${dPrefix}pagination__button`, {
109+
'is-disabled': active === 1,
110+
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.prev),
111+
})}
117112
title={t('Pagination', 'Previous page')}
118113
>
119114
{dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
@@ -125,10 +120,11 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
125120
{...getButtonRoleAttributes(() => {
126121
changeActive(active + 1);
127122
}, active === lastPage)}
128-
className={getClassName(`${dPrefix}pagination__item`, `${dPrefix}pagination__item--button`, {
123+
className={getClassName(`${dPrefix}pagination__button`, {
129124
'is-disabled': active === lastPage,
130-
[`${dPrefix}pagination__item--border`]: !(dCustomRender && dCustomRender.next),
125+
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.next),
131126
})}
127+
style={{ marginRight: dCompose[dCompose.length - 1] === 'pages' ? 0 : `var(--${dPrefix}pagination-space)` }}
132128
title={t('Pagination', 'Next page')}
133129
>
134130
{dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
@@ -157,9 +153,8 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
157153
return (
158154
<DSelect
159155
key="size"
160-
className={getClassName(`${dPrefix}pagination__size-select`, {
161-
[`${dPrefix}pagination__size-select--mini`]: dMini,
162-
})}
156+
className={`${dPrefix}pagination__size`}
157+
style={{ marginRight: dCompose[dCompose.length - 1] === 'size' ? 0 : undefined }}
163158
dList={list}
164159
dModel={pageSize}
165160
dCustomItem={(item) => (dCustomRender && dCustomRender.size ? dCustomRender.size(item.value) : item.label)}
@@ -177,9 +172,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
177172
if (dCompose.includes('jump')) {
178173
const jumpInput = (
179174
<DInput
180-
className={getClassName(`${dPrefix}pagination__jump-input`, {
181-
[`${dPrefix}pagination__jump-input--mini`]: dMini,
182-
})}
175+
className={`${dPrefix}pagination__jump-input`}
183176
dType="number"
184177
dMax={lastPage}
185178
dMin={1}
@@ -233,7 +226,11 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
233226
{dCompose.map((item) => {
234227
if (item === 'total') {
235228
return (
236-
<div key="total" className={getClassName(`${dPrefix}pagination__item`)}>
229+
<div
230+
key="total"
231+
className={`${dPrefix}pagination__total`}
232+
style={{ marginRight: dCompose[dCompose.length - 1] === 'total' ? 0 : undefined }}
233+
>
237234
{totalNode}
238235
</div>
239236
);
@@ -269,7 +266,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
269266
}
270267

271268
return (
272-
<ul key="pages" className={`${dPrefix}pagination__list`}>
269+
<React.Fragment key="pages">
273270
{prevNode}
274271
{pages.map((n) => {
275272
if (n === 'prev5') {
@@ -279,11 +276,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
279276
changeActive(active - 5);
280277
})}
281278
key="prev5"
282-
className={getClassName(
283-
`${dPrefix}pagination__item`,
284-
`${dPrefix}pagination__item--button`,
285-
`${dPrefix}pagination__item--jump5`
286-
)}
279+
className={getClassName(`${dPrefix}pagination__button`, `${dPrefix}pagination__button--jump5`)}
287280
title={t('Pagination', '5 pages forward')}
288281
>
289282
<DoubleLeftOutlined className={`${dPrefix}pagination__jump5-icon`} />
@@ -299,11 +292,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
299292
changeActive(active + 5);
300293
})}
301294
key="next5"
302-
className={getClassName(
303-
`${dPrefix}pagination__item`,
304-
`${dPrefix}pagination__item--button`,
305-
`${dPrefix}pagination__item--jump5`
306-
)}
295+
className={getClassName(`${dPrefix}pagination__button`, `${dPrefix}pagination__button--jump5`)}
307296
title={t('Pagination', '5 pages backward')}
308297
>
309298
<DoubleRightOutlined className={`${dPrefix}pagination__jump5-icon`} />
@@ -317,10 +306,9 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
317306
<li
318307
key={n}
319308
className={getClassName(
320-
`${dPrefix}pagination__item`,
321-
`${dPrefix}pagination__item--button`,
322-
`${dPrefix}pagination__item--border`,
323-
`${dPrefix}pagination__item--number`,
309+
`${dPrefix}pagination__button`,
310+
`${dPrefix}pagination__button--border`,
311+
`${dPrefix}pagination__button--number`,
324312
{
325313
'is-active': active === n,
326314
}
@@ -370,7 +358,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
370358
}
371359
})}
372360
{nextNode}
373-
</ul>
361+
</React.Fragment>
374362
);
375363
}
376364

@@ -380,7 +368,11 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
380368

381369
if (item === 'jump') {
382370
return (
383-
<div key="jump" className={getClassName(`${dPrefix}pagination__item`)}>
371+
<div
372+
key="jump"
373+
className={`${dPrefix}pagination__jump`}
374+
style={{ marginRight: dCompose[dCompose.length - 1] === 'jump' ? 0 : undefined }}
375+
>
384376
{jumpNode}
385377
</div>
386378
);

‎packages/ui/src/components/spinner/Spinner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export function DSpinner(props: DSpinnerProps): JSX.Element | null {
113113
{checkNodeExist(children) ? (
114114
children
115115
) : (
116-
<DCustomIcon className={`${dPrefix}spinner__spinner`} viewBox="0 0 50 50">
116+
<DCustomIcon className={`${dPrefix}spinner__spinner-icon`} viewBox="0 0 50 50">
117117
<circle cx="25" cy="25" r="21" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round"></circle>
118118
</DCustomIcon>
119119
)}

‎packages/ui/src/components/textarea/Textarea.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ function Textarea(props: DTextareaProps, ref: React.ForwardedRef<DTextareaRef>):
103103
control: dFormControl,
104104
}}
105105
>
106-
{({ render: renderBaseDesign }) =>
107-
renderBaseDesign(
108-
<DBaseInput dFormControl={dFormControl} dLabelFor>
109-
{({ render: renderBaseInput }) =>
106+
{({ render: renderBaseDesign }) => (
107+
<DBaseInput dFormControl={dFormControl} dLabelFor>
108+
{({ render: renderBaseInput }) =>
109+
renderBaseDesign(
110110
renderBaseInput(
111111
<textarea
112112
{...restProps}
@@ -131,10 +131,10 @@ function Textarea(props: DTextareaProps, ref: React.ForwardedRef<DTextareaRef>):
131131
}}
132132
/>
133133
)
134-
}
135-
</DBaseInput>
136-
)
137-
}
134+
)
135+
}
136+
</DBaseInput>
137+
)}
138138
</DBaseDesign>
139139
{dShowCount !== false && (
140140
<div className={`${dPrefix}textarea__count`}>

‎packages/ui/src/styles/components/accordion.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'mixins/overwrite';
2+
13
@include b(accordion) {
24
@include e(item) {
35
border-top: 1px solid var(--#{$d-prefix}color-border);
@@ -34,8 +36,10 @@
3436
}
3537

3638
@include e(item-arrow) {
37-
font-size: 0.9em;
38-
transition: transform var(--#{$d-prefix}animation-duration-base) linear;
39+
@include overwrite-component(icon) {
40+
font-size: 0.9em;
41+
transition: transform var(--#{$d-prefix}animation-duration-base) linear;
42+
}
3943
}
4044

4145
@include e(item-region) {

0 commit comments

Comments
 (0)