cloud-b2b 1.1.46 → 1.1.51

package/src/InputSearch/InputSearch.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {AutoComplete, Input, Icon} from 'antd';
+import {getObjectExclude} from '../helper';
+
+const SelectOption = AutoComplete.Option;
+
+// 如果写在局部，每次渲染时生成的suffix引用值不同，会使antd的Input认为suffix动态变化了，从而导致Input报出警告 (antd的BUG)
+const suffix = <Icon type='search' style={{color: 'black', opacity: 0.25, marginRight: -4}} />;
+
+const OPTION_STYLE = {float: 'right', marginLeft: '1rem', color: '#aaa', whiteSpace: 'pre-wrap'};
+const OPTION_STYLE2 = {display:'block', color: '#aaa', whiteSpace: 'pre-wrap'};
+
+/**
+ * filter: 为true表示下拉列表会依据输入的值进行前端过滤，默认为true; 如果不想过滤，则设为false
+ * remark: 为true表示options的option中含有remark字段，并需要用remark值进行过滤下拉，默认为false
+ * searchWhenClick: 每次点击时，触发onSearch事件，默认为false
+ * noSearchWhenTypo: 当输入时，不触发onSearch事件，默认为false
+ */
+const PROPS = {
+  filter: PropTypes.bool,
+  remark: PropTypes.bool,
+  searchWhenClick: PropTypes.bool,
+  noSearchWhenTypo: PropTypes.bool,
+  options: PropTypes.array,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+  inputRef: PropTypes.func,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onSelect: PropTypes.func,
+  onSearch: PropTypes.func
+};
+
+const PROPS_KEYS = Object.keys(PROPS);
+
+class InputSearch extends React.Component {
+  static propTypes = PROPS;
+
+  constructor(props) {
+    super(props);
+    this.state = {value: props.value};
+  }
+
+  componentWillReceiveProps(props) {
+    if (props.value !== this.props.value) {
+      this.setState({value: props.value});
+    }
+  }
+
+  onSearch = (value) => {
+    this.setState({value});
+    const {onSearch, noSearchWhenTypo} = this.props;
+    !noSearchWhenTypo && onSearch && onSearch(value);
+  };
+
+  onBlur = () => {
+    const {autoAdd=false, options=[], onChange, onBlur} = this.props;
+    if (this.props.value !== this.state.value) {
+      const index = options.findIndex(option => option.title === this.state.value);
+      let value = '';
+      if (index === -1) {
+        if (autoAdd && this.state.value) {
+          if (typeof this.state.value === 'string') {
+            value = {value: -1, title: this.state.value};
+          } else if (typeof this.state.value === 'object' && this.state.value.title && this.state.value.value) {
+            value = this.state.value;
+          }
+        }
+      } else {
+        value = options[index];
+      }
+      this.setState({value});
+      onChange && onChange(value);
+      onBlur && onBlur(value);
+    } else {
+      onBlur && onBlur(this.props.value);
+    }
+  };
+
+  onSelect = (value) => {
+    const {onChange, options = []} = this.props;
+    const index = options.findIndex(option => String(option.value) === value);
+    if (index > -1) {
+      this.setState({value: options[index]});
+      onChange && onChange(options[index]);
+    }
+  };
+
+  onClick = (e) => {
+    const {options=[], onSearch, searchWhenClick, value} = this.props;
+    if (onSearch && (!options.length || (!value && searchWhenClick))) {
+      onSearch(e.target.value);
+    }
+  };
+
+  makeValueValid = (value) => {
+    return [NaN, undefined, null].includes(value) ? '' : value;
+  };
+
+  getValue = () => {
+    const {value} = this.state;
+    return String(this.makeValueValid(typeof value === 'object' ? value.value : value));
+  };
+
+  isMatch = (inputValue, option) => {
+    return option.props.children && option.props.children.indexOf(inputValue) !== -1;
+  };
+
+  isMatchRemark = (inputValue, option) => {
+    const {text='', remark=''} = option.props;
+    return (text.indexOf(inputValue) > -1) || (remark.indexOf(inputValue) > -1);
+  };
+
+  isValidValue = (value) => {
+    // value必须为对象，且有属性value的值不等''或undefined
+    return value && !['', undefined].includes(value.value);
+  };
+
+  getOptions = () => {
+    const value = this.state.value;
+    const options = this.props.options;
+    if (options && options.length) {
+      if (this.isValidValue(value) && !options.find(option => option.value === value.value)) {
+        return [value];
+      } else {
+        return options;
+      }
+    } else if (this.isValidValue(value)) {
+      return [value];
+    } else {
+      return [];
+    }
+  };
+
+  getDataSource = () => {
+    return this.getOptions().map(option => {
+      return {value: String(option.value), text: option.title};
+    });
+  };
+
+  getDataSourceRemark = () => {
+    return this.getOptions().map((option, index) => {
+      return (
+        <SelectOption key={index} value={String(option.value)} text={option.title} remark={option.remark || ''}>
+          <span>{option.title}</span>
+          <span style={OPTION_STYLE}>{option.remark || ''}</span>
+          <span style={OPTION_STYLE2}>{option.description || ''}</span>
+        </SelectOption>
+      );
+    });
+  };
+
+  getProps = () => {
+    const {inputRef, filter=true} = this.props;
+    const props = Object.assign(getObjectExclude(this.props, PROPS_KEYS), {
+      value: this.getValue(),
+      allowClear: true,
+      ref: inputRef,
+      onChange: this.onSearch,
+      filterOption: (e, option) => option,
+      onSelect: this.onSelect,
+      onBlur: this.onBlur,
+    });
+    if (this.props.remark) {
+      props.dataSource = this.getDataSourceRemark();
+      props.filterOption = filter ? this.isMatchRemark : false;
+      props.optionLabelProp = 'text';
+    } else {
+      props.dataSource = this.getDataSource();
+      props.filterOption = filter ? this.isMatch : false;
+    }
+    return props;
+  };
+
+  render() {
+    return (
+      <div onClick={this.onClick}>
+        <AutoComplete {...this.getProps()}>
+          <Input suffix={suffix} />
+        </AutoComplete>
+      </div>
+    );
+  }
+}
+
+export default InputSearch;

package/src/InputSelect/InputSelect.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Select } from 'antd';
+
+const SelectOption = Select.Option;
+
+const OPTION_STYLE = {float: 'right', marginLeft: '1rem',marginRight:'1rem', color: '#aaa', whiteSpace: 'pre-wrap'};
+
+
+class InputSelect extends React.Component {
+
+  onClick = (e) => {
+    const {options=[], onSearch, value=[], searchWhenClick=false} = this.props;
+    // if (onSearch && (options.length <= value.length)) {
+    if (onSearch && searchWhenClick) {
+    onSearch(e.target.value);
+    }
+  };
+
+  onSearch = (value) => {
+    const {onSearch} = this.props;
+    onSearch && onSearch(value);
+  };
+
+  isMatch = (inputValue, option) => {
+    return option.props.children.indexOf(inputValue) !== -1;
+  };
+
+  isMatchRemark = (inputValue, option) => {
+    const {text, remark} = option.props;
+    return (text.indexOf(inputValue) > -1) || (remark.indexOf(inputValue) > -1);
+  };
+
+
+  toRemarkOption = (option, index) => {
+    return (
+      <SelectOption key={index} value={String(option.value)} text={option.title} remark={option.remark || ''} disabled={option.disabled || false}>
+        <span>{option.title}</span>
+        <span style={OPTION_STYLE}>{option.remark || ''}</span>
+      </SelectOption>
+    );
+  };
+
+  toOption = (option, index) => {
+    return(
+      <SelectOption key={index} value={String(option.value)} disabled={option.disabled || false}>{option.title}</SelectOption>)
+  };
+
+  onChange = (options, keyValue) => {
+    const {onChange} = this.props;
+    const objValue = keyValue.length > 0 ? (keyValue.map(item => {
+      return {
+        ...options.filter(o => o.value === item.key)[0],
+        value:item.key,
+        title:item.label,
+      }
+    })) : [];
+    onChange && onChange(objValue);
+  };
+
+
+  getValue = () => {
+    const {value} = this.props;
+    if (typeof value === 'object' && Array.isArray(value) ) {
+      return value.map(item => {
+        return {
+          ...item,
+          key:item.value,
+          label:item.title,
+        }
+      })
+    } else {
+      return [];
+    }
+  };
+
+  render() {
+    const {options=[] , size, value=[],allowClear=true} = this.props;
+    const values = value.map(o => o.value);
+    const allOptions = options.filter(o => !values.includes(o.value)).concat(value);
+    const props = {
+      value:this.getValue(),
+      style: this.props.style || {},
+      mode:'multiple',
+      optionLabelProp: this.props.remark ? 'text' :'children',
+      dropdownMatchSelectWidth:false,
+      filterOption: this.props.remark ? this.isMatchRemark : this.isMatch,
+      onSearch:this.onSearch,
+      onChange:this.onChange.bind(this, allOptions),
+      labelInValue:true,
+      allowClear,
+      size
+    };
+    return (
+      <div onClick={this.onClick}>
+        <Select {...props}>
+          {this.props.remark ? allOptions.map(this.toRemarkOption) : allOptions.map(this.toOption)}
+        </Select>
+      </div>
+    );
+  }
+}
+
+export default InputSelect;

package/src/InputTreeSelect/InputTreeSelect.js

@@ -0,0 +1,87 @@
+//级联选择input
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TreeSelect } from 'antd';
+import { getObjectExclude } from '../helper';
+
+const optionsType = {
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    key:PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    disabled: PropTypes.bool,
+    children: PropTypes.array,
+    title: PropTypes.string,
+    isLeaf: PropTypes.bool //false 就会触发 loadData 方法，从而在loadData方法中请求下一级数据，
+}
+
+
+const PROPS = {
+    options: PropTypes.arrayOf(PropTypes.shape(optionsType)).isRequired,
+    value: PropTypes.array.isRequired,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+    loadData: PropTypes.func, //动态加载 ps：loadData 与 showSearch 无法一起使用
+    showSearch: PropTypes.bool,
+    onTreeExpand:PropTypes.func,
+    treeDefaultExpandAll:PropTypes.bool,
+    treeDataSimpleMode:PropTypes.bool,
+    multiple:PropTypes.bool,
+}
+
+const PROPS_KEYS = Object.keys(PROPS);
+class InputTreeSelect extends React.Component {
+    static propTypes = PROPS;
+
+    constructor(props) {
+        super(props);
+    }
+
+    onChange = (value) => {
+        const { onChange } = this.props;
+        onChange && onChange(value)
+    };
+
+    loadData = selectedOptions => {
+        const { onSearch } = this.props;
+        onSearch && onSearch(selectedOptions[0])
+    };
+
+    getOptions = (options) => {
+        return options.map(option => {
+            let obj = { ...option, label: option.title};
+            if(option.children && option.children.length > 0){
+                obj.children = this.getOptions(option.children)
+            }
+            return obj;
+        })
+    }
+
+    getProps = () => {
+        const { options = [], placeholder, size,value,loadData,treeDefaultExpandAll=false
+            ,showSearch=false,treeDataSimpleMode=false,multiple=false} = this.props;
+        const props = Object.assign(getObjectExclude({}, PROPS_KEYS), {
+            onChange: this.onChange,
+            value: value,
+            treeData:options,
+            treeDataSimpleMode,
+            placeholder: placeholder,
+            treeDefaultExpandAll,
+            multiple,
+            size
+        })
+        //动态加载 ps：loadData 与 showSearch 无法一起使用
+        if(loadData){
+            props.loadData = this.loadData
+        }else if(showSearch){
+            props.showSearch = showSearch;
+        }
+        return props;
+    };
+
+    render() {
+        return (
+            <TreeSelect {...this.getProps()} />
+        )
+    }
+}
+
+export default InputTreeSelect;

package/src/InputTreeSelect/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "InputTreeSelect",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./InputTreeSelect.js"
+}

package/src/InputWriting/InputWriting.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+class InputWriting extends React.Component {
+
+  state = {
+    options: [],
+    value: [],
+    fetching: false,
+  };
+
+
+  onClick = (e) => {
+    const {options=[], onSearch,value} = this.props;
+    if (onSearch && (!options.length )) {
+      onSearch(e.target.value);
+    }
+  };
+
+  onSearch = (value) => {
+    const {onSearch} = this.props;
+    onSearch && onSearch(value);
+  };
+
+  isMatch = (inputValue, option) => {
+    return option.props.children.indexOf(inputValue) !== -1;
+  };
+
+  toOption = (option, index) => {
+    return(
+      <SelectOption key={index} value={String(option.value)}>{option.title}</SelectOption>)
+  };
+
+  onChange = (keyValue) => {
+    const {onChange,value} = this.props;
+    onChange && onChange(keyValue);
+  };
+
+
+
+
+  render() {
+    const {value} = this.props;
+    const props = {
+      value,
+      size:'small',
+      mode:'tags',
+      allowClear:true,
+      onSelect:this.onSelect,
+      filterOption: this.isMatch,
+      dropdownMatchSelectWidth:false,
+      onChange:this.onChange,
+    };
+    return (
+      <div onClick={this.onClick}>
+        <Select {...props}>
+        </Select>
+      </div>
+    );
+  }
+}
+
+export default InputWriting;

package/src/Layout/Layout.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Header from '../Header';
+import Sidebar from '../Sidebar2';
+import Loading from '../Loading';
+import {Button} from 'antd';
+import {jump} from '../Link';
+import variables from '../variables';
+
+const HeaderV = Header.Vertical;
+
+const getCurrentSideKey = (sidebars={}, href) => {
+  if (!href) return '';
+  for (let key of Object.keys(sidebars)) {
+    if (sidebars[key].some(item => item.href === href || (item.children && item.children.some(o => o.href === href)))) {
+      return key
+    }
+  }
+};
+
+class Layout extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    nav1: PropTypes.string,
+    nav2: PropTypes.string,
+    sidebars: PropTypes.object,
+    openKeys: PropTypes.object,
+    onOpenChange: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      mode: 'expand',
+      url: {}
+    };
+  }
+
+  componentWillReceiveProps(props) {
+    if (!props.loading) {
+      this.setState({url: Object.assign({}, this.state.url, {[getCurrentSideKey(props.sidebars, `/${props.nav1}/${props.nav2}`)]: `/${props.nav1}/${props.nav2}`})});
+    }
+  }
+
+  onOpenChange = (sideKey, openKeys) => {
+    const {onOpenChange} = this.props;
+    if (onOpenChange) {
+      onOpenChange(sideKey, openKeys);
+    }
+  };
+
+  getSidebarProps = (sideKey) => {
+    const {sidebars, nav2, openKeys={}, navigation} = this.props;
+    const sides = sidebars[sideKey] || [];
+    return {
+      mode: this.state.mode,
+      title: navigation.filter(o => o.key === sideKey)[0].title,
+      activeKey: nav2,
+      items: sides,
+      openKeys: openKeys[sideKey] || [],
+      onOpenChange: this.onOpenChange.bind(this, sideKey),
+      onModeChange: mode => this.setState({mode})
+    };
+  };
+
+  toSidebar = (sideKey, hasHeaderV=false) => {
+    if (!sideKey) {
+      return null;
+    } else {
+      return (
+        <aside style={{marginLeft: hasHeaderV ? 40 : 0}}>
+          <Sidebar {...this.getSidebarProps(sideKey)} />
+        </aside>
+      );
+    }
+  };
+
+  toHeader = () => {
+    const {loading, sidebars, nav1, nav2, homeUrl, settingUrl, messageUrl, messageCount, userName, userIcon, loginUrl, onMenuClick, onLogout} = this.props;
+    const selectKey = loading ? '' : getCurrentSideKey(sidebars, `/${nav1}/${nav2}`);
+    const selectUrl = loading ? '' : `/${nav1}/${nav2}`;
+    return <Header {...{homeUrl, settingUrl, messageUrl, loginUrl, userName, userIcon, messageCount, selectKey, selectUrl, onMenuClick,onLogout}} />;
+  };
+
+  headerVProps = (selectKey) => {
+    const keys = ['setting', 'message'];
+    return {
+      selectKey,
+      url: this.state.url,
+      items: this.props.navigation.filter(item => !keys.includes(item.key)),
+    };
+  };
+
+  render() {
+    const {loading, sidebars, nav1='', nav2='', children, noPrivilege=false, navigation} = this.props;
+    const hasV = navigation.filter(item => !['setting', 'message'].includes(item.key)).length > 1;
+    const sideKey = loading || !nav2 ? '' : getCurrentSideKey(sidebars, `/${nav1}/${nav2}`);
+    return noPrivilege ? (<div style={{textAlign: 'center'}}>
+      <div style={{lineHeight: '100px'}}>
+        您暂无权限，请确认您账号角色是否正确，或联系管理员分配权限
+      </div>
+      <Button type='primary' onClick={() => jump('/')}>返回首页</Button>
+    </div>) : (
+      <div className={variables('Layout')}>
+        {this.toHeader(sideKey)}
+        {
+          loading ? <Loading /> :
+          <div>
+            {hasV ? <HeaderV {...this.headerVProps(sideKey)} /> : null}
+            {this.toSidebar(sideKey, hasV)}
+            <section>{children}</section>
+          </div>
+        }
+      </div>
+    )
+  };
+}
+
+export default Layout;
+
+

package/src/LayoutLink/LayoutLink.js

@@ -0,0 +1,59 @@
+import React, {useState} from 'react';
+import WingBlank from '../WingBlank';
+import Card from '../Card';
+import {Form, Input, Button, Empty} from 'antd';
+import variables from '../variables';
+
+const FormItem = Form.Item;
+
+function Search({placeholder, onSearch}) {
+  let [value, setValue] = useState('');
+  let [status, setStatus] = useState('');
+  const onClick = () => {
+    if (!value) {
+      setStatus('error');
+    } else {
+      onSearch(value);
+    }
+  };
+  const onChange = (e) => {
+    setStatus('');
+    setValue(e.target.value);
+  };
+  return (
+    <Card className={variables('LayoutLink').search}>
+      <div>
+        <FormItem validateStatus={status}>
+          <Input placeholder={placeholder} value={value} onChange={onChange}/>
+        </FormItem>
+        <Button onClick={onClick}>开始查询</Button>
+      </div>
+    </Card>
+  )
+}
+
+function Title({title}) {
+  return (
+    <div className={variables('LayoutLink').title}>
+      <div>{title}</div>
+      <div />
+    </div>
+  )
+}
+
+function LayoutLink({children, img, title, placeholder, onSearch}) {
+  return (
+    <div className={variables('LayoutLink')}>
+      <div><img src={img} alt='banner' /></div>
+      <WingBlank>
+        <Search {...{placeholder, onSearch}}/>
+        <Title title={title}/>
+        <Card>{children ? children : <Empty style={{padding: '30px'}}/>}</Card>
+      </WingBlank>
+    </div>
+  );
+}
+
+export default LayoutLink;
+
+

package/src/Link/Link.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import history from '../history';
+
+function isLeftClickEvent(event) {
+  return event.button === 0;
+}
+
+function isModifiedEvent(event) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+
+function jump(url) {
+  if (history.location.pathname != url) {
+    history.push(url);
+  } else {
+    history.replace(url);
+  }
+}
+
+class Link extends React.Component {
+  static propTypes = {
+    to: PropTypes.string,
+    disabled: PropTypes.bool,
+    children: PropTypes.node,
+    onClick: PropTypes.func,
+  };
+
+  handleClick = (event) => {
+    if (this.props.onClick) {
+      this.props.onClick(event);
+    }
+
+    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
+      return;
+    }
+
+    if (event.defaultPrevented === true) {
+      return;
+    }
+
+    event.preventDefault();
+    jump(this.props.to);
+  };
+
+  render() {
+    const { to, children, disabled, ...props } = this.props;
+    if (disabled) {
+      return <a {...props}>{children}</a>;
+    } else {
+      return <a href={to} {...props} onClick={this.handleClick}>{children}</a>;
+    }
+  }
+}
+
+export default Link;
+export {jump};

package/src/Loading/Loading.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Spin} from 'antd';
+import variables from '../variables';
+
+function Loading({retry, onRetry}) {
+  return (
+    <div className={variables('Loading')}>
+      <div>
+        {!retry ? <Spin /> : <span>加载失败，点击<a onClick={onRetry}>重试</a></span>}
+      </div>
+    </div>
+  );
+}
+
+export default Loading;