Skip to content

Commit 2347396

Browse files
mumiaomumiao
committed
feat: resolve conflicts
2 parents 939f16e + 2768fef commit 2347396

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+542
-418
lines changed

‎.stylelintrc.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
2-
"extends": "stylelint-config-sass-guidelines",
2+
"extends": ["stylelint-config-sass-guidelines"],
33
"rules": {
44
"indentation": 4,
55
"scss/dollar-variable-pattern": null,
66
"max-nesting-depth": 4,
77
"no-missing-end-of-source-newline": null
8-
}
8+
},
9+
"ignoreFiles": ["coverage/**/*.css"]
910
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"check-types": "tsc",
1212
"build": "tsc --project tsconfig.build.json",
1313
"eslint": "eslint ./src/**/*.ts ./src/**/*.tsx",
14-
"stylelint": "stylelint ./src/**/*.scss",
14+
"stylelint": "stylelint **/*.{css,scss,sass}",
1515
"prettier": "prettier --ignore-unknown .",
1616
"release": "standard-version",
1717
"web": "webpack serve --env prod --config ./build/web.js"

‎src/components/actionbar/index.tsx

+21-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import './style.scss';
22
import * as React from 'react';
3-
import { prefixClaName, classNames } from 'mo/common/className';
3+
import {
4+
prefixClaName,
5+
classNames,
6+
getBEMElement,
7+
getBEMModifier,
8+
} from 'mo/common/className';
49

510
export interface IActionBarItem<T = any> {
611
id: string;
@@ -19,7 +24,14 @@ export interface IActionBar<T = any> {
1924
onClick?(event: React.MouseEvent, item: IActionBarItem): void;
2025
}
2126

22-
const rootClassName = 'action-bar';
27+
const defaultActionBarClassName = prefixClaName('action-bar');
28+
const containerClassName = getBEMElement(
29+
defaultActionBarClassName,
30+
'container'
31+
);
32+
const itemClassName = getBEMElement(defaultActionBarClassName, 'item');
33+
const itemDisabledClassName = getBEMModifier(itemClassName, 'disabled');
34+
const labelClassName = getBEMElement(defaultActionBarClassName, 'label');
2335

2436
export function ActionBarItem(props: IActionBarItem) {
2537
const { id, title, name, onClick } = props;
@@ -28,16 +40,16 @@ export function ActionBarItem(props: IActionBarItem) {
2840
onClick(e, props);
2941
}
3042
};
31-
const disabled = props.disabled ? 'disabled' : null;
43+
const disabled = props.disabled ? itemDisabledClassName : null;
3244
const claNames = classNames(
33-
'action-label',
45+
labelClassName,
3446
'codicon',
3547
props.iconName,
3648
disabled
3749
);
3850
return (
3951
<li
40-
className={classNames('action-item', disabled)}
52+
className={classNames(itemClassName, disabled)}
4153
onClick={click}
4254
key={`${id}`}
4355
>
@@ -49,19 +61,17 @@ export function ActionBarItem(props: IActionBarItem) {
4961
}
5062

5163
export default function ActionBar<T = any>(props: IActionBar<T>) {
52-
const { data = [], onClick, className, ...others } = props;
64+
const { data = [], onClick, className, ...custom } = props;
5365

54-
const claNames = classNames(prefixClaName(rootClassName), className);
66+
const claNames = classNames(defaultActionBarClassName, className);
5567

5668
const items = data.map((item: IActionBarItem<T>) => (
5769
<ActionBarItem key={item.id} onClick={onClick} {...item} />
5870
));
5971

6072
return (
61-
<div className={claNames} {...others}>
62-
<ul className={prefixClaName('container', rootClassName)}>
63-
{items}
64-
</ul>
73+
<div className={claNames} {...custom}>
74+
<ul className={containerClassName}>{items}</ul>
6575
</div>
6676
);
6777
}

‎src/components/actionbar/style.scss

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,32 @@
11
@import 'mo/style/common';
2-
$actionBar: 'action-bar';
32

4-
#{prefix($actionBar)} {
3+
#{$actionBar} {
54
overflow: hidden;
65
text-align: right;
76
white-space: nowrap;
87

9-
.#{$actionBar}-container {
8+
&__container {
109
display: flex;
1110
justify-content: flex-end;
1211
margin: 0 auto;
1312
padding: 0;
1413
width: 100%;
1514
}
1615

17-
.action-item {
16+
&__item {
1817
cursor: pointer;
1918
display: inline-block;
2019
position: relative;
2120
transition: transform 50ms ease;
21+
22+
&--disabled {
23+
cursor: default;
24+
opacity: 0.4;
25+
pointer-events: none;
26+
}
2227
}
2328

24-
.action-label {
29+
&__label {
2530
align-items: center;
2631
background-position: center center;
2732
background-repeat: no-repeat;
@@ -33,14 +38,10 @@ $actionBar: 'action-bar';
3338
text-decoration: none;
3439
}
3540

36-
.action-label.codicon {
37-
color: inherit;
38-
line-height: 35px;
39-
}
40-
41-
.disabled {
42-
cursor: default;
43-
opacity: 0.4;
44-
pointer-events: none;
41+
#{$actionBar}__label {
42+
&.codicon {
43+
color: inherit;
44+
line-height: 35px;
45+
}
4546
}
4647
}

‎src/components/button/index.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import './style.scss';
22
import * as React from 'react';
3-
import { classNames, prefixClaName } from 'mo/common/className';
3+
import { classNames, getBEMModifier, prefixClaName } from 'mo/common/className';
44

55
type BtnSizeType = 'normal' | 'large';
66
export interface IButton extends React.ComponentProps<'a'> {
@@ -9,21 +9,29 @@ export interface IButton extends React.ComponentProps<'a'> {
99
onClick?(event: React.MouseEvent): void;
1010
}
1111

12-
export const defaultButtonClassName = 'btn';
12+
const defaultButtonClassName = prefixClaName('btn');
13+
const normalButtonClassName = getBEMModifier(defaultButtonClassName, 'normal');
14+
const largeButtonClassName = getBEMModifier(defaultButtonClassName, 'large');
1315

1416
export function Button(props: React.PropsWithChildren<IButton>) {
15-
const { className, children, size = 'normal', onClick, ...others } = props;
17+
const { className, children, size = 'normal', onClick, ...custom } = props;
18+
1619
const disabled = props.disabled ? 'disabled' : null;
1720
const click = (e: React.MouseEvent) => onClick?.(e);
21+
22+
const sizeClassName =
23+
size === 'large' ? largeButtonClassName : normalButtonClassName;
24+
25+
1826
const claNames = classNames(
19-
prefixClaName(defaultButtonClassName),
20-
size,
27+
defaultButtonClassName,
28+
sizeClassName,
2129
className,
2230
disabled
2331
);
2432

2533
return (
26-
<a className={claNames} {...others} onClick={click}>
34+
<a className={claNames} {...custom} onClick={click}>
2735
{children}
2836
</a>
2937
);

‎src/components/button/style.scss

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import 'mo/style/common';
2-
$btn: 'btn';
32

4-
#{prefix($btn)} {
3+
#{$btn} {
54
align-items: center;
65
border: 0;
76
box-sizing: border-box;
@@ -13,11 +12,11 @@ $btn: 'btn';
1312
padding: 4px 10px;
1413
text-align: center;
1514

16-
&.normal {
15+
&--normal {
1716
padding: 4px 15px;
1817
}
1918

20-
&.large {
19+
&--large {
2120
font-size: 16px;
2221
padding: 8px 15px;
2322
}

‎src/components/checkbox/style.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import 'mo/style/common';
2-
$checkbox: prefix('checkbox');
32

43
#{$checkbox} {
54
user-select: none;

‎src/components/collapse/style.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
@import 'mo/style/common';
2-
$collapse: 'collapse';
32

43
@mixin header_border {
54
border: 1px solid rgba(97, 97, 97, 0.19);
65
}
76

8-
#{prefix($collapse)} {
7+
#{$collapse} {
98
font-size: 13px;
109

1110
.content-box__padding {
1211
padding: 10px;
1312
}
1413

14+
/* stylelint-disable */
1515
.rc-collapse {
1616
background-color: inherit;
1717
}

‎src/components/contextMenu/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import { HTMLElementType } from 'mo/common/dom';
33
import { useContextView } from 'mo/components/contextview';
4-
import './style.scss';
54

65
export interface IContextMenu {
76
anchor: HTMLElementType;

‎src/components/contextMenu/style.scss

-5
This file was deleted.

‎src/components/contextview/index.tsx

+20-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
import './style.scss';
12
import * as React from 'react';
23
import * as ReactDOM from 'react-dom';
3-
import { prefixClaName, classNames } from 'mo/common/className';
4+
import {
5+
prefixClaName,
6+
classNames,
7+
getBEMElement,
8+
getBEMModifier,
9+
} from 'mo/common/className';
410
import {
511
getRelativePosition,
612
select,
713
HTMLElementType,
814
IPosition,
915
} from 'mo/common/dom';
10-
import './style.scss';
1116
import { Utils } from 'dt-utils/lib';
1217
import { EventEmitter } from 'mo/common/event';
1318

@@ -32,15 +37,18 @@ enum ContextViewEvent {
3237
}
3338

3439
const contextViewClass = prefixClaName('context-view');
35-
const contentClass = '.context-view-content';
36-
const emitter = new EventEmitter();
40+
const contentClassName = getBEMElement(contextViewClass, 'content');
41+
const blockClassName = getBEMElement(contextViewClass, 'block');
42+
const shadowClassName = getBEMModifier(contextViewClass, 'shadow');
43+
44+
const Emitter = new EventEmitter();
3745

3846
export function useContextView(props?: IContextViewProps): IContextView {
3947
const claName = classNames(contextViewClass, 'fade-in');
4048
let contextView: HTMLElementType = select('.' + contextViewClass); // Singleton contextView dom
4149

4250
const show = (anchorPos: IPosition, render?: () => React.ReactNode) => {
43-
const content = select(contentClass);
51+
const content = select('.' + contentClassName);
4452
const renderContent = render || props?.render;
4553
if (!renderContent)
4654
throw Error(
@@ -61,13 +69,13 @@ export function useContextView(props?: IContextViewProps): IContextView {
6169
const hide = () => {
6270
if (contextView) {
6371
contextView.style.visibility = 'hidden';
64-
ReactDOM.unmountComponentAtNode(select(contentClass)!);
65-
emitter.emit(ContextViewEvent.onHide);
72+
ReactDOM.unmountComponentAtNode(select('.' + contentClassName)!);
73+
Emitter.emit(ContextViewEvent.onHide);
6674
}
6775
};
6876

6977
const onHide = (callback: Function) => {
70-
emitter.subscribe(ContextViewEvent.onHide, callback);
78+
Emitter.subscribe(ContextViewEvent.onHide, callback);
7179
};
7280

7381
const onMaskClick = (e: React.MouseEvent) => {
@@ -77,7 +85,7 @@ export function useContextView(props?: IContextViewProps): IContextView {
7785
};
7886

7987
const dispose = () => {
80-
emitter.unsubscribe(ContextViewEvent.onHide);
88+
Emitter.unsubscribe(ContextViewEvent.onHide);
8189
};
8290

8391
if (!contextView) {
@@ -93,17 +101,17 @@ export function useContextView(props?: IContextViewProps): IContextView {
93101
} else {
94102
root.appendChild(contextView);
95103
}
96-
const shadowClass = !props?.shadowOutline ? '' : 'context-view--shadow';
104+
const shadowClass = !props?.shadowOutline ? '' : shadowClassName;
97105

98106
ReactDOM.render(
99107
<>
100108
<div
101-
className="context-view-block"
109+
className={blockClassName}
102110
onClick={onMaskClick}
103111
onContextMenu={onMaskClick}
104112
></div>
105113
<div
106-
className={classNames('context-view-content', shadowClass)}
114+
className={classNames(contentClassName, shadowClass)}
107115
></div>
108116
</>,
109117
contextView

‎src/components/contextview/style.scss

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
@import 'mo/style/common';
2-
$name: 'context-view';
32

4-
#{prefix($name)} {
3+
#{$name} {
54
border: 0;
65
outline: 0;
76
position: absolute;
87
width: initial;
98
z-index: 2500;
109

11-
.#{$name}-block {
10+
&__block {
1211
bottom: 0;
1312
height: 100%;
1413
left: 0;
@@ -19,12 +18,12 @@ $name: 'context-view';
1918
width: 100%;
2019
z-index: -1;
2120
}
22-
}
2321

24-
.context-view-content {
25-
overflow: hidden;
26-
}
22+
&__content {
23+
overflow: hidden;
24+
}
2725

28-
.context-view--shadow {
29-
box-shadow: rgb(0, 0, 0) 0 2px 4px;
26+
&--shadow {
27+
box-shadow: rgb(0, 0, 0) 0 2px 4px;
28+
}
3029
}

‎src/components/dialog/style.scss

-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
@import 'mo/style/common';
2-
$modal: 'modal';
3-
$confirm: 'confirm';
42

53
#{prefix($modal)} {
64
box-sizing: border-box;

0 commit comments

Comments
 (0)