index.js 1.24 KB
Newer Older
1 2
import React, { useEffect, useContext } from 'react'
import { Input, Popover, ConfigProvider } from 'antd'
田翔's avatar
田翔 committed
3 4
import { QrcodeOutlined } from '@ant-design/icons'
import QRcode from 'qrcode.react'
田翔's avatar
田翔 committed
5
import styles from './index.less'
6

7 8
const Coding = (props) => {

9 10
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext)
  const prefixCls = getPrefixCls('pandaXform')
11
  const { value, onChange, addons, schema } = props
12
  const { disabled, prefixion, codingType, presetValue, required, placeholder } = schema
田翔's avatar
田翔 committed
13

田翔's avatar
田翔 committed
14 15 16 17
  const inputChange = (e) => {
    onChange(e.target.value)
  }

18 19
  useEffect(() => {
    if (addons) {
田翔's avatar
田翔 committed
20
      addons.setValue(addons.dataPath, presetValue || '')
21
    } else {
田翔's avatar
田翔 committed
22
      onChange(presetValue || '')
23 24 25
    }
  }, [])

田翔's avatar
田翔 committed
26 27
  const content = (
    <div>
28
      <QRcode value={value} />
田翔's avatar
田翔 committed
29 30 31
    </div>
  )

32
  return (
田翔's avatar
田翔 committed
33
    <div className={styles.coding} isdisabled={JSON.stringify(disabled)}>
田翔's avatar
田翔 committed
34
      <Input
田翔's avatar
田翔 committed
35
        placeholder={disabled ? (placeholder || '') : (placeholder || '请输入内容')}
田翔's avatar
田翔 committed
36
        onChange={inputChange}
37
        value={value}
38
        disabled={disabled}
田翔's avatar
田翔 committed
39
        addonAfter={
田翔's avatar
田翔 committed
40
          <Popover content={value ? content : null}>
田翔's avatar
田翔 committed
41 42 43 44 45
            <QrcodeOutlined />
          </Popover>
        }
      />
    </div>
46 47 48 49 50
  )

}

export default Coding