form-driver 0.4.19 → 0.4.21

package/src/ui/editor/basic/ADatetimePicker.tsx

@@ -1,12 +1,29 @@
 import React from "react";
-import { DatePicker } from "antd";
-import { DatePicker as DatePickerM } from 'antd-mobile';
+import { DatePicker, ConfigProvider } from "antd";
+import { DatePicker as DatePickerM } from "antd-mobile";
 import moment from "moment";
-import zhCN from 'antd/lib/date-picker/locale/zh_CN';
+import zhCN from "antd/es/locale/zh_CN";
 import _ from "lodash";
 import { MDateTimeType } from "../../../types/MDateTimeType";
 import { MUtil } from "../../../framework/MUtil";
-import { BaseViewer } from '../../BaseViewer';
+import { BaseViewer } from "../../BaseViewer";
+
+// antd-mobile v5 DatePicker precision 映射
+function toPrecision(
+  mode: string | undefined,
+): "year" | "month" | "day" | "hour" | "minute" | "second" {
+  switch (mode) {
+    case "year":
+      return "year";
+    case "month":
+      return "month";
+    case "date":
+      return "day";
+    default:
+      return "minute"; // datetime 场景
+  }
+}
+
 /**
  * 日期选择框
  * 配置示例：
@@ -18,10 +35,18 @@ import { BaseViewer } from '../../BaseViewer';
  * 类型是dateTime时，dataFormat默认是x，例如1608897466955
  */
 export class ADatetimePicker extends BaseViewer {
+  constructor(props: any) {
+    super(props);
+    (this.state as any).pickerVisible = false;
+  }
+
   element() {
     const antConf = MDateTimeType.antConf(this.props.schema);
     if (!antConf) {
-      return MUtil.error(`无效的类型${this.props.schema.type}`, this.props.schema);
+      return MUtil.error(
+        `无效的类型${this.props.schema.type}`,
+        this.props.schema,
+      );
     }
 
     let data = this.getValue();
@@ -31,46 +56,85 @@ export class ADatetimePicker extends BaseViewer {
     const onChange = (vv: Date | moment.Moment | null) => {
       if (vv) {
         const vvAsM = _.isDate(vv) ? moment(vv) : vv;
-        super.changeValue(vvAsM.format(antConf.dataFormat))
+        super.changeValue(vvAsM.format(antConf.dataFormat));
       } else {
         super.changeValue(undefined);
       }
     };
     const p = this.props.schema.props ?? {};
     // 构造元素
-    if (MUtil.phoneLike()) { // 手机
-      return <DatePickerM
-        disabled={this.props.disable}
-        value={dataAsDate}
-        key={this.props.path}
-        minDate={this.props.schema.min ? moment(this.props.schema.min, antConf.dataFormat).toDate() : undefined}
-        maxDate={this.props.schema.max ? moment(this.props.schema.max, antConf.dataFormat).toDate() : undefined}
-        mode={antConf.mode}
-        onChange={onChange}
-        {...p}
-        >
-        <div className="backfill">{dataAsDate ? moment(dataAsDate).format(antConf.readableFormat) : "请点击选择"}</div>
-      </DatePickerM>;
-    } else { // 大屏
-      return <DatePicker
-        key={this.props.path}
-        disabled={this.props.disable}
-        bordered={this.props.hideBorder ? false : true}
-        disabledDate={(m) => {
-          const d =
-            (this.props.schema.min && moment(this.props.schema.min, antConf.dataFormat).isAfter(m)) ||
-            (this.props.schema.max && moment(this.props.schema.max, antConf.dataFormat).isBefore(m));
-          return !!d;
-        }}
-        format={antConf.readableFormat}
-        style={this.props.style}
-        locale={zhCN}
-        defaultValue={dataAsMoment}
-        showTime={antConf.showTime}
-        picker={antConf.mode}
-        onChange={onChange}
-        {...p}
-      />;
+    if (MUtil.phoneLike()) {
+      // 手机
+      return (
+        <>
+          <div
+            className="backfill"
+            onClick={() => {
+              if (!this.props.disable)
+                this.setState({ pickerVisible: true } as any);
+            }}
+          >
+            {dataAsDate
+              ? moment(dataAsDate).format(antConf.readableFormat)
+              : "请点击选择"}
+          </div>
+          <DatePickerM
+            visible={(this.state as any).pickerVisible}
+            value={dataAsDate}
+            min={
+              this.props.schema.min
+                ? moment(this.props.schema.min, antConf.dataFormat).toDate()
+                : undefined
+            }
+            max={
+              this.props.schema.max
+                ? moment(this.props.schema.max, antConf.dataFormat).toDate()
+                : undefined
+            }
+            precision={toPrecision(antConf.mode)}
+            onConfirm={(val) => {
+              onChange(val);
+              this.setState({ pickerVisible: false } as any);
+            }}
+            onClose={() => {
+              this.setState({ pickerVisible: false } as any);
+            }}
+            {...p}
+          />
+        </>
+      );
+    } else {
+      // 大屏
+      // key 中加入 mode 信息，确保精度切换时组件重新挂载
+      const pickerKey = `${this.props.path}_${antConf.mode ?? "datetime"}`;
+      return (
+        <ConfigProvider locale={zhCN}>
+          <DatePicker
+            key={pickerKey}
+            disabled={this.props.disable}
+            bordered={this.props.hideBorder ? false : true}
+            disabledDate={(m) => {
+              const d =
+                (this.props.schema.min &&
+                  moment(this.props.schema.min, antConf.dataFormat).isAfter(
+                    m,
+                  )) ||
+                (this.props.schema.max &&
+                  moment(this.props.schema.max, antConf.dataFormat).isBefore(
+                    m,
+                  ));
+              return !!d;
+            }}
+            format={antConf.readableFormat}
+            style={{ width: "300px" }}
+            defaultValue={dataAsMoment}
+            showTime={antConf.showTime}
+            picker={antConf.mode}
+            onChange={onChange}
+            {...p}
+          />
+        </ConfigProvider>
+      );
     }
   }
 }

package/src/ui/editor/basic/AGB2260.tsx

@@ -5,12 +5,18 @@ import { Picker } from 'antd-mobile';
 import { MUtil } from "../../../framework/MUtil";
 import { BaseViewer } from '../../BaseViewer';
 import { MGB2260Type } from '../../../types/MGB2260Type';
+
 /**
  * 选择中国的省市县
  * 示例：{label:"1.5 您目前的居住地",name:"reside", type:"gb2260"},
  * 数据是gb2260的地区代码
  */
 export class AGB2260 extends BaseViewer {
+  constructor(props: any) {
+    super(props);
+    (this.state as any).pickerVisible = false;
+  }
+
   element() {
     const v = super.getValue();
     const empty = { label: ["请选择"], code: undefined };
@@ -18,20 +24,25 @@ export class AGB2260 extends BaseViewer {
     const p = this.props.schema.props ?? {};
 
     if (MUtil.phoneLike()) { // 手机  
-      return <Picker
-        extra={super.getPlaceholder()}
-        disabled={this.props.disable}
-        key={this.props.path}
-        className="AGB2260"
-        data={MGB2260Type.gb2260}
-        value={looked.code}
-        title={this.props.schema.label}
-        onDismiss={() => console.log('dismiss')}
-        onOk={e => super.changeValue(_.last(e))}
-        {...p}
-      >
-        <div className="backfill" style={this.props.style}>{looked?.label?.join("/")}</div>
-      </Picker>
+      return <>
+        <div className="backfill" style={this.props.style}
+          onClick={() => { if (!this.props.disable) this.setState({ pickerVisible: true } as any) }}>
+          {looked?.label?.join("/")}
+        </div>
+        <Picker
+          columns={MGB2260Type.gb2260}
+          value={looked.code}
+          visible={(this.state as any).pickerVisible}
+          onConfirm={e => {
+            super.changeValue(_.last(e));
+            this.setState({ pickerVisible: false } as any);
+          }}
+          onClose={() => {
+            this.setState({ pickerVisible: false } as any);
+          }}
+          {...p}
+        />
+      </>
     } else { // PC
       return <Cascader
         options={MGB2260Type.gb2260}

package/src/ui/editor/basic/ARangePicker.tsx

@@ -2,7 +2,8 @@ import React, { Component, RefObject } from "react";
 import { DatePicker } from "antd";
 import zhCN from 'antd/lib/date-picker/locale/zh_CN';
 import moment from "moment";
-import { Button, Calendar } from "antd-mobile";
+import { DatePicker as DatePickerM } from "antd-mobile";
+import { Button as AntButton } from "antd";
 import ReactDOM from "react-dom";
 import { RangePickerProps } from "antd/lib/date-picker";
 import _ from "lodash";
@@ -25,15 +26,18 @@ type AntData = [moment.Moment | null, moment.Moment | null];
 
 interface State extends ViewerState {
   mobileDlg: boolean;
+  mobileStep: 'start' | 'end';
+  mobileStartDate?: Date;
 }
 
 export class ARangePicker extends Viewer<State> {
-  _pickerRef: RefObject<Component<RangePickerProps, any, any>> = React.createRef();
+  _pickerRef: RefObject<any> = React.createRef();
   _onCalendarChangeValue?: AntData | null;
+  _startConfirmed = false; // 标记开始日期是否已确认，用于区分 onClose 是取消还是确认后的自动触发
 
   constructor(p: MProp) {
     super(p);
-    this.state = { ctrlVersion: 1, noValidate: false, mobileDlg: false };
+    this.state = { ctrlVersion: 1, noValidate: false, mobileDlg: false, mobileStep: 'start' };
   }
 
   componentDidUpdate() {
@@ -83,39 +87,117 @@ export class ARangePicker extends Viewer<State> {
     if (MUtil.phoneLike()) {
       let show = MDateRangeType.toReadableN(assembly, this.props.schema, super.getValue());
 
+      // 根据 precision 配置确定移动端 DatePicker 精度（使用扁平化属性 dateRangePrecision）
+      const mobilePrecision = (this.props.schema.dateRangePrecision || 'day') as 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+
       return <>
-        <div className="backfill" onClick={() => this.setState({ mobileDlg: true })}> {show ?? '请点击选择'} </div>
-        <Calendar
-          visible={this.state.mobileDlg}
-          pickTime={this.props.schema.dateRange?.showTime}
-          minDate={this.props.schema.min ? new Date(this.props.schema.min) : undefined}
-          maxDate={this.props.schema.min ? new Date(this.props.schema.max) : undefined}
-          onCancel={() => this.setState({ mobileDlg: false })}
-          onConfirm={(start, end) => {
-            super.changeValueEx(this._rangePicker2Data([moment(start), moment(end)], false), true, true)
-            this.setState({ mobileDlg: false })
+        <div className="backfill" onClick={() => this.setState({ mobileDlg: true, mobileStep: 'start' })}> {show ?? '请点击选择'} </div>
+        {/* 移动端：使用两步 DatePickerM 选择开始和结束日期 */}
+        <DatePickerM
+          key={`start_${mobilePrecision}`}
+          visible={this.state.mobileDlg && this.state.mobileStep === 'start'}
+          precision={mobilePrecision}
+          title="选择开始日期"
+          min={this.props.schema.min ? new Date(this.props.schema.min) : undefined}
+          max={this.props.schema.max ? new Date(this.props.schema.max) : undefined}
+          onConfirm={(val) => {
+            this._startConfirmed = true;
+            this.setState({ mobileStartDate: val, mobileStep: 'end' });
+          }}
+          onClose={() => {
+            // antd-mobile v5 确认时会同时触发 onConfirm 和 onClose
+            // 用实例变量同步判断：确认后的 onClose 应忽略，仅用户主动取消时才关闭
+            if (this._startConfirmed) {
+              this._startConfirmed = false;
+              return;
+            }
+            this.setState({ mobileDlg: false });
+          }}
+        />
+        <DatePickerM
+          key={`end_${mobilePrecision}`}
+          visible={this.state.mobileDlg && this.state.mobileStep === 'end'}
+          precision={mobilePrecision}
+          title={
+            // 如果允许"至今"且开始时间不在未来，在标题区域展示"至今"按钮
+            !this.props.schema.dateRange?.hideTillNow
+            && !this.props.schema.dateRange?.showTime
+            && !(this.state.mobileStartDate && this.state.mobileStartDate > new Date())
+              ? <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
+                  <span>选择结束日期</span>
+                  <AntButton
+                    size="small"
+                    type="primary"
+                    onClick={() => {
+                      const startDate = this.state.mobileStartDate;
+                      if (startDate) {
+                        super.changeValueEx(
+                          this._rangePicker2Data([moment(startDate), moment()], true),
+                          true, true
+                        );
+                      }
+                      this.setState({ mobileDlg: false });
+                    }}
+                  >至今</AntButton>
+                </div>
+              : "选择结束日期"
+          }
+          min={this.state.mobileStartDate || (this.props.schema.min ? new Date(this.props.schema.min) : undefined)}
+          max={this.props.schema.max ? new Date(this.props.schema.max) : undefined}
+          onConfirm={(val: any) => {
+            const startDate = this.state.mobileStartDate;
+            if (startDate) {
+              // 防御：结束日期不能早于开始日期
+              const finalEnd = val < startDate ? startDate : val;
+              super.changeValueEx(this._rangePicker2Data([moment(startDate), moment(finalEnd)], false), true, true);
+            }
+            this.setState({ mobileDlg: false });
+          }}
+          onClose={() => {
+            // 回退到第一步，让用户可以重新选择开始日期
+            this.setState({ mobileStep: 'start' });
           }}
-          {...p}
         />
       </>
     } else {
+      // 根据 precision 配置确定 PC 端 picker 模式和 showTime（使用扁平化属性 dateRangePrecision）
+      const precision = this.props.schema.dateRangePrecision;
+      const pcShowTime = precision === 'minute' || this.props.schema.dateRange?.showTime;
+      const hideFooter = this.props.schema.dateRange?.hideTillNow || pcShowTime;
+
+      // 动态构建额外属性，避免 showTime 和 picker 同时传入导致类型冲突
+      const extraProps: any = {};
+      if (precision === 'year') {
+        extraProps.picker = 'year';
+      } else if (precision === 'month') {
+        extraProps.picker = 'month';
+      } else if (pcShowTime) {
+        extraProps.showTime = true;
+      }
+
       // 构造元素
       return <DatePicker.RangePicker
         ref={this._pickerRef}
-        showTime={this.props.schema.dateRange?.showTime}
-        key={this.state.ctrlVersion}
-        renderExtraFooter={this.props.schema.dateRange?.hideTillNow || this.props.schema.dateRange?.showTime // TODO 显示时间时，“至今”无法支持
+        key={`${this.state.ctrlVersion}_${this.props.schema.dateRangePrecision ?? 'day'}`}
+        renderExtraFooter={hideFooter
           ? undefined
-          : (mode) => <div style={{ textAlign: "right" }} {...p}>
-            <Button
-              size="small" style={{ width: "100px", display: "inline-block", marginTop: "5px" }}
-              onClick={() => {
-                super.changeValueEx(this._rangePicker2Data(this._onCalendarChangeValue, true), true, true);
-              }}>至今</Button>
-          </div>
+          : (mode) => {
+            // 如果开始时间超过当前时间（未来时间），不展示"至今"按钮
+            const startMoment = this._onCalendarChangeValue?.[0];
+            if (startMoment && startMoment.isAfter(moment())) {
+              return null;
+            }
+            return <div style={{ textAlign: "right" }}>
+              <AntButton
+                size="small" style={{ width: "100px", display: "inline-block", marginTop: "5px" }}
+                onClick={() => {
+                  super.changeValueEx(this._rangePicker2Data(this._onCalendarChangeValue, true), true, true);
+                }}>至今</AntButton>
+            </div>;
+          }
         }
         bordered={this.props.hideBorder ? false : true}
-        style={{ minWidth: "240px" }}
+        style={{ width: "300px" }}
         locale={zhCN}
         defaultValue={rangePickerData}
         onCalendarChange={(d) => {
@@ -123,7 +205,9 @@ export class ARangePicker extends Viewer<State> {
         }}
         onChange={(vv) => {
           super.changeValueEx(this._rangePicker2Data(vv, false), true, true)
-        }} />;
+        }}
+        {...extraProps}
+      />;
     }
   }
 }

package/src/ui/widget/SelectBox.tsx

@@ -2,15 +2,18 @@
 
 import { Select } from "antd";
 import { Picker } from "antd-mobile";
-import { PickerData } from "antd-mobile/lib/picker/PropsType";
 import _ from "lodash";
 import React from "react";
-//import { InputHTMLAttributes } from "react";
 import { MUtil } from '../../framework/MUtil';
 
-interface Prop { // extends InputHTMLAttributes<HTMLInputElement> {
+interface PickerOption {
+  label: string | React.ReactNode;
+  value: string;
+}
+
+interface Prop {
   data: string;
-  options: PickerData[],
+  options: PickerOption[],
   onChange: (newValue?:string)=>void;
   onBlur?:()=>void;
   
@@ -18,22 +21,39 @@ interface Prop { // extends InputHTMLAttributes<HTMLInputElement> {
   openLabel?: string;
 }
 
-export class SelectBox extends React.Component<Prop, any> {
+interface SelectBoxState {
+  pickerVisible: boolean;
+}
+
+export class SelectBox extends React.Component<Prop, SelectBoxState> {
+  constructor(props: Prop) {
+    super(props);
+    this.state = { pickerVisible: false };
+  }
+
   render(){
     if(MUtil.phoneLike()) {
       const looked = this.props.options.find(o=>o.value === this.props.data);
       const backfillClass = looked ? "backfill" : "backfill_empty";
 
-      return <Picker extra="请选择(可选)"
-        cols={1}
-        data={this.props.options}
-        value={[this.props.data]}
-        onOk={e => this.props.onChange(_.last(e))}
-        onDismiss={() => {
-          if(this.props.onBlur) { this.props.onBlur() }
-        }}>
-        <div className={backfillClass}>{looked?.label ?? "点击选择"}</div>
-      </Picker>
+      return <>
+        <div className={backfillClass} onClick={() => this.setState({ pickerVisible: true })}>
+          {looked?.label ?? "点击选择"}
+        </div>
+        <Picker
+          columns={[this.props.options]}
+          value={[this.props.data]}
+          visible={this.state.pickerVisible}
+          onConfirm={e => {
+            this.props.onChange(_.last(e) as string);
+            this.setState({ pickerVisible: false });
+          }}
+          onClose={() => {
+            this.setState({ pickerVisible: false });
+            if(this.props.onBlur) { this.props.onBlur() }
+          }}
+        />
+      </>
     } else {
       return <Select defaultValue={this.props.data}> 
         {this.props.options.map(o=><Select.Option value={o.value}>{o.label ?? o.value}</Select.Option>)} 

package/types/framework/Init.d.ts

@@ -1,3 +1,4 @@
+import "moment/locale/zh-cn";
 /**
  * 确保m3已经初始化ensureM3
  */

package/types/framework/MUtil.d.ts

@@ -115,6 +115,20 @@ export declare let MUtil: {
     renameKey: (object: any, renameTo: {
         [oldKey: string]: string;
     }, removeNotExistKey?: boolean) => any;
+    /**
+     * 提交时将时间字段转换为可读格式
+     * @param schema 表单 schema（type 为 object 的根 schema）
+     * @param database 表单数据
+     * @returns 深拷贝后转换过的数据
+     */
+    formatForExport: (schema: MFieldSchemaAnonymity, database: any) => any;
+    /**
+     * 回填时将可读格式的时间字段反解析为内部格式
+     * @param schema 表单 schema（type 为 object 的根 schema）
+     * @param database 可读格式的数据
+     * @returns 深拷贝后反解析过的数据
+     */
+    parseFromExport: (schema: MFieldSchemaAnonymity, database: any) => any;
     /** 啥也不干的空回调 */
     doNothing: () => void;
     /**

package/types/framework/Schema.d.ts

@@ -132,13 +132,24 @@ export interface MFieldSchema {
         /** 允许时间段重叠，默认是不能重叠 */
         overlap?: boolean;
     };
+    /** date 类型配置 */
+    date?: {
+        /** 日期精度：month=年月, day=年月日(默认), minute=年月日时分 */
+        precision?: "month" | "day" | "minute";
+    };
+    /** 日期精度（扁平化属性）：year=年, month=年月, day=年月日(默认), minute=年月日时分 */
+    datePrecision?: string;
     /** dateRange 类型配置 */
     dateRange?: {
         /** 是否隐藏至今按钮 */
         hideTillNow?: boolean;
         /** 是否能选择时间 */
         showTime?: boolean;
+        /** 日期精度：month=年月, day=年月日(默认), minute=年月日时分 */
+        precision?: "month" | "day" | "minute";
     };
+    /** 日期范围精度（扁平化属性） */
+    dateRangePrecision?: string;
     /** 数据格式 */
     dataFormat?: "x" | "YYYYMMDD" /** 用于时间日期类型字段的数据格式，参考moment，例如x表示数据是时间戳，YYYYMMDD表示数据是形如19990130的字符串 */ | string;
     /**

package/types/index.d.ts

@@ -1,5 +1,4 @@
 import 'antd/dist/antd.css';
-import 'antd-mobile/dist/antd-mobile.css';
 import { Ajax } from './framework/Ajax';
 import { M3UISpecSegmentItem, MFieldSchema, M3UISpec, MFieldSchemaAnonymity } from './framework/Schema';
 import { MViewerDebug } from './framework/MViewerDebug';

package/types/types/MDateRangeType.d.ts

@@ -1,6 +1,8 @@
 import { MFieldSchemaAnonymity } from "../framework/Schema";
 import { MType } from "./MType";
 import { Assembly } from "../framework/Assembly";
+/** 根据 precision 获取可读格式 */
+export declare function getReadableFormat(precision?: string, showTime?: boolean): string;
 export declare function timeRangeExpr(assembly: Assembly, from: number | string, to: number | string, tillNow: boolean, readableFormat?: string): string;
 export declare const MDateRangeType: MType & {
     toReadableN: (assembly: Assembly, s: MFieldSchemaAnonymity, vs: any) => string | undefined;

package/types/types/MDateTimeType.d.ts

@@ -1,9 +1,9 @@
-import { MFieldSchemaAnonymity } from '../framework/Schema';
+import { MFieldSchemaAnonymity } from "../framework/Schema";
 import { MType } from "./MType";
 export interface MDateTimeAntConf {
     dataFormat: string;
     readableFormat: string;
-    mode: undefined | 'date' | 'year' | 'month' | 'time';
+    mode: undefined | "date" | "year" | "month" | "time";
     showTime: boolean;
 }
 export declare const MDateTimeType: MType & {

package/types/ui/editor/basic/ADatetimePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseViewer } from '../../BaseViewer';
+import { BaseViewer } from "../../BaseViewer";
 /**
  * 日期选择框
  * 配置示例：
@@ -11,5 +11,6 @@ import { BaseViewer } from '../../BaseViewer';
  * 类型是dateTime时，dataFormat默认是x，例如1608897466955
  */
 export declare class ADatetimePicker extends BaseViewer {
+    constructor(props: any);
     element(): JSX.Element;
 }

package/types/ui/editor/basic/AGB2260.d.ts

@@ -6,5 +6,6 @@ import { BaseViewer } from '../../BaseViewer';
  * 数据是gb2260的地区代码
  */
 export declare class AGB2260 extends BaseViewer {
+    constructor(props: any);
     element(): JSX.Element;
 }

package/types/ui/editor/basic/ARangePicker.d.ts

@@ -1,6 +1,5 @@
-import { Component, RefObject } from "react";
+import { RefObject } from "react";
 import moment from "moment";
-import { RangePickerProps } from "antd/lib/date-picker";
 import { Viewer, ViewerState } from '../../BaseViewer';
 import { MProp } from "../../../framework/Schema";
 export type ARangePickerData = [
@@ -11,10 +10,13 @@ export type ARangePickerData = [
 type AntData = [moment.Moment | null, moment.Moment | null];
 interface State extends ViewerState {
     mobileDlg: boolean;
+    mobileStep: 'start' | 'end';
+    mobileStartDate?: Date;
 }
 export declare class ARangePicker extends Viewer<State> {
-    _pickerRef: RefObject<Component<RangePickerProps, any, any>>;
+    _pickerRef: RefObject<any>;
     _onCalendarChangeValue?: AntData | null;
+    _startConfirmed: boolean;
     constructor(p: MProp);
     componentDidUpdate(): void;
     componentDidMount(): void;

package/types/ui/widget/SelectBox.d.ts

@@ -1,13 +1,20 @@
-import { PickerData } from "antd-mobile/lib/picker/PropsType";
 import React from "react";
+interface PickerOption {
+    label: string | React.ReactNode;
+    value: string;
+}
 interface Prop {
     data: string;
-    options: PickerData[];
+    options: PickerOption[];
     onChange: (newValue?: string) => void;
     onBlur?: () => void;
     openLabel?: string;
 }
-export declare class SelectBox extends React.Component<Prop, any> {
+interface SelectBoxState {
+    pickerVisible: boolean;
+}
+export declare class SelectBox extends React.Component<Prop, SelectBoxState> {
+    constructor(props: Prop);
     render(): JSX.Element;
 }
 export {};