From 02c673696c97cd7d79dc947aa67a595ac93b6c30 Mon Sep 17 00:00:00 2001 From: zhangjunjie Date: Thu, 7 Nov 2019 15:41:46 +0800 Subject: [PATCH 1/2] =?UTF-8?q?1=E3=80=81Upload=20=E7=9A=84=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E6=95=B0=E9=87=8F=E9=99=90=E5=88=B6=E7=9A=84=E5=B1=95?= =?UTF-8?q?=E7=8E=B0=E5=BD=A2=E5=BC=8F=202=E3=80=81=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E7=9A=84Mock=20=E6=95=B0=E6=8D=AE=E5=9C=B0=E5=9D=80=203?= =?UTF-8?q?=E3=80=81Rate=20=E7=BB=84=E4=BB=B6=E7=9A=84=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E5=8F=B0=E8=AD=A6=E5=91=8A=204=E3=80=81Loading=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=AF=BC=E8=87=B4=E7=9A=84=E5=B8=83=E5=B1=80=E5=BC=82?= =?UTF-8?q?=E5=B8=B8=E9=97=AE=E9=A2=98=205=E3=80=81Select=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=20onSearch=20=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E9=A1=B9=206=E3=80=81Select=20=E7=BB=84=E4=BB=B6=E5=BC=82?= =?UTF-8?q?=E6=AD=A5=E6=90=9C=E7=B4=A2=E6=97=B6=E4=BC=9A=E6=B8=85=E7=A9=BA?= =?UTF-8?q?=E5=B7=B2=E9=80=89=E4=B8=AD=E9=A1=B9=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/loading/Loading.js | 8 +- components/locales/en-US.js | 1 + components/locales/zh-CN.js | 1 + components/rate/Rate.js | 1 + components/select/Select.js | 139 +++++++++++--------- components/upload/UploadDrag.js | 2 +- components/upload/UploadPhoto.js | 32 ++--- docs/demo/select/section-async-multiple.jsx | 91 +++++++++---- docs/demo/select/section-async.jsx | 9 +- docs/demo/table/section-server.jsx | 13 +- docs/demo/tree/section-async.jsx | 2 +- docs/demo/upload/section-ban.jsx | 2 +- docs/demo/upload/section-default.jsx | 2 +- docs/demo/upload/section-drag.jsx | 2 +- docs/demo/upload/section-head.jsx | 2 +- docs/demo/upload/section-picture-wall.jsx | 2 +- docs/demo/upload/section-picture.jsx | 2 +- docs/demo/upload/section-upload.jsx | 2 +- 18 files changed, 183 insertions(+), 130 deletions(-) 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 a6ded02fe..5482b9869 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 72206f61c..b8c4d79cf 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 28f8df47a..3644586b9 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, @@ -164,11 +164,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) => { @@ -176,7 +176,7 @@ class Select extends Component { selectedItems.push(item) } }) - return selectedItems + return reviceSelectedItems.concat(selectedItems) } addOption (option) { @@ -330,65 +330,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) { @@ -402,7 +412,7 @@ class Select extends Component { const selectedItems = this.resetSelectedItems( this.props.value, dropdownItems, - true + this.state.selectedItems ) this.setState({ dropdownItems, @@ -414,6 +424,7 @@ class Select extends Component { }) } onFilterItems(keyword) { + const { onSearch, dataSource, autoload } = this.props this.setState( { keyword: keyword @@ -421,13 +432,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 05b1e2055..889642935 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 {
    Date: Thu, 7 Nov 2019 15:45:40 +0800 Subject: [PATCH 2/2] version --- CHANGELOG.md | 34 ++++++++++++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f4f4dd65..fe57ed657 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,39 @@ # 更新日志 +## 2.5.3 +- 修复 ``、``、`` 的远程 Mock 数据地址 + + +## 2.5.2 + +- 修复 `` 编辑模式下删除最后一个 tab 报错的问题 [#735](https://github.com/XiaoMi/hiui/issues/735) +- 修复 `` defaultValue 设置无效的问题 [#717](https://github.com/XiaoMi/hiui/issues/717) +- 修复 `` 拖拽上传场景下，删除文件不正确的问题 [#705](https://github.com/XiaoMi/hiui/issues/705) +- 修复 `` showAllSubMenus 对传入 data 的容错问题 [#687](https://github.com/XiaoMi/hiui/issues/687) +- 修复 `` format 后格式不符合预期的问题 [#712](https://github.com/XiaoMi/hiui/issues/712) +- 修复 `` 清空后再次打开面板清空无效的问题 [#722](https://github.com/XiaoMi/hiui/issues/722) +- 修复 `` 在某些场景下显示、隐藏的顺序不正确的问题 [#706](https://github.com/XiaoMi/hiui/issues/706) +- 修复 `` 国际化支持不完全的问题 [#729](https://github.com/XiaoMi/hiui/issues/729) +- 修复 `` 数据项 href 仅点击文字才能跳转的问题 [#726](https://github.com/XiaoMi/hiui/issues/726) + +## 2.5.0 + +- 新增 `` filterOption 属性支持自定义搜索 [#704](https://github.com/XiaoMi/hiui/issues/704) +- 修复 `` 刷新后 value 不能正确显示的问题 [#667](https://github.com/XiaoMi/hiui/issues/667) +- 修复 `` pageSizeOptions 写法兼容性问题 [#703](https://github.com/XiaoMi/hiui/issues/703) +- 修复 `` 第一张图向前翻页跳转不正确的问题 [#696](https://github.com/XiaoMi/hiui/issues/696) +- 修复 兼容属性 legacy 造成的组件污染问题 [#708](https://github.com/XiaoMi/hiui/issues/708) +- 修复 `` 传入字符串值时控制台抛出的警告问题 [#709](https://github.com/XiaoMi/hiui/issues/709) + ## 2.4.1 - 修复 `
    ` 多选失效的问题 [#699](https://github.com/XiaoMi/hiui/issues/699) diff --git a/package.json b/package.json index f5745f199..b397d8310 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/hiui", - "version": "2.4.1", + "version": "2.5.3", "description": "HIUI for React", "scripts": { "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",