diff --git a/CHANGELOG.md b/CHANGELOG.md index 680526640..ddc0dd71a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # 更新日志 +## 2.5.3 +- 修复 ``、``、`` 的远程 Mock 数据地址 + ## 2.5.2 - 修复 `` 编辑模式下删除最后一个 tab 报错的问题 [#735](https://github.com/XiaoMi/hiui/issues/735) diff --git a/components/loading/Loading.js b/components/loading/Loading.js index 7609259ea..567c386d3 100755 --- a/components/loading/Loading.js +++ b/components/loading/Loading.js @@ -60,8 +60,10 @@ function PortalWrapper ({ mountNode, children }) { function open (target, { content, key, duration, size } = {}) { let renderNode = document.createElement('div') const mountNode = target || document.body - window.getComputedStyle(mountNode).position === 'absolute' || + mountNode.nodeName !== 'BODY' && ( + window.getComputedStyle(mountNode).position === 'absolute' || mountNode.style.setProperty('position', 'relative') + ) const full = !target ReactDOM.render( , @@ -79,8 +81,10 @@ function open (target, { content, key, duration, size } = {}) { function deprecatedOpen ({ target, tip } = {}) { let renderNode = document.createElement('div') const mountNode = target || document.body - window.getComputedStyle(mountNode).position === 'absolute' || + mountNode.nodeName !== 'BODY' && ( + window.getComputedStyle(mountNode).position === 'absolute' || mountNode.style.setProperty('position', 'relative') + ) const full = !target ReactDOM.render( , diff --git a/components/locales/en-US.js b/components/locales/en-US.js index c98516a28..9fd9e6f90 100644 --- a/components/locales/en-US.js +++ b/components/locales/en-US.js @@ -57,6 +57,7 @@ export default { delete: 'Delete', drag: 'Drag and drop files for uploading', dragTips: 'Please click or drag and drop file upload', + dragTipsLimited: 'The number has reached the upper limit', preview: 'Preview' }, modal: { diff --git a/components/locales/zh-CN.js b/components/locales/zh-CN.js index 42e7e6d35..0196b1274 100644 --- a/components/locales/zh-CN.js +++ b/components/locales/zh-CN.js @@ -58,6 +58,7 @@ export default { delete: '删除', drag: '拖拽文件上传', dragTips: '请点击或拖拽文件上传', + dragTipsLimited: '数量已达上限', preview: '预览' }, modal: { diff --git a/components/rate/Rate.js b/components/rate/Rate.js index 59bf9772e..82074bef3 100644 --- a/components/rate/Rate.js +++ b/components/rate/Rate.js @@ -18,6 +18,7 @@ class Rate extends Component { value } } + return null } state = { value: 0, diff --git a/components/select/Select.js b/components/select/Select.js index 700a2d13d..131cfe09e 100644 --- a/components/select/Select.js +++ b/components/select/Select.js @@ -70,7 +70,7 @@ class Select extends Component { const { data, value, defaultValue } = props const dropdownItems = cloneDeep(data) const initialValue = value === undefined ? defaultValue : value - const selectedItems = this.resetSelectedItems(initialValue, dropdownItems) + const selectedItems = this.resetSelectedItems(initialValue, dropdownItems, []) const searchable = this.getSearchable() this.debouncedFilterItems = debounce(this.onFilterItems.bind(this), 300) this.clickOutsideHandel = this.clickOutside.bind(this) @@ -124,7 +124,7 @@ class Select extends Component { const selectedItems = this.resetSelectedItems( nextProps.value || this.state.selectedItems, nextProps.data, - true + this.state.selectedItems ) this.setState({ selectedItems, @@ -162,11 +162,11 @@ class Select extends Component { } isRemote () { - const { dataSource } = this.props - return dataSource && !!dataSource.url + const { dataSource, onSearch } = this.props + return onSearch || (dataSource && !!dataSource.url) } - resetSelectedItems (value, dropdownItems = [], listChanged = false) { + resetSelectedItems (value, dropdownItems = [], reviceSelectedItems = []) { const values = this.parseValue(value) let selectedItems = [] dropdownItems.forEach((item) => { @@ -174,7 +174,7 @@ class Select extends Component { selectedItems.push(item) } }) - return selectedItems + return reviceSelectedItems.concat(selectedItems) } addOption (option) { @@ -328,65 +328,75 @@ class Select extends Component { } remoteSearch (keyword) { - let { - url, - transformResponse, - error, - params, - headers, - mode, - data = {}, - type = 'GET', - key, - jsonpCallback = 'callback', - ...options - } = this.props.dataSource - keyword = - !keyword && this.autoloadFlag && this.props.autoload - ? this.props.dataSource.keyword + const {onSearch, dataSource, autoload} = this.props + if (onSearch && typeof onSearch === 'function') { + this.setState({ + fetching: true + }) + onSearch(keyword).finally(() => { + this.setState({fetching: false}) + }) + } else { + let { + url, + transformResponse, + error, + params, + headers, + mode, + data = {}, + type = 'GET', + key, + jsonpCallback = 'callback', + ...options + } = dataSource + keyword = + !keyword && this.autoloadFlag && autoload + ? dataSource.keyword : keyword - this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词 + this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词 - const queryParams = qs.stringify( - Object.assign({}, params, key && { [key]: keyword }) - ) - url = url.includes('?') ? `${url}&${queryParams}` : `${url}?${queryParams}` - - if (type.toUpperCase() === 'POST') { - options.body = JSON.stringify(data) - } - this.setState({ - fetching: true - }) + const queryParams = qs.stringify( + Object.assign({}, params, key && { [key]: keyword }) + ) + url = url.includes('?') ? `${url}&${queryParams}` : `${url}?${queryParams}` - if (type.toUpperCase() === 'JSONP') { - const _o = { - jsonpCallback: jsonpCallback, - jsonpCallbackFunction: jsonpCallback + if (type.toUpperCase() === 'POST') { + options.body = JSON.stringify(data) } - fetchJsonp(url, _o) - .then((res) => res.json()) - .then((json) => { - this._setDropdownItems(json, transformResponse) - }) - } else { - /* eslint-disable */ - fetch(url, { - method: type, - ...options + this.setState({ + fetching: true }) - .then((response) => response.json()) - .then( - (res) => { - this._setDropdownItems(res, transformResponse) - }, - (err) => { - error && error(err) - this.setState({ - fetching: false - }) - } - ) + + if (type.toUpperCase() === 'JSONP') { + const _o = { + jsonpCallback: jsonpCallback, + jsonpCallbackFunction: jsonpCallback + } + fetchJsonp(url, _o) + .then((res) => res.json()) + .then((json) => { + this._setDropdownItems(json, transformResponse) + }) + } else { + /* eslint-disable */ + fetch(url, { + method: type, + ...options + }) + .then((response) => response.json()) + .then( + (res) => { + this._setDropdownItems(res, transformResponse) + }, + (err) => { + error && error(err) + this.setState({ + fetching: false + }) + } + ) + } } } _setDropdownItems(res, func) { @@ -400,7 +410,7 @@ class Select extends Component { const selectedItems = this.resetSelectedItems( this.props.value, dropdownItems, - true + this.state.selectedItems ) this.setState({ dropdownItems, @@ -412,6 +422,7 @@ class Select extends Component { }) } onFilterItems(keyword) { + const { onSearch, dataSource, autoload } = this.props this.setState( { keyword: keyword @@ -419,13 +430,15 @@ class Select extends Component { () => this.resetFocusedIndex() ) - if (this.props.dataSource && this.props.dataSource.key) { + if (dataSource && dataSource.key) { if ( - this.props.autoload || + autoload || keyword.toString().length >= this.state.queryLength ) { this.remoteSearch(keyword) } + } else if(onSearch) { + this.remoteSearch(keyword) } } diff --git a/components/upload/UploadDrag.js b/components/upload/UploadDrag.js index b19d3bee3..3ae6ec997 100644 --- a/components/upload/UploadDrag.js +++ b/components/upload/UploadDrag.js @@ -111,7 +111,7 @@ class UploadDrag extends Upload { fileList.length > 0 &&
  • - {localeDatas.upload.dragTips} + {fileCountLimted ? localeDatas.upload.dragTipsLimited : localeDatas.upload.dragTips}
    • } diff --git a/components/upload/UploadPhoto.js b/components/upload/UploadPhoto.js index 93338b417..05ec5cb90 100644 --- a/components/upload/UploadPhoto.js +++ b/components/upload/UploadPhoto.js @@ -93,21 +93,23 @@ class UploadPhoto extends Upload { ) } })} -
  • - -
    • + { + !fileCountLimted &&
  • + +
    • + } { showModal && { - console.log('----', res) - return res.data - }, - error: err => console.log('error:', err) - }} - onChange={(item) => { - console.log('异步多选结果', item) - }} - /> - ) - } -}` +const rightOptions = ['使用DataSource', '使用onSearch'] +const code = [{ + code: `import React from 'react' + import { Select } from '@hi-ui/hiui'\n + class Demo extends React.Component { + render () { + return ( + { + return fetch('http://yapi.demo.qunar.com/mock/26534/hiui/select?id='+value+'') + .then(res => res.json()) + .then(res => { + this.setState({ + multipleList: res.list + }) + }) + }} + onChange={(item) => { + console.log('多选结果', item) + }} + /> + ) + } + }`, + opt: ['使用onSearch'] +}] const DemoSingleMultiple = () => ( ) export default DemoSingleMultiple diff --git a/docs/demo/select/section-async.jsx b/docs/demo/select/section-async.jsx index 5da20640f..f60d8455c 100644 --- a/docs/demo/select/section-async.jsx +++ b/docs/demo/select/section-async.jsx @@ -11,13 +11,10 @@ class Demo extends React.Component { type='single' dataSource={{ type: 'GET', - headers: {token: 'tokenXXXXXXX'}, - mode: 'cors', - credentials: 'same-origin', - url: 'https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options', + key: 'id', + url: 'http://yapi.demo.qunar.com/mock/26534/hiui/select', transformResponse: (res) => { - console.log('----', res) - return res.data + return res.list } }} placeholder='请选择种类' diff --git a/docs/demo/table/section-server.jsx b/docs/demo/table/section-server.jsx index 8ef5b693e..f211d0cb9 100644 --- a/docs/demo/table/section-server.jsx +++ b/docs/demo/table/section-server.jsx @@ -17,7 +17,7 @@ class Demo extends React.Component { super(props) this.state = { from: '', - pageSize:'' + pageSize:2 } window.selectTable = this @@ -59,22 +59,21 @@ class Demo extends React.Component { avg: true }} origin={{ - url: 'https://www.easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/table', + url: 'http://yapi.demo.qunar.com/mock/26534/hiui/server-table', currentPageName: 'pageNum', //分页的页码字端名(默认 current) autoDelayTime: 500, // 自动发请求的时候，延迟时间(默认 200) - headers: {'OS': 'WEB'}, //设置请求头 + // headers: {'OS': 'WEB'}, //设置请求头 data: { from, - startTime: '', - endTime: '', pageSize }, type: "GET", auto:true, // 自动发请求配置(默认false) success: (res) => { - let {data: {data, columns,page: {pageSize, totalNum, pageNum}}} = res + let {data: {list, columns,page: {pageSize, totalNum, pageNum}}} = res + console.log(list, columns) return { - data, + data: list, columns, page: { pageSize, diff --git a/docs/demo/tree/section-async.jsx b/docs/demo/tree/section-async.jsx index d8a2907e9..e710c00ec 100644 --- a/docs/demo/tree/section-async.jsx +++ b/docs/demo/tree/section-async.jsx @@ -43,7 +43,7 @@ class Demo extends React.Component { headers:{}, data:{}, params:{}, - url:'https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/select/options', + url:'http://yapi.demo.qunar.com/mock/26534/hiui/async-tree', transformResponse:(res)=>{return res.data} }} defaultExpandAll diff --git a/docs/demo/upload/section-ban.jsx b/docs/demo/upload/section-ban.jsx index d4bd7923e..d01812833 100644 --- a/docs/demo/upload/section-ban.jsx +++ b/docs/demo/upload/section-ban.jsx @@ -10,7 +10,7 @@ class Demo extends React.Component { return ( { console.log('upload callback', file, fileList, response) diff --git a/docs/demo/upload/section-head.jsx b/docs/demo/upload/section-head.jsx index d2fe2d1ee..d9a4cf398 100644 --- a/docs/demo/upload/section-head.jsx +++ b/docs/demo/upload/section-head.jsx @@ -12,7 +12,7 @@ class Demo extends React.Component { type="avatar" width={180} height={180} - uploadAction= "https://easy-mock.com/mock/5c1b42e3fe5907404e6540e9/hiui/upload" + uploadAction= "http://www.mocky.io/v2/5dc3b4413000007600347501" headers={{name: 'mi'}} params={{id:'uid',channel:'youpin'}} onChange = {(file, fileList, response) => { diff --git a/docs/demo/upload/section-picture-wall.jsx b/docs/demo/upload/section-picture-wall.jsx index aa52549cc..038596461 100644 --- a/docs/demo/upload/section-picture-wall.jsx +++ b/docs/demo/upload/section-picture-wall.jsx @@ -10,7 +10,7 @@ class Demo extends React.Component { return ( { file.id = 'file唯一标识' console.log('upload callback', file, fileList, response) diff --git a/docs/demo/upload/section-picture.jsx b/docs/demo/upload/section-picture.jsx index 53c5aeb0d..cbf09b92c 100644 --- a/docs/demo/upload/section-picture.jsx +++ b/docs/demo/upload/section-picture.jsx @@ -9,7 +9,7 @@ class Demo extends React.Component { return ( { console.log('upload callback', file, fileList, response) diff --git a/docs/demo/upload/section-upload.jsx b/docs/demo/upload/section-upload.jsx index 67c1f30bd..adb22faf8 100644 --- a/docs/demo/upload/section-upload.jsx +++ b/docs/demo/upload/section-upload.jsx @@ -16,7 +16,7 @@ class Demo extends React.Component {