Merge pull request #160 from jimengio/yuelei

filter-form add select type

example/forms/filter-form.tsx

@@ -17,36 +17,33 @@ let ExampleFilterForm: FC<{ className?: string }> = React.memo((props) => {
 
   let filterFormItems: IFilterFieldItem<IData>[] = [
     {
-      type: "dropdown-select",
-      label: "类型",
-      name: "categoryId",
-      options: [
-        { value: "a", display: "数据 A" },
-        { value: "b", display: "数据 B" },
-      ],
-      allowClear: true,
-      selectProps: {
-        emptyLocale: "暂无数据",
-      },
-    },
-    {
-      type: "dropdown-select",
+      type: "select",
       label: "发布状态",
       name: "isPublished",
       allowClear: true,
       options: [
         { value: true, display: "已发布" },
         { value: false, display: "未发布" },
       ],
-      selectProps: {
-        emptyLocale: "暂无数据",
-      },
     },
     {
       type: "date-picker",
       label: "发布时间",
       name: "operatedAt",
     },
+    {
+      type: "dropdown-select",
+      label: "类型",
+      name: "categoryId",
+      options: [
+        { value: "a", display: "数据 A" },
+        { value: "b", display: "数据 B" },
+      ],
+      allowClear: true,
+      selectProps: {
+        emptyLocale: "暂无数据",
+      },
+    },
   ];
 
   let filterForm = useFilterForm({
@@ -86,36 +83,33 @@ interface IData {
 
 let filterFormItems: IFilterFieldItem<IData>[] = [
   {
-    type: "dropdown-select",
-    label: "类型",
-    name: "categoryId",
-    options: [
-      { value: "a", display: "数据 A" },
-      { value: "b", display: "数据 B" },
-    ],
-    allowClear: true,
-    selectProps: {
-      emptyLocale: "暂无数据",
-    },
-  },
-  {
-    type: "dropdown-select",
+    type: "select",
     label: "发布状态",
     name: "isPublished",
     allowClear: true,
     options: [
       { value: true, display: "已发布" },
       { value: false, display: "未发布" },
     ],
-    selectProps: {
-      emptyLocale: "暂无数据",
-    },
   },
   {
     type: "date-picker",
     label: "发布时间",
     name: "operatedAt",
   },
+  {
+    type: "dropdown-select",
+    label: "类型",
+    name: "categoryId",
+    options: [
+      { value: "a", display: "数据 A" },
+      { value: "b", display: "数据 B" },
+    ],
+    allowClear: true,
+    selectProps: {
+      emptyLocale: "暂无数据",
+    },
+  }
 ];
 
 let filterForm = useFilterForm({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimengio/meson-form",
-  "version": "0.5.0-a3",
+  "version": "0.5.0-a4",
   "description": "",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/filter-form/core.tsx

@@ -3,7 +3,7 @@ import { cx, css } from "emotion";
 import { flexWrap, row, expand } from "@jimengio/flex-styles";
 
 import { useImmer } from "use-immer";
-import { renderDropdownSelectItem, renderDatePickerItem } from "./renderer";
+import { renderDropdownSelectItem, renderDatePickerItem, renderSelectItem } from "./renderer";
 import { forIn } from "lodash-es";
 
 import type { IFilterFieldItem } from "./types";
@@ -41,6 +41,8 @@ function useFilterForm<T extends { [k: string]: any }>(props: IProps<T>) {
         return renderDropdownSelectItem(form, item, updateItem);
       case "date-picker":
         return renderDatePickerItem(form, item, updateItem);
+      case "select":
+        return renderSelectItem(form, item, updateItem);
       case "custom":
         let onChange = (value: any) => {
           updateItem(value, item);

src/filter-form/renderer.tsx

@@ -4,11 +4,12 @@ import { cx, css } from "emotion";
 import { DropdownMenu } from "@jimengio/dropdown";
 import DatePicker from "antd/lib/date-picker";
 import dataPickerLocale from "antd/es/date-picker/locale/zh_CN";
+import Select from "antd/lib/select";
 
 import { formatString, lingual } from "../lingual";
 import moment from "moment";
 
-import { IFilterDropdownSelectField, IFilterDatePickerField, FuncUpdateItem } from "./types";
+import { IFilterDropdownSelectField, IFilterDatePickerField, IFilterSelectField, FuncUpdateItem } from "./types";
 import { GlobalThemeVariables } from "../theme";
 
 export function renderDropdownSelectItem<T>(form: T, item: IFilterDropdownSelectField<T>, updateItem: FuncUpdateItem<T>) {
@@ -51,6 +52,53 @@ export function renderDropdownSelectItem<T>(form: T, item: IFilterDropdownSelect
   );
 }
 
+export function renderSelectItem<T>(form: T, item: IFilterSelectField<T>, updateItem: FuncUpdateItem<T>) {
+  let currentValue: any = form[item.name];
+  if (item.translateNonStringvalue && currentValue != null) {
+    currentValue = `${currentValue}`;
+  }
+
+  let multiple: boolean = item.selectProps?.mode && item.selectProps?.mode === "multiple";
+
+  return (
+    <Select
+      value={currentValue}
+      className={cx(styleSelect, GlobalThemeVariables.select, item.className)}
+      placeholder={item.placeholder || formatString(lingual.pleaseSelectLabel, { label: item.label })}
+      onChange={(newValue: string[] | string) => {
+        if (item.translateNonStringvalue && newValue != null) {
+          let target = null;
+          if (multiple) {
+            let process = (newValue as string[]).map((n) => {
+              return item.options.find((x) => `${x.value}` === n).value;
+            });
+            newValue = process.length > 0 ? process : undefined;
+          } else {
+            target = item.options.find((x) => `${x.value}` === newValue);
+            newValue = target.value;
+          }
+        }
+
+        updateItem(newValue, item);
+      }}
+      allowClear={item.allowClear}
+      {...item.selectProps}
+    >
+      {item.options.map((option) => {
+        let value = option.value;
+        if (item.translateNonStringvalue) {
+          value = `${value}`;
+        }
+        return (
+          <Select.Option value={value} key={option.key || value}>
+            {option.display}
+          </Select.Option>
+        );
+      })}
+    </Select>
+  );
+}
+
 export function renderDatePickerItem<T>(form: T, item: IFilterDatePickerField<T>, updateItem: FuncUpdateItem<T>) {
   return (
     <DatePicker
@@ -78,28 +126,10 @@ let styleDropdown = css`
   width: 100%;
 `;
 
-let styleDatePicker = css`
+let styleSelect = css`
   min-width: 220px;
-  input {
-    color: #323232 !important;
-    border-color: #e8e8e8 !important;
-    border-radius: 2px !important;
-    &:focus,
-    &:hover {
-      border-color: #3674ff !important;
-      box-shadow: 0px 0px 2px 0px rgba(6, 53, 171, 0.3) !important;
-    }
-
-    ::-webkit-input-placeholder {
-      color: #979797 !important;
-    }
-
-    ::-moz-placeholder {
-      color: #979797 !important;
-    }
+`;
 
-    :-ms-input-placeholder {
-      color: #979797 !important;
-    }
-  }
+let styleDatePicker = css`
+  min-width: 220px;
 `;

src/filter-form/types.tsx

@@ -2,6 +2,8 @@ import { ReactNode, ReactText } from "react";
 
 import { Moment } from "moment";
 import { DatePickerProps } from "antd/lib/date-picker";
+import { SelectProps } from "antd/lib/select";
+import { DefaultValueType } from "rc-tree-select/lib/interface";
 
 export interface IFilterFieldBaseProps<T> {
   label?: string;
@@ -42,6 +44,17 @@ export interface IFilterDropdownSelectField<T, K extends keyof T = keyof T> exte
   valueClassName?: string;
 }
 
+export interface IFilterSelectField<T, K extends keyof T = keyof T> extends IFilterFieldBaseProps<T> {
+  name: K;
+  type: "select";
+  options: IFilterSelectItem[];
+  placeholder?: string;
+  allowClear?: boolean;
+  selectProps?: SelectProps<DefaultValueType>;
+  translateNonStringvalue?: boolean;
+  valueClassName?: string;
+}
+
 export interface IFilterDatePickerField<T, K extends keyof T = keyof T> extends IFilterFieldBaseProps<T> {
   name: K;
   type: "date-picker";
@@ -67,6 +80,6 @@ export interface IFilterCustomField<T, K extends keyof T = keyof T> extends IFil
   valueClassName?: string;
 }
 
-export type IFilterFieldItem<T = any> = IFilterDropdownSelectField<T> | IFilterDatePickerField<T> | IFilterCustomField<T>;
+export type IFilterFieldItem<T = any> = IFilterDropdownSelectField<T> | IFilterSelectField<T> | IFilterDatePickerField<T> | IFilterCustomField<T>;
 
 export type FuncUpdateItem<T> = (x: any, item: IFilterFieldItem<T>) => void;