cloud-b2b 1.1.50 → 1.1.51

package/src/SuperTab/SuperTab.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Tabs} from 'antd';
+import variables from '../variables';
+const TabPane = Tabs.TabPane;
+
+/**
+ * key: 唯一标识一个tab
+ * title: 显示在tab上的标题
+ * close: 为true则显示关闭按钮，默认为true
+ */
+const TabType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  close: PropTypes.bool
+};
+
+/**
+ * activeKey: 处于活动状态tab的key值
+ * onTabChange: 切换选项卡时触发，原型为function(key)
+ * onTabClose: 关闭选项卡时触发，原型为funtion(key)
+ */
+class SuperTab extends React.Component {
+  static propTypes = {
+    activeKey: PropTypes.string.isRequired,
+    tabs: PropTypes.arrayOf(PropTypes.shape(TabType)).isRequired,
+    onTabChange: PropTypes.func,
+    onTabClose: PropTypes.func
+  };
+
+  static PROPS = ['activeKey', 'tabs', 'onTabChange', 'onTabClose'];
+
+  getEvent = (name) => {
+    if (this.props[name]) {
+      return this.props[name];
+    } else if (this.props.callback) {
+      return this.props.callback[name];
+    } else {
+      return null;
+    }
+  };
+
+  callEvent = (name, key) => {
+    const onEvent = this.getEvent(name);
+    if (onEvent) {
+      onEvent(key);
+    }
+  };
+
+  onEdit = (key, action) => {
+    if (action === 'remove') {
+      this.callEvent('onTabClose', key);
+    }
+  };
+
+  onChange = (key) => {
+    this.callEvent('onTabChange', key);
+  };
+
+  toTab = ({key, title, close}) => {
+    return <TabPane key={key} tab={title} closable={close} />;
+  };
+
+  getTabsProps = () => {
+    return {
+      className: variables('SuperTab'),
+      activeKey: this.props.activeKey,
+      type: 'editable-card',
+      hideAdd: true,
+      onEdit: this.onEdit,
+      onChange: this.onChange
+    }
+  };
+
+  render() {
+    return (
+      <Tabs {...this.getTabsProps()}>
+        {this.props.tabs.map(this.toTab)}
+      </Tabs>
+    );
+  }
+}
+
+export default SuperTab;

package/src/SuperTab2/SuperTab2.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import {Tabs, Menu, Dropdown, Icon, Tooltip} from 'antd';
+import variables from '../variables';
+const TabPane = Tabs.TabPane;
+const MenuItem = Menu.Item;
+
+/**
+ * key: 唯一标识一个tab
+ * title: 显示在tab上的标题
+ */
+const TabType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};
+
+/**
+ * activeKey: 处于活动状态tab的key值
+ * menu: 是否需要右侧下拉列表，默认false
+ * onTabChange: 切换选项卡时触发，原型为function(key)
+ */
+class SuperTab2 extends React.Component {
+  static propTypes = {
+    activeKey: PropTypes.string.isRequired,
+    tabs: PropTypes.arrayOf(PropTypes.shape(TabType)).isRequired,
+    menu: PropTypes.bool,
+    onTabChange: PropTypes.func
+  };
+
+  onTabChange = (key) => {
+    const {onTabChange, callback={}} = this.props;
+    if (onTabChange) {
+      onTabChange(key);
+    } else if (callback.onTabChange) {
+      // callback被废弃，只是为了兼容旧代码而已
+      callback.onTabChange(key);
+    }
+  };
+
+  toTab = (tab) => {
+    return <TabPane key={tab.key} tab={tab.title} />;
+  };
+
+  toMenu = () => {
+    const {tabs, activeKey} = this.props;
+    return (
+      <Menu style={{maxHeight: '450px', overflow: 'auto'}}>
+        {tabs.map(tab => {
+          const style = activeKey === tab.key ? {color: "#2196f3"} : {};
+          return tab.tip ? (
+            <MenuItem key={tab.key}>
+              <Tooltip placement="leftTop" title={tab.tip}>
+                <a onClick={this.onTabChange.bind(this, tab.key)} style={style}>{tab.title}</a>
+              </Tooltip>
+            </MenuItem>
+            ) : (
+            <MenuItem key={tab.key}>
+              <a onClick={this.onTabChange.bind(this, tab.key)} style={style}>{tab.title}</a>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    );
+  };
+
+  getPopupContainer = () => {
+    const {container} = this.props;
+    if (typeof container === 'undefined') {
+      return document.body;
+    } else {
+      return ReactDOM.findDOMNode(container);
+    }
+  };
+
+  toDropdown = () => {
+    return (
+      <Dropdown overlay={this.toMenu()} getPopupContainer={this.getPopupContainer}>
+        <Icon type="menu-unfold" style={{fontSize: 16, verticalAlign: -2}} />
+      </Dropdown>
+    );
+  };
+
+  render() {
+    const {tabs, activeKey, menu = false} = this.props;
+    return (
+      <Tabs className={variables('SuperTab2')} activeKey={activeKey} onChange={this.onTabChange} tabBarExtraContent={menu && tabs.length > 3 && this.toDropdown()}>
+        {tabs.map(this.toTab)}
+      </Tabs>
+    );
+  }
+}
+
+export default SuperTab2;

package/src/SuperTable/DragSortRow.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import variables from '../variables';
+
+let dragIndex = -1;
+
+class DragSortRow extends React.Component {
+  state = {dragIndex: -1, firefox: navigator.userAgent.includes('Firefox')};
+
+  onDragStart = (e) => {
+    dragIndex = this.props.index;
+    if (this.state.firefox) {
+      // 火狐浏览器必须调用setData
+      e.dataTransfer.setData('text/plain', 'DragSortRow');
+    }
+  };
+
+  onDragEnd = () => {
+    dragIndex = -1;
+  };
+
+  onDragOver = (e) => {
+    if ((dragIndex > - 1) && (dragIndex !== this.props.index)) {
+      e.preventDefault();
+      if (this.state.dragIndex !== dragIndex) {
+        this.setState({dragIndex});
+      }
+    }
+  };
+
+  onDragLeave = () => {
+    this.setState({dragIndex: -1});
+  };
+
+  onDrop = (e) => {
+    const dragIndex = this.state.dragIndex;
+    this.setState({dragIndex: -1});
+    this.props.onMoveRow(dragIndex, this.props.index);
+
+    // 火狐浏览器默认会打开一个新窗口，此处阻止其打开
+    if (this.state.firefox) {
+      e.preventDefault();
+    }
+  };
+
+  render() {
+    const {onMoveRow, index, className, ...restProps} = this.props;
+    const dragIndex = this.state.dragIndex;
+    restProps.className = `${className} ${variables('DragSortRow')}`;
+    restProps.draggable = true;
+    restProps.onDragStart = this.onDragStart;
+    restProps.onDragEnd = this.onDragEnd;
+    restProps.onDragOver = this.onDragOver;
+    restProps.onDragLeave = this.onDragLeave;
+    restProps.onDrop = this.onDrop;
+    if (dragIndex > - 1) {
+      restProps['data-drag-hover'] = dragIndex > index ? 'up' : 'down';
+    }
+    return <tr {...restProps} />;
+  }
+}
+
+export default DragSortRow;

package/src/SuperTable/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('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('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;