feat: sync dev code

sync dev code

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist
 coverage
 .DS_Store
-storybook-static
+storybook-static
+.yarn-error.log

.gitlab-ci.yml

@@ -17,7 +17,7 @@ static-checking:
     stage: static-checking
     script:
         - yarn eslint
-        - yarn prettier
+        - yarn prettier --check # If you want autofix --write option
         - yarn stylelint
     only:
         - merge_requests

.prettierignore

@@ -3,4 +3,5 @@ dist
 .history
 node_modules
 yarn.lock
-coverage
+coverage
+storybook-static

.yarnclean

@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md

package.json

@@ -12,7 +12,7 @@
         "build": "tsc --project tsconfig.build.json",
         "eslint": "eslint ./src/**/*.ts ./src/**/*.tsx",
         "stylelint": "stylelint ./src/**/*.scss",
-        "prettier": "prettier --ignore-unknown --write . ",
+        "prettier": "prettier --ignore-unknown .",
         "release": "standard-version",
         "web": "webpack serve --env prod --config ./build/web.js"
     },
@@ -32,7 +32,9 @@
         "loadsh": "^0.0.4",
         "monaco-editor": "^0.21.2",
         "rc-collapse": "^2.0.1",
+        "rc-textarea": "^0.3.1",
         "rc-tree": "^3.10.0",
+        "rc-util": "^5.5.0",
         "react": "^16.13.1",
         "react-dnd": "^9.3.4",
         "react-dnd-html5-backend": "^9.3.4",
@@ -46,12 +48,12 @@
     "devDependencies": {
         "@commitlint/cli": "^11.0.0",
         "@commitlint/config-conventional": "^11.0.0",
-        "@storybook/addon-actions": "6.1.2",
-        "@storybook/addon-knobs": "^6.1.2",
-        "@storybook/addon-links": "6.1.2",
+        "@storybook/addon-actions": "6.1.10",
+        "@storybook/addon-knobs": "^6.1.10",
+        "@storybook/addon-links": "6.1.10",
         "@storybook/addon-notes": "^5.3.21",
-        "@storybook/addons": "6.1.2",
-        "@storybook/react": "6.1.2",
+        "@storybook/addons": "6.1.10",
+        "@storybook/react": "6.1.10",
         "@types/jest": "^26.0.0",
         "@typescript-eslint/eslint-plugin": "^3.1.0",
         "@typescript-eslint/parser": "^3.1.0",
@@ -73,20 +75,20 @@
         "stylelint-config-sass-guidelines": "^7.1.0",
         "ts-jest": "^26.1.0",
         "ts-loader": "^7.0.5",
-        "typescript": "^3.9.5",
+        "typescript": "^4.0.5",
         "webpack-cli": "^4.0.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^5.2.0"
     },
     "husky": {
         "hooks": {
             "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-            "pre-push": "prettier --ignore-unknown --check ."
+            "pre-push": "yarn prettier --write"
         }
     },
     "config": {
         "commitizen": {
             "path": "cz-conventional-changelog"
         }
     }
-}
+}

src/common/className.ts

@@ -1,3 +1,4 @@
+import { isEmpty } from 'loadsh';
 import { APP_PREFIX } from 'mo/common/const';
 /**
  * This function help you prefix a css class name, default is molecule.
@@ -10,6 +11,47 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
     return name ? `${prefix}-${name}` : '';
 }
 
-export function classNames(...names) {
-    return names.filter((name) => !!name).join(' ');
+export function classNames(...args) {
+    if (isEmpty(args)) return;
+    const classList: string[] = [];
+    for (const arg of args) {
+        if (!arg) continue;
+        const argType = typeof arg;
+        if (argType === 'string' || argType === 'number') {
+            classList.push(`${arg}`);
+            continue;
+        }
+        if (argType === 'object') {
+            if (arg.toString !== Object.prototype.toString) {
+                classList.push(arg.toString());
+                continue;
+            }
+            for (const key in arg) {
+                if (Object.hasOwnProperty.call(arg, key) && arg[key]) {
+                    classList.push(key);
+                }
+            }
+        }
+    }
+    return classList.join(' ');
+}
+/**
+ * Element names may consist of Latin letters, digits, dashes and underscores.
+ * CSS class is formed as block name plus two underscores plus element name: .block__elem
+ * @param block
+ * @param element
+ */
+export function getBEMElement(block: string, element: string) {
+    return `${block}__${element}`;
+}
+
+/**
+ * CSS class is formed as block’s or element’s name plus two dashes:
+ * .block--mod or .block__elem--mod and .block--color-black with .block--color-red.
+ * Spaces in complicated modifiers are replaced by dash.
+ * @param blockOrElement
+ * @param modifier
+ */
+export function getBEMModifier(blockOrElement: string, modifier: string) {
+    return `${blockOrElement}--${modifier}`;
 }

src/common/dom.ts

@@ -126,3 +126,7 @@ export function getPositionByPlacement(
     console.log('getPositionByPlacement', x, y);
     return { x, y };
 }
+
+export function getAttr(domElement: HTMLElement, attr) {
+    return domElement.getAttribute(attr) || '';
+}

src/common/event/eventEmitter.ts

@@ -21,8 +21,15 @@ export class EventEmitter {
         }
     }
 
-    // TODO
-    public unsubscribe() {}
+    public unsubscribe(name: string | string[]) {
+        if (Array.isArray(name)) {
+            name.forEach((key: string) => {
+                this._events.delete(key);
+            });
+        } else {
+            this._events.delete(name);
+        }
+    }
 
     public assignEvent<T>(name: string, callback: Function) {
         const event = this._events.get(name);

src/common/keyCodes.ts

@@ -0,0 +1,3 @@
+export const enum KeyCodes {
+    ENTER = 'Enter',
+}

src/components/checkbox/checkbox.tsx

@@ -0,0 +1,43 @@
+import './style.scss';
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
+
+export interface ICheckbox extends ComponentProps<any> {
+    id: string;
+    value?: string;
+    children?: ReactNode;
+    onChange?(e: React.ChangeEvent, options?: ICheckbox): void;
+}
+
+export const checkboxClassName = prefixClaName('checkbox');
+const checkboxLabelClassName = getBEMElement(checkboxClassName, 'label');
+const checkboxInputClassName = getBEMElement(checkboxClassName, 'input');
+
+export function Checkbox(props: ICheckbox) {
+    const { className, id, children, value, onChange, ...custom } = props;
+
+    const claNames = classNames(checkboxClassName, className);
+
+    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e, { id, value: e.target.value });
+    };
+
+    return (
+        <div className={claNames} {...(custom as any)}>
+            <input
+                id={id}
+                type="checkbox"
+                className={checkboxInputClassName}
+                value={value}
+                onChange={handleCheckboxChange}
+            ></input>
+            <label
+                htmlFor={id}
+                className={classNames(checkboxLabelClassName, 'codicon')}
+            >
+                {children}
+            </label>
+        </div>
+    );
+}

src/components/checkbox/index.tsx

@@ -0,0 +1 @@
+export * from './checkbox';

src/components/checkbox/style.scss

@@ -0,0 +1,44 @@
+@import 'mo/style/common';
+$checkbox: prefix('checkbox');
+
+#{$checkbox} {
+    user-select: none;
+
+    &__input {
+        height: 0;
+        visibility: hidden;
+        width: 0;
+
+        &[type='checkbox']:checked + label::before {
+            content: '\eab2';
+        }
+    }
+
+    &__label {
+        cursor: pointer;
+        outline: none;
+        padding-left: 26px;
+        position: relative;
+
+        &::before {
+            border: 1px solid transparent;
+            border-radius: 3px;
+            box-sizing: border-box;
+            content: ' ';
+            display: inline-block;
+            font: normal normal normal 16px/1 codicon;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            height: 18px;
+            left: 0;
+            outline: 1px solid transparent;
+            position: absolute;
+            text-align: center;
+            text-decoration: none;
+            text-rendering: auto;
+            top: 0;
+            user-select: none;
+            width: 18px;
+        }
+    }
+}

src/components/contextview/index.tsx

@@ -9,19 +9,31 @@ import {
 } from 'mo/common/dom';
 import './style.scss';
 import { Utils } from 'dt-utils/lib';
+import { EventEmitter } from 'mo/common/event';
 
 export interface IContextViewProps {
+    /**
+     * Default true
+     */
+    shadowOutline?: boolean;
     render?: () => React.ReactNode;
 }
 
 export interface IContextView {
     view: HTMLElementType;
     show(anchorPos: IPosition, render?: () => React.ReactNode): void;
     hide(): void;
+    onHide(callback?: Function): void;
+    dispose(): void;
+}
+
+enum ContextViewEvent {
+    onHide = 'onHide',
 }
 
 const contextViewClass = prefixClaName('context-view');
 const contentClass = '.context-view-content';
+const emitter = new EventEmitter();
 
 export function useContextView(props?: IContextViewProps): IContextView {
     const claName = classNames(contextViewClass, 'fade-in');
@@ -50,28 +62,38 @@ export function useContextView(props?: IContextViewProps): IContextView {
         if (contextView) {
             contextView.style.visibility = 'hidden';
             ReactDOM.unmountComponentAtNode(select(contentClass)!);
+            emitter.emit(ContextViewEvent.onHide);
         }
     };
 
+    const onHide = (callback: Function) => {
+        emitter.subscribe(ContextViewEvent.onHide, callback);
+    };
+
     const onMaskClick = (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
         hide();
     };
 
+    const dispose = () => {
+        emitter.unsubscribe(ContextViewEvent.onHide);
+    };
+
     if (!contextView) {
         contextView = document.createElement('div');
         contextView.className = classNames(
             claName,
             Utils.isMacOs() ? 'mac' : null
-        );
+        )!;
         contextView.style.visibility = 'hidden';
         const root = document.getElementById('molecule');
         if (!root) {
             document.body.appendChild(contextView);
         } else {
             root.appendChild(contextView);
         }
+        const shadowClass = !props?.shadowOutline ? '' : 'context-view--shadow';
 
         ReactDOM.render(
             <>
@@ -80,11 +102,13 @@ export function useContextView(props?: IContextViewProps): IContextView {
                     onClick={onMaskClick}
                     onContextMenu={onMaskClick}
                 ></div>
-                <div className="context-view-content"></div>
+                <div
+                    className={classNames('context-view-content', shadowClass)}
+                ></div>
             </>,
             contextView
         );
     }
 
-    return { view: contextView, show, hide };
+    return { view: contextView, show, hide, onHide, dispose };
 }