cloud-b2b 1.1.46 → 1.1.51

package/package.json

@@ -1,22 +1,44 @@
-{
-  "name": "cloud-b2b",
-  "version": "1.1.46",
-  "description": "A react component library dependent antd",
-  "keywords": [
-    "react",
-    "component",
-    "antd"
-  ],
-  "author": "pxj",
-  "license": "ISC",
-  "dependencies": {
-    "@babel/runtime-corejs3": "^7.11.2",
-    "antd": "^3.26.19",
-    "history": "^4.5.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
-  },
-  "main": "lib/index.js",
-  "module": "es/index.js"
-}
+{
+  "name": "cloud-b2b",
+  "version": "1.1.51",
+  "description": "A react component library dependent antd",
+  "keywords": [
+    "react",
+    "component",
+    "antd"
+  ],
+  "author": "pxj",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.11.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-export-default-from": "^7.10.4",
+    "@babel/plugin-transform-react-jsx-self": "^7.16.7",
+    "@babel/plugin-transform-react-jsx-source": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-import": "1.13.1",
+    "css-loader": "^4.3.0",
+    "less": "^3.12.2",
+    "less-loader": "^5.0.0",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.1"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs3": "^7.26.10",
+    "antd": "^3.26.19",
+    "history": "^4.5.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2"
+  },
+  "scripts": {
+    "build": "node tools/build",
+    "publish": "node tools/publish",
+    "test": "webpack-dev-server --config test/webpack.config.js"
+  }
+}

package/src/Area/Area.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import {Input,Row,Col,Button} from 'antd';
+import PropTypes from 'prop-types';
+import helper from '../helper';
+import Control from '../Control';
+
+const PROPS = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onParentChange:PropTypes.func,
+  child:PropTypes.Array
+};
+
+const PROPS_KEYS = Object.keys(PROPS);
+
+class Area extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: props.value || {},options:props.options || {}};
+  };
+
+  componentWillReceiveProps(props) {
+    if (props.value !== this.props.value) {
+      this.setState({value: props.value || {}});
+    }
+  }
+
+  onChange = (key, keyValue) => {
+    const {onParentChange,child, value={}} = this.props;
+    let newValue = {};
+    newValue[key] = keyValue;
+    let CheckValue,checkIndex;
+    child.map((item,index) => {
+      if (item.key === key){
+        checkIndex = index;
+      }
+      CheckValue = index > checkIndex ? '' : value[item.key];
+      newValue[item.key] = item.key === key ? keyValue : CheckValue;
+    });
+    this.setState({value: {...this.state.value,...newValue}},() => onParentChange && onParentChange(this.state.value))
+  };
+
+  onSearch = (key, control, parentKey,KeyValue) => {
+    const {onAreaSearch,child,value={}} = this.props;
+    let flag = true;
+    child.map((item,index) => {
+      if (item.key === key && index !== 0){
+        const upKey = child[index-1].key;
+        if (index !== 0 && (helper.isEmpty2(value[upKey]) || Object.keys(value[upKey]).length === 0)){
+          flag = false
+        };
+      }
+    });
+    return flag ? onAreaSearch && onAreaSearch(key, KeyValue, parentKey) : helper.showError('请输入上级选择器');
+  };
+
+  render() {
+    const {child,parentKey,options = {},readonly = false, value={}} = this.props;
+    return (
+      <Row>
+        {child.map((item,index) => {
+          let childOptions = [];
+          if (Object.keys(options).includes(item.key)){
+            if (index === 0){
+              childOptions = options[item.key]
+            } else{
+              const upKey = child[index-1].key;
+              childOptions = helper.isEmpty2(value[upKey]) || Object.keys(value[upKey]).length === 0 ? [] : options[item.key]
+            }
+          }
+          const props = {
+            ...item,
+            onSearch:this.onSearch.bind(this,item.key,item,parentKey),
+            onChange:this.onChange.bind(this,item.key),
+            options: childOptions,
+            value: value[item.key] && value[item.key].title ? value[item.key].title : value[item.key],
+            type: readonly ? 'readonly' : item.type,
+            searchWhenClick: true
+          };
+          return (
+            <Col span={24 / child.length} key={item.key}>
+              <Control {...props}/>
+            </Col>
+          )
+        })}
+
+      </Row>
+    );
+  }
+}
+
+export default Area;

package/src/Card/Card.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const Card = React.forwardRef(({ children, className, noPadding, ...other }, ref) => {
+  const padding = !noPadding ? true : null;
+  return (
+    <div className={classNames('pld-card', className)} data-padding={padding} {...other} ref={ref}>
+      {children}
+    </div>
+  );
+});
+
+
+export default Card;
+
+

package/src/CodeInput/CodeInput.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import {Input,Row,Col,Button} from 'antd';
+import PropTypes from 'prop-types';
+import helper from '../helper';
+
+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 CodeInput extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: props.value,time:0,};
+  };
+
+  onGetCode = async () => {
+    // const url = await helper.fetchJson();
+    const {onGetCode} = this.props;
+    if (await (onGetCode && onGetCode())){
+      this.setState({time:this.props.time || 60});
+      let that = this;
+      const s = setInterval(function () {
+        that.setState({time:that.state.time -= 1}) ;
+        if (that.state.time === 0) {
+          clearInterval(s);
+        }
+      }, 1000);
+    };
+  }
+
+  btnProps = (props) => {
+    const btnProps = Object.assign(helper.getObjectExclude(props,['onGetCode']));
+    return {
+      ...btnProps,
+      size:'large',
+      disabled:this.state.time !== 0,
+      onClick:this.onGetCode
+    }
+  };
+
+  inputProps = (props) => {
+    const inpPros = Object.assign(helper.getObjectExclude(props,['onGetCode', 'value']));
+    return {
+      ...inpPros,
+      size:'large',
+      defaultValue: props.value || ''
+    }
+  }
+
+
+  render() {
+    const {inputKey, readonly, value} = this.props;
+    const {time} = this.state;
+    return (
+          <div style={{display:'flex'}}>
+            <Input {...this.inputProps(this.props)}/>
+            <Button {...this.btnProps(this.props)}>{time === 0 ? `获取验证码` : `${time}s获取验证码`}</Button>
+          </div>
+    );
+  }
+}
+
+export default CodeInput;

package/src/Control/Control.js

@@ -0,0 +1,338 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import {Input, Select, DatePicker, Radio} from 'antd';
+import InputSearch from '../InputSearch';
+import NumberInput from '../NumberInput';
+import InputEditor from '../InputEditor';
+import InputSelect from '../InputSelect';
+import InputWriting from '../InputWriting';
+import InpurCascader from '../InpurCascader';
+import InputTreeSelect from '../InputTreeSelect';
+import moment from 'moment';
+import eventWrapper from './event';
+import CodeInput from '../CodeInput';
+import SuperUpload from '../SuperUpload';
+import Area from '../Area/Area';
+
+const SelectOption = Select.Option;
+const TextArea = Input.TextArea;
+const RadioGroup = Radio.Group;
+
+moment.locale('zh-cn');
+
+const getTitleOptions = (options) => {
+  const existTitles = [];
+  if (options) {
+    return options.reduce((result, option) => {
+      if (existTitles.includes(option.title)) {
+        return result;
+      } else {
+        existTitles.push(option.title);
+        result.push({...option, value: option.title, originValue: option.value});
+        return result;
+      }
+    }, []);
+  } else {
+    return options;
+  }
+};
+
+// 设置组件焦点
+const setFocus = (element, type) => {
+  if (element) {
+    if (element.focus) {
+      element.focus();
+    } else if (type === 'select' || type === 'selectText') {
+      ReactDOM.findDOMNode(element).firstChild.focus();
+    } else if (type === 'search' || type === 'searchText' || type === 'date') {
+      ReactDOM.findDOMNode(element).getElementsByTagName('input')[0].focus();
+    }
+  }
+};
+
+const toOption = ({value, title}, index) => {
+  return <SelectOption key={index} value={String(value)}>{title}</SelectOption>;
+};
+
+const toRadio = ({value, title, disabled=false}, index) => {
+  return <Radio key={index} value={String(value)} disabled={disabled}>{title}</Radio>;
+};
+
+// 文本输入框
+const text = (props) => {
+  if (props.value || props.defaultValue) {
+    props.title = props.value || props.defaultValue;
+  }
+  return <Input {...props} />;
+};
+
+// 密码输入框
+const password = (props) => {
+  props.type = 'password';
+  return <Input {...props} />;
+};
+
+// 多行文本输入框
+const textArea = (props) => {
+  if (props.readonly) {
+    delete props.readonly;
+    props.readOnly = true;
+    props.style = Object.assign(props.style || {}, {backgroundColor: '#f0f0f0'});
+  }
+  return <TextArea {...props} />;
+};
+
+//双选输入框
+const double = (props) => {
+  if (props.ref) {
+    props.inputRef = props.ref;
+    delete props.ref;
+  }
+  const {doubleKey, onChange} = props;
+  const props1={...props,defaultValue:props.doubleValue[props.doubleKey[0]], onChange: props.onChangeKey1}
+  const props2={...props,defaultValue:props.doubleValue[props.doubleKey[1]], onChange: props.onChangeKey2}
+  return <div style={{display:'flex'}}>
+    <NumberInput key={doubleKey[0]} {...props1} />~
+    <NumberInput key={doubleKey[1]} {...props2} />
+  </div>
+}
+
+// 只读框
+const readonly = (props) => {
+  props.readOnly = true;
+  props.style = Object.assign(props.style || {}, {backgroundColor: '#f0f0f0'});
+  if (props.value || props.defaultValue) {
+    props.title = props.value || props.defaultValue;
+  }
+  return <Input {...props}/>;
+};
+
+// 数字输入框
+const number = (props) => {
+  if (props.ref) {
+    props.inputRef = props.ref;
+    delete props.ref;
+  }
+  return <NumberInput {...props} />;
+};
+
+const isMatch = (inputValue, option) => {
+  return option.props.children.indexOf(inputValue) !== -1;
+};
+
+// 下拉选择框
+const select = (props) => {
+  const options = props.options || [];
+  delete props.options;
+  props.showSearch = true;
+  props.filterOption = isMatch;
+  (props.allowClear !== false) && (props.allowClear = true);
+  if (props.mode === 'multiple') {
+    !props.value && typeof props.value !== 'undefined' && (props.value = []);
+    !props.defaultValue && typeof props.defaultValue !== 'undefined' && (props.defaultValue = []);
+  }else {
+    props.value && typeof props.value === 'object' && (props.value = JSON.stringify(props.value));
+    props.defaultValue && typeof props.defaultValue === 'object' && (props.defaultValue = JSON.stringify(props.defaultValue));
+    if (props.value !== true && props.value !== false && props.value !== '' && props.value !== undefined) {
+      props.value = String(props.value);
+    }
+  }
+  return <Select {...props}>{options.map(toOption)}</Select>;
+};
+
+const area = (props) => {
+  const areaProps = {
+    ...props,
+    onParentChange:props.onChange,
+  }
+  return <Area {...areaProps} />
+}
+
+
+// 下拉选择框-取title作为值
+const selectText = (props) => {
+  const options = getTitleOptions(props.options) || [];
+  delete props.options;
+  props.showSearch = true;
+  props.filterOption = isMatch;
+  (props.allowClear !== false) && (props.allowClear = true);
+  if (props.mode === 'multiple') {
+    !props.value && typeof props.value !== 'undefined' && (props.value = []);
+    !props.defaultValue && typeof props.defaultValue !== 'undefined' && (props.defaultValue = []);
+  }else {
+    props.value && typeof props.value === 'object' && (props.value = JSON.stringify(props.value));
+    props.defaultValue && typeof props.defaultValue === 'object' && (props.defaultValue = JSON.stringify(props.defaultValue));
+  }
+  return <Select {...props}>{options.map(toOption)}</Select>;
+};
+
+// 搜索框
+const search = (props) => {
+  if (props.ref) {
+    props.inputRef = props.ref;
+    delete props.ref;
+  }
+  return <InputSearch {...props} />;
+};
+
+// 搜索框-值取title
+const searchText = (props) => {
+  if (props.ref) {
+    props.inputRef = props.ref;
+    delete props.ref;
+  }
+  props.options = getTitleOptions(props.options);
+  return <InputSearch {...props} />;
+};
+
+// 多选下拉搜索
+const selectSearch = (props) => {
+  !props.value && typeof props.value !== 'undefined' && (props.value = []);
+  return <InputSelect {...props} />;
+};
+
+// 多选手写下拉 不支持title,value形式
+const selectWriting = (props) => {
+  !props.value && typeof props.value !== 'undefined' && (props.value = []);
+  return <InputWriting {...props} />;
+};
+
+// 日期选择框
+const date = (props) => {
+  const origin = props.onChange;
+  const { MonthPicker } = DatePicker;
+
+  if (typeof props.value !== 'undefined') {
+    props.value = !props.value ? undefined : moment(props.value);
+  }
+  if (typeof props.defaultValue !== 'undefined') {
+    props.defaultValue = !props.defaultValue ? undefined : moment(props.defaultValue);
+  }
+  if (props.showTime) {
+    props.format = 'YYYY-MM-DD HH:mm:ss';
+    props.placeholder = '请选择时间';
+    if (typeof props.showTime === 'boolean') {
+      props.showTime = '00:00:00';
+    }
+    if (props.showTime !== 'current') {
+      props.showTime = {defaultValue: moment(props.showTime, 'HH:mm:ss')};
+    } else {
+      props.showTime = true;
+    }
+  }
+  if (props.onChange) {
+    props.onChange = (date, str) => origin(str)
+  }
+  if(props.month){
+    props.format = 'YYYY-MM';
+    props.placeholder = '请选择日期';
+    return <div onBlur={props.onBlur}><MonthPicker {...props} /></div>;
+  }
+  return <div onBlur={props.onBlur}><DatePicker {...props} /></div>;
+};
+
+// 单选按钮组
+const radioGroup = ({options = [], ...props}) => {
+  const origin = props.onChange;
+  props.style = {borderSpacing: 0};
+  typeof props.value === 'number' && (props.value = String(props.value));
+  typeof props.defaultValue === 'number' && (props.defaultValue = String(props.defaultValue));
+  if (props.onChange) {
+    props.onChange = (e) => origin(e.target.value);
+  }
+  return <RadioGroup {...props}>{options.map(toRadio)}</RadioGroup>;
+};
+
+// 富文本编辑器
+const editor = (props) => {
+  return  <InputEditor {...props}/>
+};
+
+//级联选择下拉
+const cascader = (props) => {
+  !props.value && typeof props.value !== 'undefined' && (props.value = []);
+  return <InpurCascader {...props}/>
+};
+//树型结构
+const treeSelect = (props) => {
+  !props.value && typeof props.value !== 'undefined' && (props.value = []);
+  return <InputTreeSelect {...props}/>
+};
+const captcha = (props) => {
+  if (props.ref) {
+    props.inputRef = props.ref;
+    delete props.ref;
+  }
+  return <CodeInput {...props}/>
+}
+
+const uploadImg = (props) => {
+  const uploadProps = {
+    ...props,
+    fileList:props.value || [],
+    readonly:props.readonly || false
+  };
+  return <SuperUpload {...uploadProps} />
+};
+
+// 支持的控件类型
+const controls = {
+  text, textArea, readonly, number, select, selectText, search, searchText, date, radioGroup,password,editor,
+  selectSearch,selectWriting,cascader,captcha,area,uploadImg,double,treeSelect
+};
+
+const Control = ({type, autoFocus, ...props}) => {
+  const ref = autoFocus ? e => setFocus(e, type) : null;
+  const {doubleKey=undefined,onChangeKey1=undefined,onChangeKey2=undefined,doubleValue={}} = props
+  return controls[type](Object.assign(eventWrapper(props), type === 'double' ? {ref,doubleKey, onChangeKey1, onChangeKey2,doubleValue } : {ref }));
+};
+
+Control.propTypes = {
+  type: PropTypes.string.isRequired,
+  autoFocus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onSearch: PropTypes.func,
+  onBlur: PropTypes.func,
+  onGetCode:PropTypes.func
+};
+
+// 依据value查找对应的标题
+const getTitle = (value, options = []) => {
+  if (typeof value === 'undefined') {
+    return '';
+  } else if (typeof value === 'object') {
+    if (Array.isArray(value)) {
+      if (options && options.length > 0) {
+        // 处理多选字典下拉变成只读的情况：
+        return value.reduce((val, it) => {
+          const item = options.find(o => o.value === it);
+          if (item) {
+            val += ` ${item.title}`;
+          }
+          return val;
+        }, '').trim();
+      }
+      return value;
+    } else {
+      return value ? value.title : '';
+    }
+  } else {
+    const index = options.findIndex(obj => String(obj.value) === String(value));
+    return index === -1 ? value : options[index].title;
+  }
+};
+
+// 确保value的值为字符串(包含value和title的对象除外)
+const makeString = (value) => {
+  if (value === null || typeof value === 'undefined') {
+    return '';
+  } else if (typeof value === 'number') {
+    return String(value);
+  } else {
+    return value;
+  }
+};
+
+export default Control;
+export {getTitle, makeString};

package/src/Control/event.js

@@ -0,0 +1,45 @@
+import {getObjectExclude} from '../helper';
+
+class EventHandler {
+  constructor(props) {
+    this.props = props;
+  }
+
+  toValue = (event='') => {
+    if (event === null) {
+      return '';
+    } else {
+      return event.nativeEvent ? event.target.value : event;
+    }
+  };
+
+  onChange = (event) => {
+    this.props.onChange(this.toValue(event));
+  };
+
+  onBlur = (event) => {
+    this.props.onBlur(this.toValue(event), event);
+  };
+
+  onSearch = (event) => {
+    this.props.onSearch(this.toValue(event));
+  };
+}
+
+const replaceEvent = (props, handler) => {
+  const events = ['onChange', 'onBlur', 'onSearch'];
+  let callback = events.reduce((result, event) => {
+    if (props[event]) {
+      result[event] = handler[event];
+    }
+    return result;
+  }, {});
+  return Object.assign({}, getObjectExclude(props, events), callback);
+};
+
+const eventWrapper = (props) => {
+  const handler = new EventHandler(props);
+  return replaceEvent(props, handler);
+};
+
+export default eventWrapper

package/src/Enhance/Dialogs.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {getObjectExclude} from '../helper';
+
+const Enhance = (Container, keys, Dialogs, noContainer=false) => class extends React.Component {
+  toDialogs = () => {
+    return keys.reduce((result, key, index) => {
+      const Dialog = Dialogs[index];
+      this.props[key] && result.push(<Dialog key={key} container={this} />);
+      return result;
+    }, []);
+  };
+
+  render() {
+    const props = getObjectExclude(this.props, keys);
+    return (
+      <div className={noContainer ? null : 'modal-container'}>
+        <Container {...props}/>
+        {this.toDialogs()}
+      </div>
+    )
+  }
+};
+
+export default Enhance;