feat: resolve conflicts

DTStack · Dec 10, 2020 · 2347396 · 2347396
2 parents 939f16e + 2768fef
commit 2347396
Show file tree

Hide file tree

Showing 56 changed files with 542 additions and 418 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,9 +1,10 @@
 {
-    "extends": "stylelint-config-sass-guidelines",
+    "extends": ["stylelint-config-sass-guidelines"],
     "rules": {
         "indentation": 4,
         "scss/dollar-variable-pattern": null,
         "max-nesting-depth": 4,
         "no-missing-end-of-source-newline": null
-    }
+    },
+    "ignoreFiles": ["coverage/**/*.css"]
 }
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
         "check-types": "tsc",
         "build": "tsc --project tsconfig.build.json",
         "eslint": "eslint ./src/**/*.ts ./src/**/*.tsx",
-        "stylelint": "stylelint ./src/**/*.scss",
+        "stylelint": "stylelint **/*.{css,scss,sass}",
         "prettier": "prettier --ignore-unknown .",
         "release": "standard-version",
         "web": "webpack serve --env prod --config ./build/web.js"

diff --git a/src/components/actionbar/index.tsx b/src/components/actionbar/index.tsx
@@ -1,6 +1,11 @@
 import './style.scss';
 import * as React from 'react';
-import { prefixClaName, classNames } from 'mo/common/className';
+import {
+    prefixClaName,
+    classNames,
+    getBEMElement,
+    getBEMModifier,
+} from 'mo/common/className';
 
 export interface IActionBarItem<T = any> {
     id: string;
@@ -19,7 +24,14 @@ export interface IActionBar<T = any> {
     onClick?(event: React.MouseEvent, item: IActionBarItem): void;
 }
 
-const rootClassName = 'action-bar';
+const defaultActionBarClassName = prefixClaName('action-bar');
+const containerClassName = getBEMElement(
+    defaultActionBarClassName,
+    'container'
+);
+const itemClassName = getBEMElement(defaultActionBarClassName, 'item');
+const itemDisabledClassName = getBEMModifier(itemClassName, 'disabled');
+const labelClassName = getBEMElement(defaultActionBarClassName, 'label');
 
 export function ActionBarItem(props: IActionBarItem) {
     const { id, title, name, onClick } = props;
@@ -28,16 +40,16 @@ export function ActionBarItem(props: IActionBarItem) {
             onClick(e, props);
         }
     };
-    const disabled = props.disabled ? 'disabled' : null;
+    const disabled = props.disabled ? itemDisabledClassName : null;
     const claNames = classNames(
-        'action-label',
+        labelClassName,
         'codicon',
         props.iconName,
         disabled
     );
     return (
         <li
-            className={classNames('action-item', disabled)}
+            className={classNames(itemClassName, disabled)}
             onClick={click}
             key={`${id}`}
         >
@@ -49,19 +61,17 @@ export function ActionBarItem(props: IActionBarItem) {
 }
 
 export default function ActionBar<T = any>(props: IActionBar<T>) {
-    const { data = [], onClick, className, ...others } = props;
+    const { data = [], onClick, className, ...custom } = props;
 
-    const claNames = classNames(prefixClaName(rootClassName), className);
+    const claNames = classNames(defaultActionBarClassName, className);
 
     const items = data.map((item: IActionBarItem<T>) => (
         <ActionBarItem key={item.id} onClick={onClick} {...item} />
     ));
 
     return (
-        <div className={claNames} {...others}>
-            <ul className={prefixClaName('container', rootClassName)}>
-                {items}
-            </ul>
+        <div className={claNames} {...custom}>
+            <ul className={containerClassName}>{items}</ul>
         </div>
     );
 }
diff --git a/src/components/actionbar/style.scss b/src/components/actionbar/style.scss
@@ -1,27 +1,32 @@
 @import 'mo/style/common';
-$actionBar: 'action-bar';
 
-#{prefix($actionBar)} {
+#{$actionBar} {
     overflow: hidden;
     text-align: right;
     white-space: nowrap;
 
-    .#{$actionBar}-container {
+    &__container {
         display: flex;
         justify-content: flex-end;
         margin: 0 auto;
         padding: 0;
         width: 100%;
     }
 
-    .action-item {
+    &__item {
         cursor: pointer;
         display: inline-block;
         position: relative;
         transition: transform 50ms ease;
+
+        &--disabled {
+            cursor: default;
+            opacity: 0.4;
+            pointer-events: none;
+        }
     }
 
-    .action-label {
+    &__label {
         align-items: center;
         background-position: center center;
         background-repeat: no-repeat;
@@ -33,14 +38,10 @@ $actionBar: 'action-bar';
         text-decoration: none;
     }
 
-    .action-label.codicon {
-        color: inherit;
-        line-height: 35px;
-    }
-
-    .disabled {
-        cursor: default;
-        opacity: 0.4;
-        pointer-events: none;
+    #{$actionBar}__label {
+        &.codicon {
+            color: inherit;
+            line-height: 35px;
+        }
     }
 }
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -1,6 +1,6 @@
 import './style.scss';
 import * as React from 'react';
-import { classNames, prefixClaName } from 'mo/common/className';
+import { classNames, getBEMModifier, prefixClaName } from 'mo/common/className';
 
 type BtnSizeType = 'normal' | 'large';
 export interface IButton extends React.ComponentProps<'a'> {
@@ -9,21 +9,29 @@ export interface IButton extends React.ComponentProps<'a'> {
     onClick?(event: React.MouseEvent): void;
 }
 
-export const defaultButtonClassName = 'btn';
+const defaultButtonClassName = prefixClaName('btn');
+const normalButtonClassName = getBEMModifier(defaultButtonClassName, 'normal');
+const largeButtonClassName = getBEMModifier(defaultButtonClassName, 'large');
 
 export function Button(props: React.PropsWithChildren<IButton>) {
-    const { className, children, size = 'normal', onClick, ...others } = props;
+    const { className, children, size = 'normal', onClick, ...custom } = props;
+
     const disabled = props.disabled ? 'disabled' : null;
     const click = (e: React.MouseEvent) => onClick?.(e);
+
+    const sizeClassName =
+        size === 'large' ? largeButtonClassName : normalButtonClassName;
+
+
     const claNames = classNames(
-        prefixClaName(defaultButtonClassName),
-        size,
+        defaultButtonClassName,
+        sizeClassName,
         className,
         disabled
     );
 
     return (
-        <a className={claNames} {...others} onClick={click}>
+        <a className={claNames} {...custom} onClick={click}>
             {children}
         </a>
     );

diff --git a/src/components/button/style.scss b/src/components/button/style.scss
@@ -1,7 +1,6 @@
 @import 'mo/style/common';
-$btn: 'btn';
 
-#{prefix($btn)} {
+#{$btn} {
     align-items: center;
     border: 0;
     box-sizing: border-box;
@@ -13,11 +12,11 @@ $btn: 'btn';
     padding: 4px 10px;
     text-align: center;
 
-    &.normal {
+    &--normal {
         padding: 4px 15px;
     }
 
-    &.large {
+    &--large {
         font-size: 16px;
         padding: 8px 15px;
     }

diff --git a/src/components/checkbox/style.scss b/src/components/checkbox/style.scss
@@ -1,5 +1,4 @@
 @import 'mo/style/common';
-$checkbox: prefix('checkbox');
 
 #{$checkbox} {
     user-select: none;

diff --git a/src/components/collapse/style.scss b/src/components/collapse/style.scss
@@ -1,17 +1,17 @@
 @import 'mo/style/common';
-$collapse: 'collapse';
 
 @mixin header_border {
     border: 1px solid rgba(97, 97, 97, 0.19);
 }
 
-#{prefix($collapse)} {
+#{$collapse} {
     font-size: 13px;
 
     .content-box__padding {
         padding: 10px;
     }
 
+    /* stylelint-disable */
     .rc-collapse {
         background-color: inherit;
     }

diff --git a/src/components/contextMenu/index.tsx b/src/components/contextMenu/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { HTMLElementType } from 'mo/common/dom';
 import { useContextView } from 'mo/components/contextview';
-import './style.scss';
 
 export interface IContextMenu {
     anchor: HTMLElementType;

diff --git a/src/components/contextMenu/style.scss b/src/components/contextMenu/style.scss
diff --git a/src/components/contextview/index.tsx b/src/components/contextview/index.tsx
@@ -1,13 +1,18 @@
+import './style.scss';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { prefixClaName, classNames } from 'mo/common/className';
+import {
+    prefixClaName,
+    classNames,
+    getBEMElement,
+    getBEMModifier,
+} from 'mo/common/className';
 import {
     getRelativePosition,
     select,
     HTMLElementType,
     IPosition,
 } from 'mo/common/dom';
-import './style.scss';
 import { Utils } from 'dt-utils/lib';
 import { EventEmitter } from 'mo/common/event';
 
@@ -32,15 +37,18 @@ enum ContextViewEvent {
 }
 
 const contextViewClass = prefixClaName('context-view');
-const contentClass = '.context-view-content';
-const emitter = new EventEmitter();
+const contentClassName = getBEMElement(contextViewClass, 'content');
+const blockClassName = getBEMElement(contextViewClass, 'block');
+const shadowClassName = getBEMModifier(contextViewClass, 'shadow');
+
+const Emitter = new EventEmitter();
 
 export function useContextView(props?: IContextViewProps): IContextView {
     const claName = classNames(contextViewClass, 'fade-in');
     let contextView: HTMLElementType = select('.' + contextViewClass); // Singleton contextView dom
 
     const show = (anchorPos: IPosition, render?: () => React.ReactNode) => {
-        const content = select(contentClass);
+        const content = select('.' + contentClassName);
         const renderContent = render || props?.render;
         if (!renderContent)
             throw Error(
@@ -61,13 +69,13 @@ export function useContextView(props?: IContextViewProps): IContextView {
     const hide = () => {
         if (contextView) {
             contextView.style.visibility = 'hidden';
-            ReactDOM.unmountComponentAtNode(select(contentClass)!);
-            emitter.emit(ContextViewEvent.onHide);
+            ReactDOM.unmountComponentAtNode(select('.' + contentClassName)!);
+            Emitter.emit(ContextViewEvent.onHide);
         }
     };
 
     const onHide = (callback: Function) => {
-        emitter.subscribe(ContextViewEvent.onHide, callback);
+        Emitter.subscribe(ContextViewEvent.onHide, callback);
     };
 
     const onMaskClick = (e: React.MouseEvent) => {
@@ -77,7 +85,7 @@ export function useContextView(props?: IContextViewProps): IContextView {
     };
 
     const dispose = () => {
-        emitter.unsubscribe(ContextViewEvent.onHide);
+        Emitter.unsubscribe(ContextViewEvent.onHide);
     };
 
     if (!contextView) {
@@ -93,17 +101,17 @@ export function useContextView(props?: IContextViewProps): IContextView {
         } else {
             root.appendChild(contextView);
         }
-        const shadowClass = !props?.shadowOutline ? '' : 'context-view--shadow';
+        const shadowClass = !props?.shadowOutline ? '' : shadowClassName;
 
         ReactDOM.render(
             <>
                 <div
-                    className="context-view-block"
+                    className={blockClassName}
                     onClick={onMaskClick}
                     onContextMenu={onMaskClick}
                 ></div>
                 <div
-                    className={classNames('context-view-content', shadowClass)}
+                    className={classNames(contentClassName, shadowClass)}
                 ></div>
             </>,
             contextView

diff --git a/src/components/contextview/style.scss b/src/components/contextview/style.scss
@@ -1,14 +1,13 @@
 @import 'mo/style/common';
-$name: 'context-view';
 
-#{prefix($name)} {
+#{$name} {
     border: 0;
     outline: 0;
     position: absolute;
     width: initial;
     z-index: 2500;
 
-    .#{$name}-block {
+    &__block {
         bottom: 0;
         height: 100%;
         left: 0;
@@ -19,12 +18,12 @@ $name: 'context-view';
         width: 100%;
         z-index: -1;
     }
-}
 
-.context-view-content {
-    overflow: hidden;
-}
+    &__content {
+        overflow: hidden;
+    }
 
-.context-view--shadow {
-    box-shadow: rgb(0, 0, 0) 0 2px 4px;
+    &--shadow {
+        box-shadow: rgb(0, 0, 0) 0 2px 4px;
+    }
 }
diff --git a/src/components/dialog/style.scss b/src/components/dialog/style.scss
@@ -1,6 +1,4 @@
 @import 'mo/style/common';
-$modal: 'modal';
-$confirm: 'confirm';
 
 #{prefix($modal)} {
     box-sizing: border-box;