antdpackagingtest

antd components library

使用 React+typescript 的组件库

对于antd表单的二次封装，便于项目中方便使用，减少代码书写，
支持多种input、select、time方法，请参考antd

//启动本地环境
npm run stroybook

npm install antdpackaging --save

使用

// 加载样式, 如果项目中已经引入@import '~antd/dist/antd.css'，则不需要引入样式，否则需要
import 'antdpackaging/dist/index.css'

// 引入组件
import { FormComponent } from 'antdpackaging'

// 代码示例
function App() {
  const [ currentObj, setObj ] = useState({
    name: '',
    names: ['Jack-value', 'Lucy-value'],
    Username: '',
    AreaLabel: ['shanghai'],
    Area: '',
    time: '',
    timeRange: [],
    checkbox: ['beijing', 'shanghai'],
    radio: '北京',
  });
  let QuickSearchTypeDic = [
    {
      'value': '',
      'label': '所有'
    },
    {
      'value': 'Jack-value',
      'label': 'Jack'
    },
    {
      'value': 'Lucy-value',
      'label': 'Lucy'
    },
    {
      'value': 'Tom-value',
      'label': 'Tom'
    }
  ];
  let QuickSearch = [
    {
      key: 'beijing',
      disabled: true,
      value: '北京',
      label: '北京'
    },
    {
      key: 'shanghai',
      value: '上海',
      label: '上海'
    }
  ];
  let sourceList = [
    [ // 多选
      {
        type: 'statusMultiple', md: 24, label: '多选', value: currentObj.names, name: 'names', query: true,
        options: QuickSearchTypeDic,
      },
    ],
    [ // 单选
      {
        type: 'status', md: 24, label: '单选', value: currentObj.name, name: 'name', query: true,
        options: QuickSearchTypeDic
      },
    ],
    [
      { type: 'input', addonBefore:"http://", must: true, hint: true, hintText: '友情提示', label: 'Username', value: currentObj.Username, name: 'Username' },
      {
        type: 'select', label: 'AreaLabel',
        mode: 'multiple',
        options: QuickSearch,
        optionsObj: { label: 'key', value: 'key' },
        value: currentObj.AreaLabel, name: 'AreaLabel'
      },
      {
        type: 'select', label: 'Area',
        showSearch: true,
        onSearch: (e: string) => {
          console.log(e)
        },
        options: QuickSearch,
        value: currentObj.Area, name: 'Area'
      }
    ],
    [
      { type: 'time', label: 'time', value: currentObj.time, name: 'time',
      disabledDate: (e)=>{
        // 自定义方法
        // return disabledStartDt(e, '', '',true)
      }
    },
      {
        type: 'timeRange', md: 16, label: 'timeRange', value: currentObj.timeRange, name: 'timeRange', showTime: true, dateFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    ],
    [
      {
        type: 'checkbox', label: 'checkbox',
        options: QuickSearch,
        optionsObj: { label: 'value', value: 'key' },
        value: currentObj.checkbox, name: 'checkbox'
      },
      {
        type: 'radio', label: 'radio',
        options: QuickSearch,
        value: currentObj.radio, name: 'radio'
      },
      {
        type: 'buttons',
        name: <div style={{ marginLeft: '10px', textAlign: 'right' }}>
          <Button type="primary" onClick={() => {
            query()
            action('callBcak')
          }
          }>
            获取数据
          </Button>
        </div>
      }
    ]
  ]

  const query = (dt, item) => {
    if (dt) {
      // 点击后立即获取数据
      if (item&&item.query) {
        console.log('点击后立即获取数据',dt)
      }
    } else {
      // 点击获取数据按钮后获取数据
      console.log('点击查询按钮后获取数据',currentObj)
    }
  }
  // useEffect(() => {
  //   if (currentItem && currentItem.query) {
  //     query()
  //   }
  // }, [currentObj]);
  const callBcak = (dt, item) => {
    // setItem(item)
    setObj(dt)
    query(dt, item)
  }
  return (
    <div className="App">
      <FormComponent callBcak={(dt, item) => {
        callBcak(dt, item)
      }
      } sourceList={sourceList} />
    </div>
  );
}

export default App;