custom tool bar

@skyworthcloud/sky-material-custom-tool-bar

自定义工具条

API

参数名 说明 必填 类型 默认值 备注
config 工具对象参数集合，详见ToolObject对象说明 true Array []
getInstance 获取实例函数，主要用于获取组件的filed属性，从而获得表单中的value值 false Function -

ToolObject

参数名 说明 必填 类型 默认值 备注
label 工具的前置标签 true String - Button工具的label为显示标签
key 工具的key true String -
field 工具的表单字段 false String -
defaultValue 工具的表单字段默认值 false Object -
component 工具的类型 true String - 仅支持Input, Select, DatePicker, TimePicker, Button
componentProps 工具的所有自有属性 false Object {}

DEMO 列表

CustomToolBar

本 Demo 演示自定工具条的用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { CustomToolBar, ExampleComponent } from '@skyworthcloud/component';

class App extends Component {
  _searchField = null;
  config = [
  {
    label: '姓名',
    key: 'name',
    component: 'Input',
    field: 'name',
    componentProps: {
      trim: true,
      onChange: (value) => {
        console.log('onChange', value)
      },
      placeholder: '请输入姓名'
    }
  },
  {
    label: '性别',
    key: 'sex',
    component: 'Select',
    field: 'sex',
    defaultValue: 0,
    componentProps: {
      onChange: (value) => {
        console.log('onChange', value)
      },
      dataSource: [
        {
          label: 'All',
          value: 0,
        },
        {
          label: '男性',
          value: 1,
        },
        {
          label: '女性',
          value: 2,
        },
      ]
    }
  },
  {
    label: '开始日期',
    key: 'startTime',
    component: 'DatePicker',
    field: 'startTime',
    defaultValue: '2019-08-10 01:30:00',
    componentProps: {
      placeholder: 'Please select date',
      resetTime: true,
    }
  },
  {
    label: '时间范围',
    key: 'rangeDate',
    component: 'DateRangePicker',
    field: 'rangeDate',
    // defaultValue: '2019-08-10 01:30:00',
    componentProps: {
      placeholder: 'Please select date',
      showTime: { format: 'HH:mm', minuteStep: 15 }
    }
  },
  {
    label: '时间',
    key: 'time',
    component: 'TimePicker',
    field: 'time',
    defaultValue: '01:30',
    componentProps: {
      onChange: (value) => {
        console.log('onChange', value)
      },
      placeholder: 'Please select time',
      format: 'HH:mm',
    }
  },
  {
    label: '复选',
    key: 'checkBox',
    component: 'CheckBox',
    field: 'checkBox',
    componentProps: {
      onChange: (value) => {
        console.log('onChange', value)
      },
    }
  },
  {
    label: '单选',
    key: 'radio',
    component: 'Radio',
    field: 'radio',
    componentProps: {
    }
  },
  {
    label: 'Search',
    key: 'search',
    component: 'Button',
    componentProps: {
      disabled: false,
      onClick: () => this.onSearch()
    }
  },
  {
    label: 'New',
    key: 'new',
    component: 'Button',
    componentProps: {
      disabled: true,
    }
  },
];

 onSearch = () => {
  console.log('search params: ', this._searchField.getValues())
}

  render() {
    return (
      <div>
        <CustomToolBar config = {this.config}
          getInstance={(childCp) => {
            if (childCp) {
              this._searchField = childCp.getField();
            }
          }} 
        />
        <ExampleComponent />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);