fix: 去除滚动条

da9ad30c · 田翔 · ac3bc805 · da9ad30c · da9ad30c · da9ad30c
Commit da9ad30c authored Mar 15, 2023 by 田翔
9 changed files
--- a/package.json
+++ b/package.json
 {
    "name": "panda-xform",
-    "version": "2.7.5",
+    "version": "2.7.6",
-    "description": "2.7.5: 去除滚动条",
+    "description": "2.7.6: 去除滚动条",
    "keywords": [
        "panda-xform"
    ],

--- a/src/core/FormDesigner/config/settings.js
+++ b/src/core/FormDesigner/config/settings.js
@@ -406,15 +406,35 @@ const textWidgets = [
        widget: 'htmlInput',
      },
      formatter: {
-        title: '格式化',
+        title: '数值格式',
        type: 'string',
-        widget: 'select',
+        widget: 'Formatting',
-        enum: ['%', '‰'],
+      },
-        default: '',
+      // isStoreFormatter: {
-        enumNames: ['%', '‰'],
+      //   title: '存储为转化值',
-        props: {
+      //   type: 'boolean',
-          allowClear: true
+      //   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: '控件样式',

--- a/src/core/widgets/settings/InputAddon/index.js
+++ b/src/core/widgets/settings/InputAddon/index.js
@@ -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

--- a/src/core/widgets/settings/InputAddon/index.less
+++ b/src/core/widgets/settings/InputAddon/index.less
 @import '~antd/es/style/themes/default.less';
-@pandaXform: ~'@{ant-prefix}-pandaXform';
+.inputAddon {
-.@{pandaXform} {
+  position: relative;
-  .inputAddon {
+  .@{ant-prefix}-input {
-    position: relative;
+    padding-right: 30px;
-    .@{ant-prefix}-input {
+  }
-      padding-right: 30px;
+  .addon {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    &:hover {
+      color: #4096ff;
    }
-    .addon {
+  }
-      position: absolute;
+  .iconBox {
-      right: 10px;
+    width: 100%;
-      top: 5px;
+    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;
      }
-    }
+      &[active='true'] {
-    .iconBox {
+        transition: all 0.3s ease;
-      width: 100%;
+        background: #4096ff;
-      height: 100%;
+        border-radius: 5px;
-      display: flex;
+        color: white;
-      flex-wrap: wrap;
+        transform: scale(1.2);
-      .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);
-        }
      }
    }
  }

--- a/src/core/widgets/settings/groupStyle/DecimalDigits/index.js
+++ b/src/core/widgets/settings/groupStyle/DecimalDigits/index.js
+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
--- a/src/core/widgets/settings/groupStyle/Formatting/index.js
+++ b/src/core/widgets/settings/groupStyle/Formatting/index.js
+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
--- a/src/core/widgets/settings/groupStyle/Formatting/index.less
+++ b/src/core/widgets/settings/groupStyle/Formatting/index.less
+.formatting {
+  position: relative;
+  .formattingIcon {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    &:hover {
+      color: #4096ff;
+    }
+  }
+}
\ No newline at end of file
--- a/src/core/widgets/settings/groupStyle/index.js
+++ b/src/core/widgets/settings/groupStyle/index.js
 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
--- a/src/core/widgets/text/NumberInput/index.js
+++ b/src/core/widgets/text/NumberInput/index.js
-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%' }}
    />