When the Form component in choerodon-UI component library is used for query Form, its own dataSet data source is used for development. According to the query fields in the dataSet, components such as TextField, Select and DatePicker are introduced, and style typesetting is very troublesome. Therefore, a QueryMoreBar component was written to encapsulate it, and the type field in the field object attribute of the query field in the dataSet was used to determine which form item component should be introduced

use

Start by defining a dataSet dataSet

const FormDS = (): DataSetProps= > {
  return {
    queryDataSet: new DataSet({
      autoCreate: true.fields: [{name: "name".type: FieldType.string, label: "Name" },
        {
          name: "sex".type: FieldType.string,
          label: "Age".options: new DataSet({
            paging: false.data: [{ value: "F".meaning: "Female" }, { value: "M".meaning: "Male"}]})}, {name: "email".type: FieldType.email,
          label: "Email"
        },
        {
          name: "phone".type: FieldType.string,
          label: "Contact Information"
        },
        {
          name: "dadeline".type: FieldType.month,
          label: "Expiration Date"}]})}; };Copy the code

Then, several required properties of QueryMoreBar are passed in: props, dataSet, queryFunction, and so on

 <QueryMoreBar
    dataSet={formDS}
    queryFunction={handleQuery}
    queryFieldsLimit={2}
    labelWidth={80} / >Copy the code

Run the yarn start command to view the page

QueryMoreBar components

Properties props

  • DataSet: Indicates the type of the dataSet, which is mandatory
  • QueryFunction: callback function, mandatory
  • Buttons: an array of type ReactElement, which can be omitted
  • QueryFieldsLimit: Number type, number of rows, default 4, can be omitted
  • LabelWidth: Number type, default 100, can be omitted

Gets the query table item

The Form component in Choerodon-UI is bound to the data source dataSet and does not need to control each child element. It only needs to give the correct value to the name attribute of each child element of the Form item, but it still needs to introduce the required Form item component

Write a method getQueryFields to automatically determine which type of form item component needs to be introduced according to the type value in the field property array object in the dataSet

// Get the query column
function getQueryFields(dataSet: DataSet) :any {
  const { queryDataSet } = dataSet;
  const result: any = [];
  if (queryDataSet) {
    const { fields } = queryDataSet;
    return [...fields.entries()].reduce((list, [name, field]) = > {
      if(! field.get("bind")) {
        const props = { key: name, name };
        list.push(cloneElement(getEditorByField(field), props));
      }
      returnlist; }, result); }}Copy the code

Where getEditorByField returns the component

// Match the search box according to type
function getEditorByField(field: any) :any {
  const lookupCode = field.get("lookupCode");
  const lookupUrl = field.get("lookupUrl");
  const lovCode = field.get("lovCode");
  const multiLine = field.get("multiLine");
  const { type } = field;
  if( lookupCode || isString(lookupUrl) || (type ! == FieldType.object && (lovCode || field.options)) ) {return <Select />;
  }
  if (lovCode) return <Lov />;
  if (multiLine) return <Output />;
  switch (type) {
    case FieldType.boolean:
      return <CheckBox />;
    case FieldType.number:
      return <NumberField />;
    case FieldType.currency:
      return <Currency />;
    case FieldType.date:
      return <DatePicker />;
    case FieldType.dateTime:
      return <DateTimePicker />;
    case FieldType.time:
      return <TimePicker />;
    case FieldType.week:
      return <WeekPicker />;
    case FieldType.month:
      return <MonthPicker />;
    case FieldType.year:
      return <YearPicker />;
    case FieldType.intl:
      return <IntlField />;
    case FieldType.email:
      return <EmailField />;
    case FieldType.url:
      return <UrlField />;
    case FieldType.color:
      return <ColorPicker />;
    case FieldType.string:
      return <TextField />;
    default:
      return <TextField />; }}Copy the code

Complete the Form Form

With the Form items array in hand, it’s time to complete the Form Form, limiting the display and layout of the Form items according to queryFieldsLimit

const QueryMoreBar: React.FC<QueryMoreBarProps> = ({
  dataSet,
  queryFunction,
  buttons,
  queryFieldsLimit = 4,
  labelWidth = 100
}: QueryMoreBarProps) = > {
  const [hidden, setHidden] = useState(true);
  // Query an array of fields
  const queryFields = getQueryFields(dataSet);
  // More queries
  const handleToggle = () = >{ setHidden(! hidden); };const { queryDataSet } = dataSet;
  // If the check passes, call the query function
  const query = async() = > {if (queryDataSet) {
      return (awaitqueryDataSet.validate()) && queryFunction(); }};return (
    <div>
      {queryDataSet ? (
        <div
          style={{
            display: "flex",
            marginBottom: "3px",
            alignItems: "flex-start}} ">
          <Form
            style={{ flex: "auto"}}columns={queryFieldsLimit}
            dataSet={queryDataSet}
            labelWidth={labelWidth}
            useColon
            onKeyDown={(e: any) = > {
              if (e.keyCode === 13) return query();
            }}
          >
            {hidden ? queryFields.slice(0, queryFieldsLimit) : queryFields}
          </Form>
          <div
            style={{
              marginTop: "10px",
              flexShrink: 0.display: "flex",
              alignItems: "center}} ">
            {queryFields.length > queryFieldsLimit && (
              <Button onClick={handleToggle}>{hidden ? "More query" : "pack query "}</Button>
            )}
            <Button
              onClick={()= >{ if (queryDataSet.current) queryDataSet.current.reset(); dataSet.fireEvent("queryBarReset", { dataSet, queryFields }); }} > reset</Button>
            <Button color={ButtonColor.primary} onClick={query}>The query</Button>
          </div>
        </div>
      ) : null}
      {buttons && buttons.length ? (
        <div style={{ marginBottom: 4}} >{buttons}</div>
      ) : null}
    </div>
  );
};
Copy the code

Finally, complete QueryMoreBar query form encapsulation, complete code address QueryMoreBar