Commit 1109e1c7 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

fix:

parent a77f5329
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
"chalk": "^4.1.0", "chalk": "^4.1.0",
"clone": "^2.1.2", "clone": "^2.1.2",
"connect-history-api-fallback": "^1.6.0", "connect-history-api-fallback": "^1.6.0",
"cross-env": "^7.0.2", "cross-env": "^7.0.3",
"events": "^3.2.0", "events": "^3.2.0",
"express": "^4.17.1", "express": "^4.17.1",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
......
import React, { useRef, useEffect, useState } from 'react' import React, { useRef, useEffect, useState } from 'react'
import { Input } from 'antd'; import { Input } from 'antd';
import styled from 'styled-components' import styled from 'styled-components'
/** /**
* 自定义数值范围控件 * 自定义数值范围控件
*/ */
const RowStyleLayout = styled(props => <div {...props} />)` const RowStyleLayout = styled(props => <div {...props} />)`
.site-input-split { .site-input-split {
background-color: #fff; background-color: #fff;
} }
.site-input-right { .site-input-right {
border-left-width: 0; border-left-width: 0;
} }
.site-input-right:hover, .site-input-right:hover,
.site-input-right:focus { .site-input-right:focus {
border-left-width: 1px; border-left-width: 1px;
} }
.ant-input-rtl.site-input-right { .ant-input-rtl.site-input-right {
border-right-width: 0; border-right-width: 0;
} }
.ant-input-rtl.site-input-right:hover, .ant-input-rtl.site-input-right:hover,
.ant-input-rtl.site-input-right:focus { .ant-input-rtl.site-input-right:focus {
border-right-width: 1px; border-right-width: 1px;
} }
` `
const NumberRange = (props) => { const NumberRange = (props) => {
const { value, mutators } = props const { value, mutators } = props
const { placeholder = [], ...rest } = props.props["x-component-props"] || {} const { placeholder = [], ...rest } = props.props["x-component-props"] || {}
const [rangeValue, setrangeValue] = useState([]) const [rangeValue, setrangeValue] = useState([])
useEffect(() => { useEffect(() => {
if(rangeValue.length) { if(rangeValue.length) {
mutators.change(rangeValue); mutators.change(rangeValue);
} }
}, [rangeValue]) }, [rangeValue])
const loseBlur = (e, index) => { const loseBlur = (e, index) => {
setrangeValue(() => { setrangeValue(() => {
let newValue = [...rangeValue] let newValue = [...rangeValue]
newValue[index] = e.target.value newValue[index] = e.target.value
return newValue return newValue
}) })
} }
return ( return (
<RowStyleLayout> <RowStyleLayout>
<Input.Group compact {...rest}> <Input.Group compact {...rest}>
<Input <Input
style={{ style={{
width: 100, width: 100,
textAlign: 'center' textAlign: 'center'
}} }}
placeholder={placeholder[0] || '最小值'} placeholder={placeholder[0] || '最小值'}
onBlur={(e) => loseBlur(e, 0)} onBlur={(e) => loseBlur(e, 0)}
/> />
<Input <Input
className="site-input-split" className="site-input-split"
style={{ style={{
width: 30, width: 30,
borderLeft: 0, borderLeft: 0,
borderRight: 0, borderRight: 0,
pointerEvents: 'none', pointerEvents: 'none',
}} background: '#fff',
placeholder="~" }}
disabled placeholder="~"
/> disabled
<Input />
className="site-input-right" <Input
style={{ className="site-input-right"
width: 100, style={{
textAlign: 'center', width: 100,
}} textAlign: 'center',
placeholder={placeholder[1] || '最大值'} }}
onBlur={(e) => loseBlur(e, 1)} placeholder={placeholder[1] || '最大值'}
/> onBlur={(e) => loseBlur(e, 1)}
</Input.Group> />
</RowStyleLayout> </Input.Group>
) </RowStyleLayout>
} )
}
NumberRange.defaultProps = {}
NumberRange.defaultProps = {}
NumberRange.isFieldComponent = true;
NumberRange.isFieldComponent = true;
export default NumberRange
\ No newline at end of file export default NumberRange
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment