From 911c7dfbfd2d3f5abd9a8d41e8abbf09f9aacb00 Mon Sep 17 00:00:00 2001 From: zhangjunjie Date: Mon, 26 Aug 2019 17:23:48 +0800 Subject: [PATCH 01/14] carousel --- components/carousel/index.js | 52 +++++++++++++++++++++++++++ components/carousel/style/index.js | 1 + components/carousel/style/index.scss | 9 +++++ components/index.js | 1 + docs/demo/breadcrumb/section-base.jsx | 2 +- docs/demo/carousel/section-base.jsx | 34 ++++++++++++++++++ docs/demo/carousel/section-icon.jsx | 35 ++++++++++++++++++ docs/zh-CN/components/carousel.mdx | 26 ++++++++++++++ site/locales/zh-CN.js | 3 +- site/pages/components/index.js | 3 +- 10 files changed, 163 insertions(+), 3 deletions(-) create mode 100644 components/carousel/index.js create mode 100644 components/carousel/style/index.js create mode 100644 components/carousel/style/index.scss create mode 100644 docs/demo/carousel/section-base.jsx create mode 100644 docs/demo/carousel/section-icon.jsx create mode 100644 docs/zh-CN/components/carousel.mdx diff --git a/components/carousel/index.js b/components/carousel/index.js new file mode 100644 index 000000000..dd6c1597f --- /dev/null +++ b/components/carousel/index.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import './style/index' + +// const url = 'http://i1.mifile.cn/f/i/hiui/docs/' +class Carousel extends Component { + constructor (props) { + super(props) + this.tempArr = [1, 2, 3, 4, 5, 6, 7, 8] + this.rootRef = React.createRef() + this.state = { + rootWidth: 0 + } + } + componentDidMount () { + this.setState({ + rootWidth: this.rootRef.current.clientWidth + }) + } + render () { + const children = React.Children.toArray(this.props.children) + console.log(children) + return
+ {/* {this.props.children} */} +
+ { + children.map((child, index) => { + return React.cloneElement(child, { + key: index, + style: { + width: this.state.rootWidth, + display: 'inline-block' + } + }) + }) + } +
+
+ } +} + +Carousel.propTypes = { + separator: PropTypes.string, + data: PropTypes.array, + onClick: PropTypes.func +} +Carousel.defaultProps = { + separator: '|', + data: [], + onClick: () => { } +} +export default Carousel diff --git a/components/carousel/style/index.js b/components/carousel/style/index.js new file mode 100644 index 000000000..63810a681 --- /dev/null +++ b/components/carousel/style/index.js @@ -0,0 +1 @@ +import './index.scss' diff --git a/components/carousel/style/index.scss b/components/carousel/style/index.scss new file mode 100644 index 000000000..63ffa4200 --- /dev/null +++ b/components/carousel/style/index.scss @@ -0,0 +1,9 @@ +.hi-carousel { + color: rgba(153, 153, 153, 1); + overflow: hidden; + + &__container { + height: 100%; + display: inline-block; + } +} diff --git a/components/index.js b/components/index.js index 823896e3c..51ee73cd2 100755 --- a/components/index.js +++ b/components/index.js @@ -42,4 +42,5 @@ export { default as Rate } from './rate' export { default as Message } from './message' export { default as Tag } from './tag' export { default as Breadcrumb } from './breadcrumb' +export { default as Carousel } from './carousel' export { ThemeContext, LocaleContext } from './context' diff --git a/docs/demo/breadcrumb/section-base.jsx b/docs/demo/breadcrumb/section-base.jsx index 4a7f39e5f..a8dc191ef 100644 --- a/docs/demo/breadcrumb/section-base.jsx +++ b/docs/demo/breadcrumb/section-base.jsx @@ -3,7 +3,7 @@ import DocViewer from '../../../libs/doc-viewer' import Breadcrumb from '../../../components/breadcrumb' const prefix = 'alert-base' const code = `import React from 'react' -import Alert from '@hi-ui/hiui/es/alert'\n +import Breadcrumb from '@hi-ui/hiui/es/breadcrumb'\n class Demo extends React.Component { render () { const data = [{ diff --git a/docs/demo/carousel/section-base.jsx b/docs/demo/carousel/section-base.jsx new file mode 100644 index 000000000..4bcdbe876 --- /dev/null +++ b/docs/demo/carousel/section-base.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import DocViewer from '../../../libs/doc-viewer' +import Carousel from '../../../components/carousel' +const prefix = 'alert-base' +const code = `import React from 'react' +import Carousel from '@hi-ui/hiui/es/carousel'\n +class Demo extends React.Component { + render () { + const data = [1, 2, 3, 4, 5, 6, 7, 8] + return ( +
+ + { + /* + { + data.map((item, index) => { + return + }) + } + */ + } + { + data.map((item) => { + return
{item}
+ }) + } + +
+ ) + } +}` + +const DemoBase = () => +export default DemoBase diff --git a/docs/demo/carousel/section-icon.jsx b/docs/demo/carousel/section-icon.jsx new file mode 100644 index 000000000..bea6eba06 --- /dev/null +++ b/docs/demo/carousel/section-icon.jsx @@ -0,0 +1,35 @@ +import React from 'react' +import DocViewer from '../../../libs/doc-viewer' +import Breadcrumb from '../../../components/breadcrumb' +const prefix = 'breadcrumb-base' +const code = `import React from 'react' +import Breadcrumb from '@hi-ui/hiui/es/Breadcrumb'\n +class Demo extends React.Component { + render () { + const data = [{ + content: '首页', + path: '/home' + }, { + icon: 'document', + path: '/product' + }, { + icon: 'component', + content: '手机', + path: '/phone' + }, { + content: '红米系列', + path: '/redmi' + }, { + content: 'Note7', + path: '/note7' + }] + return ( +
+ +
+ ) + } +}` + +const DemoBase = () => +export default DemoBase diff --git a/docs/zh-CN/components/carousel.mdx b/docs/zh-CN/components/carousel.mdx new file mode 100644 index 000000000..f0fc75884 --- /dev/null +++ b/docs/zh-CN/components/carousel.mdx @@ -0,0 +1,26 @@ +# Breadcrumb 面包屑 + +## 基础用法 + +import DemoBase from '../../demo/carousel/section-base.jsx' + + + +## Props + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | +| data | 面包屑数据 | DataItem [] | - | - | +| separator | 自定义分隔符 | string | - | '|' | +| onClick | 点击回调函数 | （path: string）=> void | - | - | + + +## Type + +### DataItem + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------- | ----------------------------------- | ------------------- | ------------- | ------ | +| content | 面包屑的内容 | string \| ReactNode | - | - | +| path | 要跳转的路径 | string | - | - | +| icon | 自定义图标 | string | 详见 [``](/hiui/zh-CN/docs/icon) 组件 ︎ | - | diff --git a/site/locales/zh-CN.js b/site/locales/zh-CN.js index 2ba8da091..b2e923332 100755 --- a/site/locales/zh-CN.js +++ b/site/locales/zh-CN.js @@ -51,7 +51,8 @@ module.exports = { transfer: 'Transfer 穿梭框', switch: 'Switch 开关', rate: 'Rate 评分', - breadcrumb: 'Breadcrumb 面包屑' + breadcrumb: 'Breadcrumb 面包屑', + carousel: 'Carousel 走马灯' }, designs: { summarize: '概述', diff --git a/site/pages/components/index.js b/site/pages/components/index.js index 1581ea15a..cbcaf03a3 100755 --- a/site/pages/components/index.js +++ b/site/pages/components/index.js @@ -51,7 +51,8 @@ export default { popover: components['popover'], progress: components['progress'], card: components['card'], - timeline: components['timeline'] + timeline: components['timeline'], + carousel: components['carousel'] }, 'group-tips': { modal: components['modal'], From 19a05c84cd9ed7711fd3648361e41216eee4a403 Mon Sep 17 00:00:00 2001 From: solarjoker Date: Tue, 27 Aug 2019 10:34:25 +0800 Subject: [PATCH 02/14] feat: popover add visible --- components/popover/index.js | 5 +---- docs/zh-CN/components/popover.mdx | 1 + 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/popover/index.js b/components/popover/index.js index e242cf4d0..86f2099d3 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -65,7 +65,6 @@ export default class Popover extends Component { this.element = ReactDOM.findDOMNode(this) const referenceRef = ReactDOM.findDOMNode(this.referenceRef) - // this.reference = ReactDOM.findDOMNode(this.refs.reference) if (referenceRef === null) return if (trigger === 'click') { @@ -105,7 +104,6 @@ export default class Popover extends Component { this.unbindHover = false popper.current.addEventListener('mouseenter', e => { this.eventTarget = e.target - // this.showPopper() }) popper.current.addEventListener('mouseleave', e => { this.delayHidePopper(e) @@ -118,14 +116,13 @@ export default class Popover extends Component { const { showPopper } = this.state - return (
{ this.popoverContainer = node }}> { React.cloneElement(React.Children.only(this.props.children), { ref: (el) => { this.referenceRef = el }, tabIndex: '0' }) } Date: Tue, 27 Aug 2019 10:44:16 +0800 Subject: [PATCH 03/14] feat: tooltip add visible --- components/popover/index.js | 4 ++-- components/tooltip/index.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/popover/index.js b/components/popover/index.js index 86f2099d3..9f959918e 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -112,7 +112,7 @@ export default class Popover extends Component { } render () { - const { style, className, title, content, placement, width } = this.props + const { style, className, title, content, placement, width, visible } = this.props const { showPopper } = this.state @@ -122,7 +122,7 @@ export default class Popover extends Component { Date: Tue, 27 Aug 2019 11:03:41 +0800 Subject: [PATCH 04/14] fix: #581 --- components/popover/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/popover/index.js b/components/popover/index.js index 9f959918e..78a1131ef 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -106,7 +106,10 @@ export default class Popover extends Component { this.eventTarget = e.target }) popper.current.addEventListener('mouseleave', e => { - this.delayHidePopper(e) + const poperPosition = popper.current.getBoundingClientRect() + if (e.clientY > poperPosition.y + poperPosition.height - 1 || e.clientY < poperPosition.y || e.clientX < poperPosition.x || e.clientX > poperPosition.x + poperPosition.width - 1) { + this.delayHidePopper(e) + } }) } } From f08113a85965986c0e78c16201e01d7eb752482b Mon Sep 17 00:00:00 2001 From: solarjoker Date: Tue, 27 Aug 2019 11:53:17 +0800 Subject: [PATCH 05/14] fix: #583 --- components/button/index.js | 1 + components/tooltip/index.js | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/components/button/index.js b/components/button/index.js index 90d973197..99c6dab3c 100644 --- a/components/button/index.js +++ b/components/button/index.js @@ -3,4 +3,5 @@ import ButtonGroup from './ButtonGroup' import './style/index' Button.Group = ButtonGroup +Button.IS_HI_BUTTON = true export default Button diff --git a/components/tooltip/index.js b/components/tooltip/index.js index 232b34a43..ed6392099 100644 --- a/components/tooltip/index.js +++ b/components/tooltip/index.js @@ -25,7 +25,19 @@ class Tooltip extends Component { state = { tooltipShow: this.props.defaultVisible } - + // 兼容处理 button disabled tooltip 不消失的问题 + compatDisabledBtn = el => { + if (el.type.IS_HI_BUTTON && el.props.disabled) { + return React.cloneElement(el, { + style: { + ...el.props.style, + pointerEvents: 'none' + } + }) + } else { + return el + } + } render () { const { placement, style, className, onClick, title, children, visible } = this.props const eleClass = classNames(`${prefixCls}-base`, placement && `${prefixCls}-${placement}`) @@ -57,7 +69,7 @@ class Tooltip extends Component { >
{title}
 - {children} + {this.compatDisabledBtn(children)}
) } From 555c16070ce9194f27b11b71a10c5fc44a3ca59f Mon Sep 17 00:00:00 2001 From: zhangjunjie Date: Tue, 27 Aug 2019 17:27:16 +0800 Subject: [PATCH 06/14] carousel --- components/carousel/index.js | 153 ++++++++++++++++++++++++--- components/carousel/style/index.scss | 65 ++++++++++++ docs/demo/carousel/section-base.jsx | 23 ++-- docs/demo/carousel/section-icon.jsx | 38 +++---- docs/zh-CN/components/carousel.mdx | 6 ++ docs/zh-CN/components/cascader.mdx | 26 +---- 6 files changed, 239 insertions(+), 72 deletions(-) diff --git a/components/carousel/index.js b/components/carousel/index.js index dd6c1597f..c35fd31e5 100644 --- a/components/carousel/index.js +++ b/components/carousel/index.js @@ -1,52 +1,177 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import Icon from '../icon' +import classNames from 'classnames' import './style/index' // const url = 'http://i1.mifile.cn/f/i/hiui/docs/' class Carousel extends Component { constructor (props) { super(props) - this.tempArr = [1, 2, 3, 4, 5, 6, 7, 8] this.rootRef = React.createRef() + const defaultActive = props.defaultActive this.state = { - rootWidth: 0 + rootWidth: 0, + showArrow: false, + active: (defaultActive >= props.children.length || defaultActive < 0) ? 0 : defaultActive } + this.timer = null } + componentDidMount () { this.setState({ rootWidth: this.rootRef.current.clientWidth + }, () => { + if (this.props.duration) { + this.autoPage() + } + }) + } + + goTo (page) { + if (page > this.props.children.length || page < 0) { + return + } + this.setState({ + active: page + }) + } + componentWillUnmount () { + this.timer && window.clearInterval(this.timer) + } + + autoPage () { + this.timer = window.setInterval(() => { + this.preNextEvent(1) + }, this.props.duration) + } + + pageEvent (active) { + this.setState({ + active }) } + + preNextEvent (val) { + let active = this.state.active + val + if (active >= this.props.children.length) { + active = 0 + } + this.setState({ + active + }) + } + + renderDot (type, key, index, active) { + if (type === 'sign') { + return
  • + } else { + const cls = classNames( + 'hi-carousel__dot', + active === index && 'hi-carousel__dot--active' + ) + return ( +
  • + ) + } + } + + mouseEvent (type) { + let showArrow = true + if (type === 'over') { + this.timer && window.clearInterval(this.timer) + } else { + showArrow = false + this.props.duration && this.autoPage() + } + this.setState({showArrow}) + } render () { + const { rootWidth, active, showArrow } = this.state + const { showDots, showArrows } = this.props const children = React.Children.toArray(this.props.children) - console.log(children) - return
    - {/* {this.props.children} */} -
    + const arrowCls = classNames( + 'hi-carousel__arrows', + showArrow && 'hi-carousel__arrows--show' + ) + return
    +
    { children.map((child, index) => { return React.cloneElement(child, { key: index, style: { - width: this.state.rootWidth, - display: 'inline-block' + position: 'relative', + opacity: active === index ? 1 : 0, + transition: 'opacity 300ms ease 0s', + left: -(rootWidth * index), + width: rootWidth, + display: 'inline-block', + fontSize: 24, + ...child.props.style } }) }) }
    + { + showArrows &&
      +
    • + +
      • +
    • + +
      • +
    + } + { + showDots &&
      + { + children.map((_, index) => { + const cls = classNames('hi-carousel__dot', active === index && 'hi-carousel__dot--active') + return
    • + }) + } +
    + }
    } } Carousel.propTypes = { - separator: PropTypes.string, - data: PropTypes.array, - onClick: PropTypes.func + duration: PropTypes.number, + onClick: PropTypes.func, + beforeChange: PropTypes.func, + afterChange: PropTypes.func, + showDots: PropTypes.bool, + showArrows: PropTypes.bool, + defaultActive: PropTypes.number } Carousel.defaultProps = { - separator: '|', - data: [], - onClick: () => { } + duration: 0, + onClick: () => {}, + beforeChange: () => {}, + afterChange: () => {}, + showDots: true, + showArrows: true, + defaultActive: 0 } + export default Carousel diff --git a/components/carousel/style/index.scss b/components/carousel/style/index.scss index 63ffa4200..cf049545b 100644 --- a/components/carousel/style/index.scss +++ b/components/carousel/style/index.scss @@ -1,9 +1,74 @@ .hi-carousel { + width: 100%; color: rgba(153, 153, 153, 1); overflow: hidden; + position: relative; &__container { height: 100%; + transition: all 500ms; + } + + &__dots { + position: absolute; + bottom: 24px; + margin: 0; + padding: 0; + left: 50%; + transform: translateX(-50%); + } + + &__dot { + width: 24px; + height: 4px; + background: rgba(255, 255, 255, 0.4); + border-radius: 2px; display: inline-block; + margin-left: 4px; + cursor: pointer; + transition: all 1s; + + &--active:not(.hi-carousel__dot--sign) { + background: rgba(255, 255, 255, 1); + width: 48px; + } + + &--sign { + width: 24px; + } + } + + &__arrows { + position: absolute; + width: 100%; + list-style: none; + margin: 0; + padding: 0; + top: 50%; + transform: translateY(-28px); + display: flex; + justify-content: space-between; + visibility: hidden; + + &--show { + visibility: visible; + } + } + + &__arrow { + width: 56px; + height: 56px; + background: rgba(0, 0, 0, 0.25); + border-radius: 50%; + text-align: center; + line-height: 56px; + color: #fff; + font-size: 32px; + margin-left: 24px; + cursor: pointer; + + &:last-child { + margin-right: 24px; + } } } diff --git a/docs/demo/carousel/section-base.jsx b/docs/demo/carousel/section-base.jsx index 4bcdbe876..c63a66efb 100644 --- a/docs/demo/carousel/section-base.jsx +++ b/docs/demo/carousel/section-base.jsx @@ -5,23 +5,20 @@ const prefix = 'alert-base' const code = `import React from 'react' import Carousel from '@hi-ui/hiui/es/carousel'\n class Demo extends React.Component { + constructor (props) { + super(props) + } + render () { - const data = [1, 2, 3, 4, 5, 6, 7, 8] + const data = [1, 2, 3, 4, 5, 6, 7, 8, 9] return ( -
    - - { - /* - { - data.map((item, index) => { - return - }) - } - */ - } +
    + { data.map((item) => { - return
    {item}
    + return
    {item}
    }) }     diff --git a/docs/demo/carousel/section-icon.jsx b/docs/demo/carousel/section-icon.jsx index bea6eba06..85496b8a5 100644 --- a/docs/demo/carousel/section-icon.jsx +++ b/docs/demo/carousel/section-icon.jsx @@ -1,35 +1,27 @@ import React from 'react' import DocViewer from '../../../libs/doc-viewer' -import Breadcrumb from '../../../components/breadcrumb' -const prefix = 'breadcrumb-base' +import Carousel from '../../../components/carousel' +const prefix = 'alert-base' const code = `import React from 'react' -import Breadcrumb from '@hi-ui/hiui/es/Breadcrumb'\n +import Carousel from '@hi-ui/hiui/es/carousel'\n class Demo extends React.Component { render () { - const data = [{ - content: '首页', - path: '/home' - }, { - icon: 'document', - path: '/product' - }, { - icon: 'component', - content: '手机', - path: '/phone' - }, { - content: '红米系列', - path: '/redmi' - }, { - content: 'Note7', - path: '/note7' - }] + const data = [1, 2, 3, 4, 5, 6, 7, 8] return ( -
    - +
    + + { + data.map((item, index) => { + return + }) + } +
    ) } }` -const DemoBase = () => +const DemoBase = () => export default DemoBase diff --git a/docs/zh-CN/components/carousel.mdx b/docs/zh-CN/components/carousel.mdx index f0fc75884..0a2797b1a 100644 --- a/docs/zh-CN/components/carousel.mdx +++ b/docs/zh-CN/components/carousel.mdx @@ -6,6 +6,12 @@ import DemoBase from '../../demo/carousel/section-base.jsx' +## 图片展示 + +import DemoImage from '../../demo/carousel/section-icon.jsx' + + + ## Props | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/docs/zh-CN/components/cascader.mdx b/docs/zh-CN/components/cascader.mdx index 1542be669..1c0a3f9f8 100644 --- a/docs/zh-CN/components/cascader.mdx +++ b/docs/zh-CN/components/cascader.mdx @@ -30,25 +30,7 @@ import { Badge } from '@libs' | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------- | --------------------------- | ------------- | ------------------------------------------------------- | -| fieldNames | 设置 options 中 label, value, children 对应的 key | object | - | { label: 'label', value: 'value', children: 'children'} | -| data | 设置选择项数据源 | DataItem[] | - | - | -| value | 设置当前选中值 | string[] | - | [] | -| searchable | 是否可搜索 | boolean | true \| false | false | -| clearable | 是否可清空 | boolean | true \| false | true | -| disabled | 是否禁止使用 | boolean | true \| false | false | -| changeOnSelect | 是否启用选择即改变功能 | boolean | true \| false | false | -| placeholder | 输入框占位 | string | - | '请选择' | -| emptyContent | 设置选项为空时展示的内容 | string \| ReactNode | - | '无匹配数据' | -| displayRender | 自定义选择后展示的内容 | (value: string[]) => string | - | - | -| style | 自定义样式 | object | - | - | -| onChange | 选择后的回调 | (value: string[]) => void | - | - | - -## Type - -### DataItem - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| -------- | -------- | ------- | ------------- | ------ | -| content | 选择项 | string | - | - | -| id | 选择项值 | string | - | - | -| disabled | 是否禁用 | boolean | true \| false | false | +| duration | 自动切换间隔，默认不自动切换 | number | - | 0 | +| showDots | 是否显示分页指示器 | boolean | - | false | +| showArrows | 是否显示箭头指示器 | boolean | - | false | +| defaultActive | 默认激活索引，从0开始 | number | - | 0 | From ff82983ccb3f7cc30e949771777c7b8126f6b00b Mon Sep 17 00:00:00 2001 From: zhangjunjie Date: Tue, 27 Aug 2019 18:52:21 +0800 Subject: [PATCH 07/14] clearable --- components/date-picker/BasePicker.js | 14 ++++++++++---- docs/demo/date-picker/section-ban-date.jsx | 1 + docs/zh-CN/components/date-picker.mdx | 1 + 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/components/date-picker/BasePicker.js b/components/date-picker/BasePicker.js index a2019459e..ae183cb54 100644 --- a/components/date-picker/BasePicker.js +++ b/components/date-picker/BasePicker.js @@ -264,12 +264,13 @@ class BasePicker extends Component { } _icon () { const {isFocus} = this.state + const { clearable } = this.props const iconCls = classNames( 'hi-datepicker__input-icon', 'hi-icon', - isFocus ? 'icon-close-circle clear' : 'icon-date' + (isFocus && clearable) ? 'icon-close-circle clear' : 'icon-date' ) - return isFocus + return (isFocus && clearable) ? : { if (this.props.disabled) return @@ -341,6 +342,9 @@ BasePicker.propTypes = { if (val === undefined || val === null) { return null } + if (!val) { + return null + } if (val.start && val.end) { const _start = dateFormat(val.start) const _end = dateFormat(val.end) @@ -364,13 +368,15 @@ BasePicker.propTypes = { if (val < 5 || val > 480 || (val > 60 && val % 60 !== 0) || (val < 60 && 60 % val !== 0)) { return new Error(`Invalid prop ${propName} supplied to ${componentName}. This value must be greater than 5 and less than 480 and is a multiple of 60.`) } - } + }, + clearable: PropTypes.bool } BasePicker.defaultProps = { type: 'date', disabled: false, showWeekNumber: true, weekOffset: 0, - timeInterval: 240 + timeInterval: 240, + clearable: true } export default BasePicker diff --git a/docs/demo/date-picker/section-ban-date.jsx b/docs/demo/date-picker/section-ban-date.jsx index fa296ca8c..254d93345 100644 --- a/docs/demo/date-picker/section-ban-date.jsx +++ b/docs/demo/date-picker/section-ban-date.jsx @@ -18,6 +18,7 @@ class Demo extends React.Component { min={new Date()} max={new Date().getTime() + 30 * 24 * 60 * 60 * 1000} onChange={(date) => { + console.log(date) this.setState({date}) }} /> diff --git a/docs/zh-CN/components/date-picker.mdx b/docs/zh-CN/components/date-picker.mdx index 0b93cb340..c4a0c94ae 100755 --- a/docs/zh-CN/components/date-picker.mdx +++ b/docs/zh-CN/components/date-picker.mdx @@ -95,6 +95,7 @@ import DemoModal from '../../demo/date-picker/section-modal.jsx' | minDate | 最小日期 | Date | null | null | | maxDate | 最大日期 | Date | null | null | | disabled | 是否禁用输入框 | boolean | true \| false | false | +| clearable | 是否可以清空 | boolean | true \| false | true | | showTime | 是否在日期选择器中显示时间选择器 | boolean | true \| false | false | | shortcuts | 快捷面板 | string[] | 近一周, 近一月, 近三月, 近一年 | null | | weekOffset | 周起始
    默认周日做为第一列 | number | 0/1 | 0 | From 8ea760c83d36bae7f2bee009b3a72e7732289489 Mon Sep 17 00:00:00 2001 From: solarjoker Date: Wed, 28 Aug 2019 17:31:20 +0800 Subject: [PATCH 08/14] fix: #587 --- components/select/Select.js | 27 ++++++++------------------- package.json | 1 + 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/components/select/Select.js b/components/select/Select.js index 6b0e361f9..dd147e10c 100644 --- a/components/select/Select.js +++ b/components/select/Select.js @@ -10,6 +10,8 @@ import SelectInput from './SelectInput' import SelectDropdown from './SelectDropdown' import Provider from '../context' import fetchJsonp from 'fetch-jsonp' +import qs from 'qs' + class Select extends Component { autoloadFlag = true // 第一次自动加载数据标识 @@ -347,7 +349,7 @@ class Select extends Component { mode, data = {}, type = 'GET', - key = 'keyword', + key, jsonpCallback = 'callback', ...options } = this.props.dataSource @@ -357,24 +359,11 @@ class Select extends Component { : keyword this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词 - const queryParams = (() => { - if (!queryParams) { - return '' - } - if (typeof params === 'string') { - return params - } - if (Object.prototype.toString.call(params) === '[object Object]') { - return Object.keys(params) - .map((key) => `&${key}=${params[key]}`) - .join('') - } - })() - + const queryParams = qs.stringify(Object.assign({}, params, key && {[key]: keyword})) url = - url.indexOf('?') === -1 - ? `${url}?${[key]}=${keyword}${queryParams}` - : `${url}&${[key]}=${keyword}${queryParams}` + url.includes('?') + ? `${url}&${queryParams}` + : `${url}?${queryParams}` if (type.toUpperCase() === 'POST') { options.body = JSON.stringify(data) @@ -443,7 +432,7 @@ class Select extends Component { () => this.resetFocusedIndex() ) - if (this.props.dataSource) { + if (this.props.dataSource && this.props.dataSource.key) { if ( this.props.autoload || keyword.toString().length >= this.state.queryLength diff --git a/package.json b/package.json index 6200e1546..6c73fc7b7 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "github-markdown-css": "^3.0.1", "hoist-non-react-statics": "^2.5.0", "lodash": "^4.17.11", + "qs": "^6.8.0", "react": "^16.8.6", "react-addons-css-transition-group": "^15.6.2", "react-click-outside": "^3.0.1", From 400432797ea9df991a341200be3d264bb71558e8 Mon Sep 17 00:00:00 2001 From: solarjoker Date: Wed, 28 Aug 2019 17:34:25 +0800 Subject: [PATCH 09/14] feat: change indicator name --- components/button/index.js | 2 +- components/tooltip/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/button/index.js b/components/button/index.js index 99c6dab3c..4023ddb59 100644 --- a/components/button/index.js +++ b/components/button/index.js @@ -3,5 +3,5 @@ import ButtonGroup from './ButtonGroup' import './style/index' Button.Group = ButtonGroup -Button.IS_HI_BUTTON = true +Button.IS_HI_COMPONENT = true export default Button diff --git a/components/tooltip/index.js b/components/tooltip/index.js index ed6392099..035145ff8 100644 --- a/components/tooltip/index.js +++ b/components/tooltip/index.js @@ -27,7 +27,7 @@ class Tooltip extends Component { } // 兼容处理 button disabled tooltip 不消失的问题 compatDisabledBtn = el => { - if (el.type.IS_HI_BUTTON && el.props.disabled) { + if (el.type.IS_HI_COMPONENT && el.props.disabled) { return React.cloneElement(el, { style: { ...el.props.style, From dfa7a2543a593dcba0cc3a82351bba327bd681ae Mon Sep 17 00:00:00 2001 From: zhangjunjie Date: Wed, 28 Aug 2019 18:17:51 +0800 Subject: [PATCH 10/14] update --- docs/demo/carousel/section-base.jsx | 2 +- docs/demo/carousel/section-icon.jsx | 2 +- docs/zh-CN/components/carousel.mdx | 24 +++++++----------------- docs/zh-CN/components/cascader.mdx | 26 ++++++++++++++++++++++---- 4 files changed, 31 insertions(+), 23 deletions(-) diff --git a/docs/demo/carousel/section-base.jsx b/docs/demo/carousel/section-base.jsx index c63a66efb..f0470c742 100644 --- a/docs/demo/carousel/section-base.jsx +++ b/docs/demo/carousel/section-base.jsx @@ -1,7 +1,7 @@ import React from 'react' import DocViewer from '../../../libs/doc-viewer' import Carousel from '../../../components/carousel' -const prefix = 'alert-base' +const prefix = 'carousel-base' const code = `import React from 'react' import Carousel from '@hi-ui/hiui/es/carousel'\n class Demo extends React.Component { diff --git a/docs/demo/carousel/section-icon.jsx b/docs/demo/carousel/section-icon.jsx index 85496b8a5..5ab0544a3 100644 --- a/docs/demo/carousel/section-icon.jsx +++ b/docs/demo/carousel/section-icon.jsx @@ -1,7 +1,7 @@ import React from 'react' import DocViewer from '../../../libs/doc-viewer' import Carousel from '../../../components/carousel' -const prefix = 'alert-base' +const prefix = 'carousel-base' const code = `import React from 'react' import Carousel from '@hi-ui/hiui/es/carousel'\n class Demo extends React.Component { diff --git a/docs/zh-CN/components/carousel.mdx b/docs/zh-CN/components/carousel.mdx index 0a2797b1a..f5dc47f3d 100644 --- a/docs/zh-CN/components/carousel.mdx +++ b/docs/zh-CN/components/carousel.mdx @@ -1,4 +1,4 @@ -# Breadcrumb 面包屑 +# Carousel 走马灯 ## 基础用法 @@ -14,19 +14,9 @@ import DemoImage from '../../demo/carousel/section-icon.jsx' ## Props -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| --------- | ------------------------ | ----------------------- | ------------------------------------------- | ------ | -| data | 面包屑数据 | DataItem [] | - | - | -| separator | 自定义分隔符 | string | - | '|' | -| onClick | 点击回调函数 | （path: string）=> void | - | - | - - -## Type - -### DataItem - -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| -------- | ----------------------------------- | ------------------- | ------------- | ------ | -| content | 面包屑的内容 | string \| ReactNode | - | - | -| path | 要跳转的路径 | string | - | - | -| icon | 自定义图标 | string | 详见 [``](/hiui/zh-CN/docs/icon) 组件 ︎ | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------------- | ------------------------------------------------- | --------------------------- | ------------- | ------------------------------------------------------- | +| duration | 自动切换间隔，默认不自动切换 | number | - | 0 | +| showDots | 是否显示分页指示器 | boolean | - | false | +| showArrows | 是否显示箭头指示器 | boolean | - | false | +| defaultActive | 默认激活索引，从0开始 | number | - | 0 | diff --git a/docs/zh-CN/components/cascader.mdx b/docs/zh-CN/components/cascader.mdx index 1c0a3f9f8..1542be669 100644 --- a/docs/zh-CN/components/cascader.mdx +++ b/docs/zh-CN/components/cascader.mdx @@ -30,7 +30,25 @@ import { Badge } from '@libs' | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------- | --------------------------- | ------------- | ------------------------------------------------------- | -| duration | 自动切换间隔，默认不自动切换 | number | - | 0 | -| showDots | 是否显示分页指示器 | boolean | - | false | -| showArrows | 是否显示箭头指示器 | boolean | - | false | -| defaultActive | 默认激活索引，从0开始 | number | - | 0 | +| fieldNames | 设置 options 中 label, value, children 对应的 key | object | - | { label: 'label', value: 'value', children: 'children'} | +| data | 设置选择项数据源 | DataItem[] | - | - | +| value | 设置当前选中值 | string[] | - | [] | +| searchable | 是否可搜索 | boolean | true \| false | false | +| clearable | 是否可清空 | boolean | true \| false | true | +| disabled | 是否禁止使用 | boolean | true \| false | false | +| changeOnSelect | 是否启用选择即改变功能 | boolean | true \| false | false | +| placeholder | 输入框占位 | string | - | '请选择' | +| emptyContent | 设置选项为空时展示的内容 | string \| ReactNode | - | '无匹配数据' | +| displayRender | 自定义选择后展示的内容 | (value: string[]) => string | - | - | +| style | 自定义样式 | object | - | - | +| onChange | 选择后的回调 | (value: string[]) => void | - | - | + +## Type + +### DataItem + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------- | -------- | ------- | ------------- | ------ | +| content | 选择项 | string | - | - | +| id | 选择项值 | string | - | - | +| disabled | 是否禁用 | boolean | true \| false | false | From 59a144aec59118e6227fafdc9e8900f7c4ed75c6 Mon Sep 17 00:00:00 2001 From: ninty Date: Thu, 29 Aug 2019 09:07:26 +0800 Subject: [PATCH 11/14] =?UTF-8?q?fix(tree):=20=E4=BF=AE=E5=A4=8D=E6=B8=85?= =?UTF-8?q?=E9=99=A4=E6=90=9C=E7=B4=A2=E6=9D=A1=E4=BB=B6=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E6=94=B6=E7=BC=A9=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tree/tree-legacy/util.js | 2 +- components/tree/util.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tree/tree-legacy/util.js b/components/tree/tree-legacy/util.js index 674717088..d57019592 100644 --- a/components/tree/tree-legacy/util.js +++ b/components/tree/tree-legacy/util.js @@ -293,7 +293,7 @@ export const getAncestorIds = (id, data, arr = []) => { // 收集所有需要展开的节点 id export const collectExpandId = (data, searchValue, collection = [], allData) => { data.forEach(item => { - if (item.title.includes(searchValue)) { + if (searchValue && item.title.includes(searchValue)) { const parentIds = getAncestorIds(item.id, allData, []) collection.splice(collection.length - 1, 0, ...parentIds) } diff --git a/components/tree/util.js b/components/tree/util.js index 674717088..d57019592 100644 --- a/components/tree/util.js +++ b/components/tree/util.js @@ -293,7 +293,7 @@ export const getAncestorIds = (id, data, arr = []) => { // 收集所有需要展开的节点 id export const collectExpandId = (data, searchValue, collection = [], allData) => { data.forEach(item => { - if (item.title.includes(searchValue)) { + if (searchValue && item.title.includes(searchValue)) { const parentIds = getAncestorIds(item.id, allData, []) collection.splice(collection.length - 1, 0, ...parentIds) } From 976fb9bd35aef4aa3baf1be35e10da1a6c9a9122 Mon Sep 17 00:00:00 2001 From: solarjoker Date: Thu, 29 Aug 2019 10:21:48 +0800 Subject: [PATCH 12/14] chore: update version and changelog --- CHANGELOG.md | 11 +++++++++++ docs/zh-CN/components/changelog.mdx | 13 +++++++++++-- package.json | 2 +- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d3e9e593..9f0f5db93 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # 更新日志 +## 2.2.0 + +- 新增 `` 走马灯组件 [#115](https://github.com/XiaoMi/hiui/issues/115) +- 新增 `` clearable 属性控制是否可清空 [#590](https://github.com/XiaoMi/hiui/issues/590) +- 新增 `` visible 属性手动控制显示或隐藏 [#589](https://github.com/XiaoMi/hiui/issues/589) +- 新增 `` visible 属性手动控制显示或隐藏 [#588](https://github.com/XiaoMi/hiui/issues/588) +- 修复 `` clearable 不生效的问题 [#580](https://github.com/XiaoMi/hiui/issues/580) diff --git a/docs/zh-CN/components/changelog.mdx b/docs/zh-CN/components/changelog.mdx index 6748c294a..91b88af8e 100644 --- a/docs/zh-CN/components/changelog.mdx +++ b/docs/zh-CN/components/changelog.mdx @@ -1,13 +1,22 @@ # 更新日志 +## 2.2.0 + +- 新增 `` 走马灯组件 [#115](https://github.com/XiaoMi/hiui/issues/115) +- 新增 `` clearable 属性控制是否可清空 [#590](https://github.com/XiaoMi/hiui/issues/590) +- 新增 `` visible 属性手动控制显示或隐藏 [#589](https://github.com/XiaoMi/hiui/issues/589) +- 新增 `` visible 属性手动控制显示或隐藏 [#588](https://github.com/XiaoMi/hiui/issues/588) +- 修复 `` clearable 不生效的问题 [#580](https://github.com/XiaoMi/hiui/issues/580) - 修复 `` 中的自定义上传结合 maxCount 不能上传的问题 [#582](https://github.com/XiaoMi/hiui/issues/582) - 修复 `` type 为 textarea 时的底部的样式问题 [#584](https://github.com/XiaoMi/hiui/issues/584) - - ## 2.1.0 - 新增 `` 面包屑组件 [#573](https://github.com/XiaoMi/hiui/issues/573) diff --git a/package.json b/package.json index 6c73fc7b7..387b8c343 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/hiui", - "version": "2.1.2", + "version": "2.2.0-rc", "description": "HIUI for React", "scripts": { "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'", From e09bd658a88e16af91bae480531e99ac6719faa5 Mon Sep 17 00:00:00 2001 From: solarjoker Date: Thu, 29 Aug 2019 10:46:46 +0800 Subject: [PATCH 13/14] docs: update doc --- docs/zh-CN/components/carousel.mdx | 4 ++-- docs/zh-CN/components/popover.mdx | 2 +- docs/zh-CN/components/tooltip.mdx | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/zh-CN/components/carousel.mdx b/docs/zh-CN/components/carousel.mdx index f5dc47f3d..baae2b0b7 100644 --- a/docs/zh-CN/components/carousel.mdx +++ b/docs/zh-CN/components/carousel.mdx @@ -17,6 +17,6 @@ import DemoImage from '../../demo/carousel/section-icon.jsx' | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------- | --------------------------- | ------------- | ------------------------------------------------------- | | duration | 自动切换间隔，默认不自动切换 | number | - | 0 | -| showDots | 是否显示分页指示器 | boolean | - | false | -| showArrows | 是否显示箭头指示器 | boolean | - | false | +| showDots | 是否显示分页指示器 | boolean | true \| false | false | +| showArrows | 是否显示箭头指示器 | boolean | true \| false | false | | defaultActive | 默认激活索引，从0开始 | number | - | 0 | diff --git a/docs/zh-CN/components/popover.mdx b/docs/zh-CN/components/popover.mdx index f69cd6e68..675eb8ec5 100755 --- a/docs/zh-CN/components/popover.mdx +++ b/docs/zh-CN/components/popover.mdx @@ -16,4 +16,4 @@ import DemoBase from '../../demo/popover/section-base.jsx' | content | 气泡卡片内容 | string \| ReactNode | - | - | | placement | 气泡卡片显示的位置 | string | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | | trigger | 气泡卡片触发方式 | string | 'click' \| 'focus' \| 'hover' | 'click' | -| visible | 控制气泡卡片的显示和隐藏（需要组件完全受控时使用） | boolean |true \| false | true | +| visible | 控制气泡卡片的显示和隐藏（需要组件完全受控时使用） | boolean |true \| false | - | diff --git a/docs/zh-CN/components/tooltip.mdx b/docs/zh-CN/components/tooltip.mdx index 45b9ef7e7..e82b9835d 100755 --- a/docs/zh-CN/components/tooltip.mdx +++ b/docs/zh-CN/components/tooltip.mdx @@ -20,6 +20,7 @@ import DemoApi from '../../demo/tooltip/section-api.jsx' | --------- | ------------------ | ------ | -------------------------------------- | ------ | | title | 提示文字内容 | string | 字符串 | -- | | placement | tooltip 显示的位置 | string | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | +| visible | 控制 tooltip 的显示和隐藏（需要组件完全受控时使用） | boolean | true \| false | - | ## Methods From 4fa08c077ce346f4076dee45efe0448ac4fb2d64 Mon Sep 17 00:00:00 2001 From: solarjoker Date: Thu, 29 Aug 2019 19:12:17 +0800 Subject: [PATCH 14/14] chore: update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 387b8c343..eb81a22ac 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/hiui", - "version": "2.2.0-rc", + "version": "2.2.0", "description": "HIUI for React", "scripts": { "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",