Merge pull request #330 from 2betop/master

一些小修改
2024-12-05 05:18:34 +08:00 · 2019-11-06 17:47:14 +08:00 · 2019-11-06 17:47:14 +08:00 · 75b4f307b5
commit 75b4f307b5
parent a690442d3a ba123607dc
12 changed files with 108 additions and 61 deletions
--- a/scss/components/_color.scss
+++ b/scss/components/_color.scss
@ -0,0 +1,18 @@
+.#{$ns}ColorField {
+    display: inline-block;
+
+    &-previewIcon {
+        display: inline-block;
+        vertical-align: middle;
+        width: px2rem(16px);
+        height: px2rem(16px);
+        box-shadow: $boxShadowSm;
+        background-color: #ccc;
+    }
+
+    &-value {
+        display: inline-block;
+        margin-left: 10px;
+        vertical-align: middle;
+    }
+}
--- a/scss/components/_toast.scss
+++ b/scss/components/_toast.scss
@ -1,4 +1,5 @@
@keyframes bounceIn {
+
    from,
    20%,
    40%,
@ -58,13 +59,14 @@
        pointer-events: none;
        position: fixed;
        z-index: $zindex-toast;
+        width: 100%;
+        height: 100%;
    }

    width: $Toast-width;
    pointer-events: auto;
    margin-bottom: $gap-xs;
-    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
-        ($Toast-paddingX + $Toast-paddingL);
+    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL);
    box-shadow: $Toast-box-shadow;
    border-radius: $Toast-borderRadius;
    border: $Toast-border-width solid;
@ -72,25 +74,24 @@
    position: relative;
    opacity: $Toast-opacity;
    cursor: pointer;
+    opacity: 0;
+    transform: translateZ(0);

-    &:hover {
+    &.in,
+    &.out {
+        animation-fill-mode: both;
+        animation-duration: 0.75s;
        opacity: 1;
    }

    &.in {
-        animation-duration: 0.75s;
        animation-name: bounceIn;
    }

    &.out {
-        animation-duration: 0.75s;
        animation-name: bounceOut;
    }

-    &.hidden {
-        display: none;
-    }
-
    &-title {
        display: $Toast-display;
        font-size: $fontSizeMd;
@ -136,8 +137,7 @@
        color: $Toast--info-color;
        border-color: $Toast--info-borderColor;
        background-color: $Toast--info-bgColor;
-        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
-            ($Toast-paddingX + $Toast--info-paddingL);
+        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL);

        &::before {
            content: $Toast--info-icon;
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@ -502,6 +502,7 @@ $Card-actions-onChecked-onHover-bg: $white;
@import "../components/button-group";
@import "../components/dropdown";
@import "../components/collapse";
+@import "../components/color";
@import "../components/wizard";
@import "../components/crud";
@import "../components/table";
--- a/scss/themes/dark.scss
+++ b/scss/themes/dark.scss
@ -184,6 +184,7 @@ pre {
@import '../components/button-group';
@import '../components/dropdown';
@import '../components/collapse';
+@import "../components/color";
@import '../components/wizard';
@import '../components/crud';
@import '../components/table';
--- a/scss/themes/default.scss
+++ b/scss/themes/default.scss
@ -49,6 +49,7 @@ $Form-input-borderColor: #cfdadd;
@import "../components/button-group";
@import "../components/dropdown";
@import "../components/collapse";
+@import "../components/color";
@import "../components/wizard";
@import "../components/crud";
@import "../components/table";
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@ -40,8 +40,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
        overlay: true
    };

-    contentDom: any;
-
    componentDidMount() {
        if (this.props.show) {
            this.handleEntered();
@ -54,7 +52,6 @@ export class Modal extends React.Component<ModalProps, ModalState> {
        }
    }

-    contentRef = (ref: any) => (this.contentDom = ref);
    handleEntered = () => {
        const onEntered = this.props.onEntered;
        document.body.classList.add(`is-modalOpened`);
@ -91,15 +88,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                    onExited={this.handleExited}
                    onEntered={this.handleEntered}
                >
-                    {(status: string) => {
-                        if (status === ENTERING || status === EXITING) {
-                            // force reflow
-                            // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
-                            // 否则看不到动画。
-                            this.contentDom.offsetWidth;
-                        }
-
-                        return (
+                    {(status: string) => (
                        <div
                            ref={this.modalRef}
                            role="dialog"
@ -112,12 +101,9 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                            )}
                        >
                            {overlay ? <div className={cx(`${ns}Modal-overlay`, fadeStyles[status])} /> : null}
-                                <div ref={this.contentRef} className={cx(`${ns}Modal-content`, fadeStyles[status])}>
-                                    {children}
+                            <div className={cx(`${ns}Modal-content`, fadeStyles[status])}>{children}</div>
                        </div>
-                            </div>
-                        );
-                    }}
+                    )}
                </Transition>
            </Portal>
        );
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@ -322,7 +322,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
    }

    removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
-        const {onChange, simpleValue} = this.props;
+        const {onChange, simpleValue, disabled} = this.props;
+        if (disabled) {
+            return;
+        }
        let {selection: value} = this.state;

        e && e.stopPropagation();
@ -415,7 +418,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
    }

    renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
-        const {multiple, placeholder, classPrefix: ns, labelField, searchable, creatable} = this.props;
+        const {multiple, placeholder, classPrefix: ns, labelField, searchable, creatable, disabled} = this.props;

        const selection = this.state.selection;

@ -434,7 +437,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
        return selection.map((item, index) =>
            multiple ? (
                <div className={`${ns}Select-value`} key={index}>
-                    <span className={`${ns}Select-valueIcon`} onClick={this.removeItem.bind(this, index)}>
+                    <span className={`${ns}Select-valueIcon ${disabled ? 'is-disabled' : ''}`} onClick={this.removeItem.bind(this, index)}>
                        ×
                    </span>
                    <span className={`${ns}Select-valueLabel`}>{item[labelField || 'label']}</span>
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@ -15,9 +15,8 @@ const fadeStyles: {
    [propName: string]: string;
 } = {
    [ENTERING]: 'in',
-    [ENTERED]: '',
-    [EXITING]: 'out',
-    [EXITED]: 'hidden'
+    [ENTERED]: 'in',
+    [EXITING]: 'out'
 };

 let toastRef: any = null;
@ -192,12 +191,12 @@ export class ToastMessage extends React.Component<ToastMessageProps> {
        visible: false
    };

-    content: React.RefObject<HTMLDivElement>;
-    timer: number;
+    // content: React.RefObject<HTMLDivElement>;
+    timer: NodeJS.Timeout;
    constructor(props: ToastMessageProps) {
        super(props);

-        this.content = React.createRef();
+        // this.content = React.createRef();
        this.handleMouseEnter = this.handleMouseEnter.bind(this);
        this.handleMouseLeave = this.handleMouseLeave.bind(this);
        this.handleEntered = this.handleEntered.bind(this);
@ -247,16 +246,16 @@ export class ToastMessage extends React.Component<ToastMessageProps> {
                onExited={onDismiss}
            >
                {(status: string) => {
-                    if (status === ENTERING) {
-                        // force reflow
-                        // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
-                        // 否则看不到动画。
-                        this.content.current && this.content.current.offsetWidth;
-                    }
+                    // if (status === ENTERING) {
+                    //     // force reflow
+                    //     // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
+                    //     // 否则看不到动画。
+                    //     this.content.current && this.content.current.offsetWidth;
+                    // }

                    return (
                        <div
-                            ref={this.content}
+                            // ref={this.content}
                            className={cx(`${ns}Toast ${ns}Toast--${level}`, fadeStyles[status])}
                            onMouseEnter={this.handleMouseEnter}
                            onMouseLeave={this.handleMouseLeave}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -64,6 +64,7 @@ import './renderers/ButtonGroup';
 import './renderers/ButtonToolbar';
 import './renderers/DropDownButton';
 import './renderers/Collapse';
+import './renderers/Color';
 import './renderers/CRUD';
 import './renderers/Pagination';
 import './renderers/Cards';
--- a/src/renderers/Color.tsx
+++ b/src/renderers/Color.tsx
@ -0,0 +1,38 @@
+/**
+ * @file 用来展示颜色块。
+ */
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {resolveVariableAndFilter} from '../utils/tpl-builtin';
+
+export interface ColorProps extends RendererProps {
+    className: string;
+    defaultColor: string;
+    showValue: boolean;
+}
+
+export class ColorField extends React.Component<ColorProps, object> {
+    static defaultProps = {
+        className: '',
+        defaultColor: '#ccc',
+        showValue: true
+    };
+
+    render() {
+        const {className, data, classnames: cx, name, value, defaultColor, showValue} = this.props;
+        const color = value || (name ? resolveVariableAndFilter(name, data, '| raw') : null);
+
+        return (
+            <div className={cx('ColorField', className)}>
+                <i className={cx('ColorField-previewIcon')} style={{backgroundColor: color || defaultColor}} />
+                {showValue ? <span className={cx('ColorField-value')}>{color}</span> : null}
+            </div>
+        );
+    }
+}
+
+@Renderer({
+    test: /(^|\/)color$/,
+    name: 'color'
+})
+export class ColorFieldRenderer extends ColorField {}
--- a/src/renderers/Form/DiffEditor.tsx
+++ b/src/renderers/Form/DiffEditor.tsx
@ -187,7 +187,6 @@ export class DiffEditorControlRenderer extends DiffEditor {

@Renderer({
    test: /(^|\/)diff-editor$/,
-    sizeMutable: false,
    name: 'diff-editor'
 })
 export class DiffEditorRenderer extends DiffEditor {
--- a/src/renderers/Form/File.tsx
+++ b/src/renderers/Form/File.tsx
@ -816,7 +816,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                    ref={this.dropzone}
                    onDrop={this.handleDrop}
                    onDropRejected={this.handleDropRejected}
-                    accept={accept}
+                    accept={accept === '*' ? '' : accept}
                    multiple={multiple}
                >
                    {({getRootProps, getInputProps, isDragActive}) => (