cloud-b2b 1.1.58 → 1.1.59

package/src/SuperTable2/SuperTableCell.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import Control from '../Control';
+import helper from "../helper";
+
+// 单元格的type只能取如下值：
+// 'text', 'number', select', 'date', 'search', 'readonly', 'textArea', 'selectSearch'
+
+const isInRegion = (target, {x, y}) => {
+    const {left, right, top, bottom} = target.getBoundingClientRect();
+    return !(x < left || x > right || y < top || y > bottom);
+};
+
+class SuperTableCell extends React.Component {
+    static propTypes = {
+        type: PropTypes.string.isRequired,
+        value: PropTypes.any,
+        options: PropTypes.array,
+        props: PropTypes.object,
+        onChange: PropTypes.func,
+        onSearch: PropTypes.func,
+        onBlur: PropTypes.func
+    };
+
+    onDateBlur = (value, event) => {
+        if (!isInRegion(event.target, global.mousePos)) {
+            this.props.onBlur();
+        }
+    };
+    onChange = (key, value) => {
+        const {onChange} = this.props;
+        if (onChange) {
+            onChange(key,value)
+        }
+    };
+    onOpenChange = (open) => {
+        if (!open) {
+            const targets = document.getElementsByClassName('ant-calendar-picker-container');
+            if (!isInRegion(targets[0], global.mousePos)) {
+                this.props.onBlur();
+            }
+        }
+    };
+
+    options = () => {
+        return this.props.options || this.props.typeRelated || [];
+    };
+
+    getPopupContainer = () => {
+        return ReactDOM.findDOMNode(this);
+    };
+
+    toTextComponent = (props) => {
+        return <Control {...props} />;
+    };
+
+    toTextAreaComponent = (props) => {
+        return <Control {...props} />;
+    };
+
+    toReadonlyComponent = (props) => {
+        return <Control {...props} />;
+    };
+
+    toNumberComponent = (props) => {
+        props.defaultValue = props.value;
+        delete props.value;
+        return <Control {...props}/>;
+    };
+
+    toDoubleNumberComponent = (props, cc) => {
+
+        props.defaultValue = props.value;
+        props.doubleKey = props.key;
+        props.doubleValue = helper.getObject(cc, props.key);
+        props.onChangeKey1 = this.onChange.bind(this, props.key[0])
+        props.onChangeKey2 = this.onChange.bind(this, props.key[1])
+        delete props.value;
+        return <Control {...props} />;
+    };
+    toDateComponent = (props) => {
+        //props.getCalendarContainer = this.getPopupContainer;
+        props.onBlur = this.onDateBlur;
+        props.onOpenChange = this.onOpenChange;
+        return <Control {...props}/>;
+    };
+
+    toSelectComponent = (props) => {
+        props.options = this.options();
+        props.dropdownMatchSelectWidth = false;
+        //props.getPopupContainer = this.getPopupContainer;
+        return <Control {...props} />;
+    };
+    toSearchComponent = (props) => {
+        props.options = this.options();
+        //props.getPopupContainer = this.getPopupContainer;
+        props.onSearch = this.props.onSearch;
+        props.dropdownMatchSelectWidth = false;
+        return <Control {...props} />;
+    };
+    toCascader = (props) => {
+        props.options = this.options() || [];
+        props.onSearch = this.props.onSearch;
+        props.loadData = this.props.onSearch;
+        return <Control {...props} />;
+    };
+    toSelectWriting = (props) => {
+        return <Control {...props} />;
+    };
+    toRadioGroup = (props) => {
+        console.log(props);
+        props.options = this.options();
+        return <Control {...props} />;
+    };
+    // 确保value的值为字符串(包含value和title的对象除外)
+    makeString = (value) => {
+        if (value === null || typeof value === 'undefined') {
+            return '';
+        } else if (typeof value === 'number') {
+            return String(value);
+        } else {
+            return value;
+        }
+    };
+    controlProps = ({type, value, props = {}}) => {
+        const {width = 100} = this.props;
+        (type === 'readonly') && (props = {});
+        return {
+            ...props, type, value:this.makeString(value),
+            size: 'small',
+            autoFocus: this.props.error,
+            style: {width: '100%', minWidth: width},
+            onBlur: this.props.onBlur,
+            onChange: this.props.onChange
+        };
+    };
+
+    render() {
+        const props = this.controlProps(this.props);
+        const className = this.props.error ? 'has-error' : '';
+        switch (this.props.type) {
+            case "text":
+                return <div className={className}>{this.toTextComponent(props)}</div>;
+            case "textArea":
+                return <div className={className}>{this.toTextAreaComponent(props)}</div>;
+            case "number":
+                return <div className={className}>{this.toNumberComponent(props)}</div>;
+            case "select":
+                return <div className={className}>{this.toSelectComponent(props)}</div>;
+            case 'search':
+            case 'selectSearch':
+                return <div className={className}>{this.toSearchComponent(props)}</div>;
+            case "date":
+                return <div className={className}>{this.toDateComponent(props)}</div>;
+            case 'readonly':
+                return this.toReadonlyComponent(props);
+            case 'cascader':
+                return <div className={className}>{this.toCascader(props)}</div>;
+            case 'selectWriting' :
+                return <div className={className}>{this.toSelectWriting(props)}</div>;
+            case 'radioGroup' :
+                return <div className={className}>{this.toRadioGroup(props)}</div>;
+
+
+            case 'double':
+                return <div className={className}>{this.toDoubleNumberComponent(props, this.props.items)}</div>
+            default:
+                return <div>"error type"</div>;
+        }
+    }
+}
+
+export default SuperTableCell;
+export {isInRegion};

package/src/SuperTable3/FilterDropDown.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Button, Input} from 'antd';
+import Control from "../Control/Control";
+import variables from '../variables';
+
+class FilterDropDown extends React.Component {
+  static propTypes = {
+    value: PropTypes.any,
+    onSearch: PropTypes.func,
+    onClose: PropTypes.func
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {value: props.value || ''};
+    if (props.isDateFilterByStartAndEnd) {
+      const {start='', end=''} = props.value || {};
+      this.state = {start, end};
+    } else {
+      this.state = {value: props.value || ''};
+    }
+  }
+
+  componentWillReceiveProps(newProps) {
+    if (newProps.isDateFilterByStartAndEnd) {
+      const {start= '', end= ''} = newProps.value || {};
+      this.setState({start, end});
+    } else {
+      this.setState({value: newProps.value || ''});
+    }
+  }
+
+  componentDidMount() {
+    if (this.input) {
+      this.input.focus();
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.input) {
+      this.input.focus();
+    }
+  }
+
+  onChange = (e) => {
+    this.setState({value: e.target.value});
+  };
+
+  onDateChange = (key, value) => {
+    this.setState({[key]: value});
+  };
+
+  onSearch = () => {
+    const {onSearch, isDateFilterByStartAndEnd} = this.props;
+    if (onSearch) {
+      const value = (!this.state.start && !this.state.end) ? "" : this.state;
+      const val = isDateFilterByStartAndEnd ? value : this.state.value;
+      onSearch(val);
+    }
+  };
+
+  DateInputCreator = () => {
+    const {props} = this.props;
+      const propsStart = {
+        type: "date",
+        size: "small",
+        showTime: props ? props.showTime: true,
+        value: this.state.start,
+        style: {marginRight: '5px'},
+        onChange: this.onDateChange.bind(null, 'start')
+        };
+      const propsEnd = {
+        type: "date",
+        size: "small",
+        showTime: props ? props.showTime: true,
+        value: this.state.end,
+        style: {marginLeft: '5px'},
+        onChange: this.onDateChange.bind(null, 'end')
+      };
+      return (<div className={variables('SuperTable3-FilterDropDown').date}>
+        <div><Control {...propsStart} />To<Control {...propsEnd} /></div>
+        <div>
+          <Button size="small" style={{marginRight: '5px'}} onClick={this.props.onClose}>关闭</Button>
+          <Button size='small' type='primary' onClick={this.onSearch.bind(null, this.props.type)}>搜索</Button>
+        </div>
+      </div>);
+  };
+
+  InputCreator = () => {
+    const props = {
+      size: 'small',
+      value: this.state.value,
+      onChange: this.onChange,
+      onPressEnter: this.onSearch,
+      ref: (e) => this.input = e
+    };
+    return (
+      <div className={variables('SuperTable3-FilterDropDown')}>
+        <Input {...props} />
+        <Button onClick={this.onSearch} size='small' type='primary'>搜索</Button>
+      </div>
+    );
+  }
+
+  render() {
+    return this.props.isDateFilterByStartAndEnd ? this.DateInputCreator() : this.InputCreator();
+  }
+}
+
+export default FilterDropDown;