Skip to content

X
xform
Commit da9ad30c authored by 田翔's avatar 田翔
Browse files
Options

fix: 去除滚动条

parent ac3bc805
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 50 deletions
package.json
View file @ da9ad30c
{
"name": "panda-xform",
"version": "2.7.5",
"description": "2.7.5: 去除滚动条",
"version": "2.7.6",
"description": "2.7.6: 去除滚动条",
"keywords": [
"panda-xform"
],
......
src/core/FormDesigner/config/settings.js
View file @ da9ad30c
......@@ -406,15 +406,35 @@ const textWidgets = [
widget: 'htmlInput',
},
formatter: {
title: '格式化',
title: '数值格式',
type: 'string',
widget: 'select',
enum: ['%', '‰'],
default: '',
enumNames: ['%', '‰'],
props: {
allowClear: true
}
widget: 'Formatting',
},
// isStoreFormatter: {
// title: '存储为转化值',
// type: 'boolean',
// displayType: 'row',
// labelWidth: 120,
// hidden: '{{Boolean(formData.formatter !== "${百分比}")}}',
// widget: 'BooleanSwitch',
// description: '存储格式化后的值(10%会存储为0.1)'
// },
decimalDigits: {
title: '小数位数',
type: 'string',
widget: 'DecimalDigits',
hidden: '{{!["${小数}", "${货币}"].includes(formData.formatter)}}',
dependencies: ['formatter']
},
min: {
title: '最小值',
type: 'string',
widget: 'NumerDefault',
},
max: {
title: '最大值',
type: 'string',
widget: 'NumerDefault',
},
groupStyle: {
title: '控件样式',
......
src/core/widgets/settings/InputAddon/index.js
View file @ da9ad30c
......@@ -44,7 +44,7 @@ const InputAddon = (props) => {
onCancel={onCancel}
bodyStyle={{ height: '450px', overflow: 'auto' }}
>
<div className={`iconBox`}>
<div className={styles.iconBox}>
{
iconList.map((v, i) => {
if (i === 0) return null
......
src/core/widgets/settings/InputAddon/index.less
View file @ da9ad30c
@import '~antd/es/style/themes/default.less';
@pandaXform: ~'@{ant-prefix}-pandaXform';
.@{pandaXform} {
.inputAddon {
position: relative;
.@{ant-prefix}-input {
padding-right: 30px;
.inputAddon {
position: relative;
.@{ant-prefix}-input {
padding-right: 30px;
}
.addon {
position: absolute;
right: 10px;
top: 5px;
&:hover {
color: #4096ff;
}
.addon {
position: absolute;
right: 10px;
top: 5px;
}
.iconBox {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
.iconItem {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
font-size: 50px;
&:hover {
color: #4096ff;
cursor: pointer;
}
}
.iconBox {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
.iconItem {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
font-size: 50px;
&:hover {
cursor: pointer;
}
&[active='true'] {
transition: all 0.3s ease;
background: #4096ff;
border-radius: 5px;
color: white;
transform: scale(1.2);
}
&[active='true'] {
transition: all 0.3s ease;
background: #4096ff;
border-radius: 5px;
color: white;
transform: scale(1.2);
}
}
}
......
src/core/widgets/settings/groupStyle/DecimalDigits/index.js 0 → 100644
View file @ da9ad30c
import React, { useEffect } from 'react'
import { InputNumber } from 'antd'
const DecimalDigits = (props) => {
const { value, onChange } = props
useEffect(() => {
if (!value) {
onChange('2')
}
}, [])
return (
<InputNumber
min={1}
value={Number(value)}
onChange={value => onChange(value ? `${parseInt(value)}` : '2')}
/>
)
}
export default DecimalDigits
\ No newline at end of file
src/core/widgets/settings/groupStyle/Formatting/index.js 0 → 100644
View file @ da9ad30c
import React from 'react'
import { Input, Dropdown, Menu } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import styles from './index.less'
const options = [
{ label: '整数', key: '${整数}' },
{ label: '小数', key: '${小数}' },
{ label: '货币', key: '${货币}' },
{ label: '百分比', key: '${百分比}' },
]
const Formatting = (props) => {
const { value, onChange, addons } = props
const inputChange = (e) => {
onChange(e.target.value)
}
const menuClick = (item) => {
onChange(item.key)
}
return (
<div className={styles.formatting}>
<Input
style={{ color: options.map(v => v.key).includes(value) ? '#4096ff' : '' }}
value={value}
onChange={inputChange}
>
</Input>
<div className={styles.formattingIcon}>
<Dropdown
overlay={(
<Menu
onClick={menuClick}
items={options}
/>
)}
trigger='click'
>
<PlusOutlined />
</Dropdown>
</div>
</div>
)
}
export default Formatting
\ No newline at end of file
src/core/widgets/settings/groupStyle/Formatting/index.less 0 → 100644
View file @ da9ad30c
.formatting {
position: relative;
.formattingIcon {
position: absolute;
top: 5px;
right: 10px;
&:hover {
color: #4096ff;
}
}
}
\ No newline at end of file
src/core/widgets/settings/groupStyle/index.js
View file @ da9ad30c
import PercentSlider from './PercentSlider'
import ShowText from './ShowText'
import Formatting from './Formatting'
import DecimalDigits from './DecimalDigits'
const groupStyle = {
PercentSlider,
ShowText,
Formatting,
DecimalDigits,
}
export default groupStyle
\ No newline at end of file
src/core/widgets/text/NumberInput/index.js
View file @ da9ad30c
import React, { useEffect, useMemo } from 'react'
import React, { useEffect, useMemo, useState } from 'react'
import { InputNumber } from 'antd'
function formatMoney(number, places, symbol, thousand, decimal) {
number = number || 0;
places = !isNaN(places = Math.abs(places)) ? places : 2;
symbol = symbol !== undefined ? symbol : "$";
thousand = thousand || ",";
decimal = decimal || ".";
var negative = number < 0 ? "-" : "",
i = parseInt(number = Math.abs(+number || 0).toFixed(places), 10) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return symbol + negative + (j ? i.substr(0, j) + thousand : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousand) + (places ? decimal + Math.abs(number - i).toFixed(places).slice(2) : "");
}
const NumberInput = (props) => {
const { value, onChange, schema, addons } = props
const { disabled, presetValue, placeholder, prefix, formatter, addonBefore, addonAfter } = schema
const { disabled, presetValue, placeholder, prefix, formatter, decimalDigits, isStoreFormatter, addonBefore, addonAfter, min, max } = schema
const [once, setOnce] = useState(true)
useEffect(() => {
if (addons) {
......@@ -16,19 +29,39 @@ const NumberInput = (props) => {
const inputChange = (value) => {
if (addons) {
onChange(value + '')
onChange(`${value}`)
}
}
const formatterFn = (value) => {
if (value) {
if (formatter === '${百分比}') {
return `${value}%`
} else if (formatter === '${货币}') {
return formatMoney(Number(value), Number(decimalDigits))
} else if (formatter === '${整数}') {
return `${parseInt(value)}`
} else if (formatter === '${小数}') {
return Number(value).toFixed(Number(decimalDigits))
} else if (formatter) {
return `${value}${formatter}`
}
}
return value
}
return (
<InputNumber
min={min || Number.MIN_SAFE_INTEGER}
max={max || Number.MAX_SAFE_INTEGER}
step={(formatter === '${百分比}' && isStoreFormatter) ? 0.01 : 1}
addonBefore={addonBefore}
addonAfter={addonAfter}
prefix={prefix}
placeholder={placeholder}
disabled={disabled}
disabled={disabled}
value={Number(value)}
formatter={(value) => value && formatter ? `${value}${formatter}` : value}
formatter={formatterFn}
onChange={inputChange}
style={{ width: '100%' }}
/>
......
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