react-hook-core 0.1.3 → 0.1.6

package/src/components.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import {RouteComponentProps} from 'react-router';
-import {clone, diff, makeDiff} from 'reflectx';
-import {addParametersIntoUrl, append, buildMessage, changePage, changePageSize, formatResults, getFieldsFromForm, getModel, handleAppend, handleSortEvent, initFilter, mergeFilter as mergeFilter2, more, reset, Searchable, showPaging, validate} from 'search-core';
-import {BaseDiffState, createDiffStatus, createEditStatus, DiffApprService, DiffParameter, DiffState, DiffStatusConfig, hideLoading, showLoading} from './core';
-import {Attributes, buildId, EditStatusConfig, error, ErrorMessage, Filter, getCurrencyCode, getModelName as getModelName2, initForm, LoadingService, Locale, message, messageByHttpStatus, PageChange, pageSizes, removePhoneFormat, ResourceService, SearchParameter, SearchResult, SearchService, SearchState, StringMap, UIService, ViewParameter, ViewService} from './core';
+import {BaseDiffState, createDiffStatus, createEditStatus, DiffApprService, DiffParameter, DiffState, DiffStatusConfig, handleToggle, hideLoading, showLoading} from './core';
+import {Attributes, EditStatusConfig, error, ErrorMessage, Filter, getCurrencyCode, getModelName as getModelName2, initForm, LoadingService, Locale, message, messageByHttpStatus, PageChange, pageSizes, removePhoneFormat, ResourceService, SearchParameter, SearchResult, SearchService, SearchState, StringMap, UIService, ViewParameter, ViewService} from './core';
 import {formatDiffModel, getDataFields} from './diff';
 import {build, createModel as createModel2, EditParameter, GenericService, handleStatus, handleVersion, initPropertyNullInModel, ResultInfo} from './edit';
 import {focusFirstError, readOnly} from './formutil';
 import {getAutoSearch, getConfirmFunc, getDiffStatusFunc, getEditStatusFunc, getErrorFunc, getLoadingFunc, getLocaleFunc, getMsgFunc, getResource, getUIService} from './input';
+import {clone, diff, makeDiff} from './reflect';
 import {buildFromUrl} from './route';
+import {addParametersIntoUrl, append, buildMessage, changePage, changePageSize, formatResults, getFieldsFromForm, getModel, handleAppend, handleSortEvent, initFilter, mergeFilter as mergeFilter2, more, Pagination, reset, showPaging, Sortable, validate} from './search';
 import {buildFlatState, buildState, enLocale, handleEvent, handleProps, localeOf} from './state';
 
-export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends React.Component<P, S> {
+interface Searchable extends Pagination, Sortable {
+}
+export class ViewComponent<T, ID, P, S> extends React.Component<P, S> {
   constructor(props: P, sv: ((id: ID, ctx?: any) => Promise<T>)|ViewService<T, ID>,
       param: ResourceService|ViewParameter,
       showError?: (msg: string, title?: string, detail?: string, callback?: () => void) => void,
@@ -40,7 +41,6 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
         }
       }
     }
-    this.back = this.back.bind(this);
     this.getModelName = this.getModelName.bind(this);
     this.load = this.load.bind(this);
     this.getModel = this.getModel.bind(this);
@@ -54,19 +54,13 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
   loading?: LoadingService;
   showError: (msg: string, title?: string, detail?: string, callback?: () => void) => void;
   getLocale?: (profile?: string) => Locale;
-  loadData?: (id: ID, ctx?: any) => Promise<T>;
+  loadData?: (id: ID) => Promise<T|null>;
   // protected service: ViewService<T, ID>;
   form?: HTMLFormElement;
   ref: any;
   keys?: string[];
   metadata?: Attributes;
 
-  back(event: any) {
-    if (event) {
-      event.preventDefault();
-    }
-    this.props.history.goBack();
-  }
   getModelName(): string {
     if (this.name && this.name.length > 0) {
       return this.name;
@@ -78,13 +72,6 @@ export class ViewComponent<T, ID, P extends RouteComponentProps, S> extends Reac
       return n;
     }
   }
-  componentDidMount() {
-    this.form = this.ref.current;
-    const id = buildId<ID>(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
-  }
   load(_id: ID, callback?: (m: T, showF: (model: T) => void) => void) {
     const id: any = _id;
     if (id != null && id !== '' && this.loadData) {
@@ -301,6 +288,7 @@ export class BaseSearchComponent<T, F extends Filter, P, I extends SearchState<T
       protected listFormId?: string) {
     super(props, getLocale, (ui ? ui.removeError : undefined));
     this.resource = resourceService.resource();
+    this.hideFilter = true;
     this.getModelName = this.getModelName.bind(this);
     this.showMessage = this.showMessage.bind(this);
 
@@ -388,8 +376,10 @@ export class BaseSearchComponent<T, F extends Filter, P, I extends SearchState<T
     return 'filter';
   }
 
-  toggleFilter(event: any): void {
-    this.hideFilter = !this.hideFilter;
+  toggleFilter(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void {
+    const x = !this.hideFilter;
+    handleToggle(event.target as HTMLInputElement, !x);
+    this.hideFilter = x;
   }
   load(s: F, autoSearch: boolean): void {
     const obj2 = initFilter(s, this);
@@ -616,7 +606,7 @@ export class BaseSearchComponent<T, F extends Filter, P, I extends SearchState<T
     this.doSearch();
   }
 }
-export class SearchComponent<T, S extends Filter, P extends RouteComponentProps, I extends SearchState<T, S>> extends BaseSearchComponent<T, S, P, I> {
+export class SearchComponent<T, S extends Filter, P, I extends SearchState<T, S>> extends BaseSearchComponent<T, S, P, I> {
   constructor(props: P, sv: ((s: S, ctx?: any) => Promise<SearchResult<T>>) | SearchService<T, S>,
       param: ResourceService|SearchParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -638,7 +628,6 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
         }
       }
     }
-    this.add = this.add.bind(this);
     this.call = this.call.bind(this);
     this.showError = getErrorFunc(param, showError);
     this.componentDidMount = this.componentDidMount.bind(this);
@@ -664,11 +653,6 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
     const s: any = {};
     return s;
   }
-  add = (event: any) => {
-    event.preventDefault();
-    const url = this.url + '/add';
-    this.props.history.push(url);
-  }
   call(se: S) {
     this.running = true;
     const s = clone(se);
@@ -708,7 +692,7 @@ export class SearchComponent<T, S extends Filter, P extends RouteComponentProps,
   }
 }
 
-export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> extends BaseComponent<P, S> {
+export abstract class BaseEditComponent<T, P, S> extends BaseComponent<P, S> {
   constructor(props: P,
       protected resourceService: ResourceService,
       protected showMessage: (msg: string) => void,
@@ -776,7 +760,6 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     if (event) {
       event.preventDefault();
     }
-    this.props.history.goBack();
   }
   resetState(newMod: boolean, model: T, originalModel?: T) {
     this.newMode = newMod;
@@ -983,7 +966,7 @@ export abstract class BaseEditComponent<T, P extends RouteComponentProps, S> ext
     this.showError(msg.message, msg.title);
   }
 }
-export class EditComponent<T, ID, P extends RouteComponentProps, S> extends BaseEditComponent<T, P, S>  {
+export class EditComponent<T, ID, P, S> extends BaseEditComponent<T, P, S>  {
   constructor(props: P, protected service: GenericService<T, ID, number|ResultInfo<T>>,
       param: ResourceService|EditParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -1015,19 +998,10 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
     }
     this.load = this.load.bind(this);
     this.doSave = this.doSave.bind(this);
-    this.componentDidMount = this.componentDidMount.bind(this);
     this.ref = React.createRef();
   }
   ref: any;
-  componentDidMount() {
-    const k = (this.ui ? this.ui.registerEvents : undefined);
-    this.form = initForm(this.ref.current, k);
-    const id = buildId<ID>(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
-  }
-  load(_id: ID, callback?: (m: T, showM: (m2: T) => void) => void) {
+  load(_id: ID|null, callback?: (m: T, showM: (m2: T) => void) => void) {
     const id: any = _id;
     if (id != null && id !== '') {
       const com = this;
@@ -1104,7 +1078,7 @@ export class EditComponent<T, ID, P extends RouteComponentProps, S> extends Base
   }
 }
 
-export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S extends BaseDiffState> extends React.Component<P, S & any> {
+export class BaseDiffApprComponent<T, ID, P, S extends BaseDiffState> extends React.Component<P, S & any> {
   constructor(props: P, protected keys: string[], protected resourceService: ResourceService,
       protected showMessage: (msg: string, option?: string) => void,
       protected showError: (m: string, title?: string, detail?: string, callback?: () => void) => void,
@@ -1117,7 +1091,6 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
     this.resource = resourceService.resource();
     this.showMessage = this.showMessage.bind(this);
     this.showError = this.showError.bind(this);
-    this.back = this.back.bind(this);
     this.initModel = this.initModel.bind(this);
     this.postApprove = this.postApprove.bind(this);
     this.postReject = this.postReject.bind(this);
@@ -1134,13 +1107,6 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
   running?: boolean;
   resource: StringMap;
 
-  back(event: any) {
-    if (event) {
-      event.preventDefault();
-    }
-    this.props.history.goBack();
-  }
-
   initModel(): T {
     const x: any = {};
     return x;
@@ -1223,7 +1189,7 @@ export class BaseDiffApprComponent<T, ID, P extends RouteComponentProps, S exten
     this.showError(msg.message, msg.title);
   }
 }
-export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends DiffState<T>> extends BaseDiffApprComponent<T, ID, P, S> {
+export class DiffApprComponent<T, ID, P, S extends DiffState<T>> extends BaseDiffApprComponent<T, ID, P, S> {
   constructor(props: P, protected service: DiffApprService<T, ID>,
       param: ResourceService|DiffParameter,
       showMessage?: (msg: string, option?: string) => void,
@@ -1243,14 +1209,6 @@ export class DiffApprComponent<T, ID, P extends RouteComponentProps, S extends D
   }
   ref: any;
 
-  componentDidMount() {
-    this.form = this.ref.current;
-    const id = buildId<ID>(this.props, this.keys);
-    if (id) {
-      this.load(id);
-    }
-  }
-
   formatFields(value: T): T {
     return value;
   }

package/src/core.ts

@@ -1,5 +1,5 @@
-import {RouteComponentProps} from 'react-router';
-import {focusFirstElement} from './formutil';
+import { Params } from 'react-router';
+import { focusFirstElement } from './formutil';
 
 export const pageSizes = [12, 24, 60, 100, 120, 180, 300, 600];
 export interface ModelMap {
@@ -35,12 +35,12 @@ export interface SearchParameter {
   auto?: boolean;
 }
 export interface EditStatusConfig {
-  duplicate_key: number|string;
-  not_found: number|string;
-  success: number|string;
-  version_error: number|string;
-  error?: number|string;
-  data_corrupt?: number|string;
+  duplicate_key: number | string;
+  not_found: number | string;
+  success: number | string;
+  version_error: number | string;
+  error?: number | string;
+  data_corrupt?: number | string;
 }
 export function createEditStatus(status?: EditStatusConfig): EditStatusConfig {
   if (status) {
@@ -57,10 +57,10 @@ export function createEditStatus(status?: EditStatusConfig): EditStatusConfig {
   return s;
 }
 export interface DiffStatusConfig {
-  not_found: number|string;
-  success: number|string;
-  version_error: number|string;
-  error?: number|string;
+  not_found: number | string;
+  success: number | string;
+  version_error: number | string;
+  error?: number | string;
 }
 export function createDiffStatus(status?: DiffStatusConfig): DiffStatusConfig {
   if (status) {
@@ -96,7 +96,7 @@ export interface SearchState<T, S extends Filter> {
 }
 export interface SearchService<T, S extends Filter> {
   keys?(): string[];
-  search(s: S, limit?: number, offset?: number|string, fields?: string[]): Promise<SearchResult<T>>;
+  search(s: S, limit?: number, offset?: number | string, fields?: string[]): Promise<SearchResult<T>>;
 }
 export interface ViewParameter {
   resource: ResourceService;
@@ -105,9 +105,9 @@ export interface ViewParameter {
   loading?: LoadingService;
 }
 export interface ViewService<T, ID> {
-  metadata?(): Attributes;
+  metadata?(): Attributes | undefined;
   keys?(): string[];
-  load(id: ID, ctx?: any): Promise<T>;
+  load(id: ID, ctx?: any): Promise<T | null>;
 }
 
 export interface DiffParameter {
@@ -131,8 +131,8 @@ export interface DiffModel<T, ID> {
   value: T;
 }
 export interface ApprService<ID> {
-  approve(id: ID, ctx?: any): Promise<number|string>;
-  reject(id: ID, ctx?: any): Promise<number|string>;
+  approve(id: ID, ctx?: any): Promise<number | string>;
+  reject(id: ID, ctx?: any): Promise<number | string>;
 }
 export interface DiffService<T, ID> {
   keys(): string[];
@@ -148,11 +148,11 @@ export interface DiffState<T> {
 
 // tslint:disable-next-line:class-name
 export class resource {
-  static phone = / |\-|\.|\(|\)/g;
+  static phone = / |-|\.|\(|\)/g;
   static _cache: any = {};
   static cache = true;
 }
-export function getCurrencyCode(form?: HTMLFormElement|null): string|undefined {
+export function getCurrencyCode(form?: HTMLFormElement | null): string | undefined {
   if (form) {
     const x = form.getAttribute('currency-code');
     if (x) {
@@ -182,34 +182,34 @@ export interface Message {
   yes?: string;
   no?: string;
 }
-export function getString(key: string, gv: StringMap|((key: string) => string)): string {
+export function getString(key: string, gv: StringMap | ((key: string) => string)): string {
   if (typeof gv === 'function') {
     return gv(key);
   } else {
     return gv[key];
   }
 }
-export function message(gv: StringMap|((key: string) => string), msg: string, title?: string, yes?: string, no?: string): Message {
+export function message(gv: StringMap | ((key: string) => string), msg: string, title?: string, yes?: string, no?: string): Message {
   const m2 = (msg && msg.length > 0 ? getString(msg, gv) : '');
-    const m: Message = { message: m2, title: '' };
-    if (title && title.length > 0) {
-      m.title = getString(title, gv);
-    }
-    if (yes && yes.length > 0) {
-      m.yes = getString(yes, gv);
-    }
-    if (no && no.length > 0) {
-      m.no = getString(no, gv);
-    }
-    return m;
+  const m: Message = { message: m2, title: '' };
+  if (title && title.length > 0) {
+    m.title = getString(title, gv);
+  }
+  if (yes && yes.length > 0) {
+    m.yes = getString(yes, gv);
+  }
+  if (no && no.length > 0) {
+    m.no = getString(no, gv);
+  }
+  return m;
 }
-export function messageByHttpStatus(status: number, gv: StringMap|((key: string) => string)): string {
+export function messageByHttpStatus(status: number, gv: StringMap | ((key: string) => string)): string {
   const k = 'status_' + status;
   let msg = getString(k, gv);
-    if (!msg || msg.length === 0) {
-      msg = getString('error_internal', gv);
-    }
-    return msg;
+  if (!msg || msg.length === 0) {
+    msg = getString('error_internal', gv);
+  }
+  return msg;
 }
 
 export interface Locale {
@@ -232,12 +232,12 @@ export interface LoadingService {
 export interface ErrorMessage {
   field: string;
   code: string;
-  param?: string|number|Date;
+  param?: string | number | Date;
   message?: string;
 }
 export interface UIService {
-  getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string|number|boolean;
-  decodeFromForm(form: HTMLFormElement, locale?: Locale, currencyCode?: string|null): any;
+  getValue(el: HTMLInputElement, locale?: Locale, currencyCode?: string): string | number | boolean | null | undefined;
+  decodeFromForm(form: HTMLFormElement, locale?: Locale, currencyCode?: string | null): any;
 
   validateForm(form?: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean): boolean;
   removeFormError(form: HTMLFormElement): void;
@@ -284,26 +284,23 @@ export function buildKeys(attributes: Attributes): string[] {
   }
   return ps;
 }
-
-export function buildId<ID>(props: RouteComponentProps, keys?: string[]): ID|null {
-  if (!props) {
-    return null;
-  }
-  const sp: any = ((props as any).match ? props : (props as any)['props']);
+type Readonly<T> = {
+  readonly [P in keyof T]: T[P];
+};
+export function buildId<ID>(p: Readonly<Params<string>>, keys?: string[]): ID | null {
   if (!keys || keys.length === 0 || keys.length === 1) {
     if (keys && keys.length === 1) {
-      const x = sp.match.params[keys[0]];
-      if (x && x !== '') {
-        return x;
+      if (p[keys[0]]) {
+        return p[keys[0]] as any;
       }
     }
-    return sp.match.params['id'];
+    return p['id'] as any;
   }
   const id: any = {};
   for (const key of keys) {
-    let v = sp.match.params[key];
+    let v = p[key];
     if (!v) {
-      v = sp[key];
+      v = p[key];
       if (!v) {
         return null;
       }
@@ -312,8 +309,6 @@ export function buildId<ID>(props: RouteComponentProps, keys?: string[]): ID|nul
   }
   return id;
 }
-
-
 export function dateToDefaultString(date: Date): string {
   return '' + date.getFullYear() + '-' + addZero(date.getMonth() + 1, 2) + '-' + addZero(date.getDate(), 2); // DateUtil.formatDate(date, 'YYYY-MM-DD');
 }
@@ -380,7 +375,7 @@ export function formatCurrency(currency: string|number, locale?: Locale, currenc
 }
 */
 
-export function initForm(form: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement {
+export function initForm(form?: HTMLFormElement, initMat?: (f: HTMLFormElement) => void): HTMLFormElement | undefined {
   if (form) {
     setTimeout(() => {
       if (initMat) {
@@ -412,7 +407,7 @@ export function error(err: any, gv: (key: string) => string, ae: (msg: string, h
 export function getName(d: string, n?: string): string {
   return (n && n.length > 0 ? n : d);
 }
-export function getModelName(form?: HTMLFormElement|null, name?: string): string {
+export function getModelName(form?: HTMLFormElement | null, name?: string): string {
   if (form) {
     const a = form.getAttribute('model-name');
     if (a && a.length > 0) {
@@ -473,7 +468,7 @@ export function hideLoading(s?: LoadingService): void {
 export interface UIParameter {
   ui?: UIService;
 }
-export function getRemoveError(u?: UIParameter, rmErr?: (el: HTMLInputElement) => void): ((el: HTMLInputElement) => void)|undefined {
+export function getRemoveError(u?: UIParameter, rmErr?: (el: HTMLInputElement) => void): ((el: HTMLInputElement) => void) | undefined {
   if (rmErr) {
     return rmErr;
   }
@@ -484,15 +479,26 @@ export function removeFormError(u?: UIParameter, f?: HTMLFormElement): void {
     u.ui.removeFormError(f);
   }
 }
-export function getValidateForm(u?: UIParameter, vf?: (form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean): ((form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean)|undefined {
+export function getValidateForm(u?: UIParameter, vf?: (form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean): ((form: HTMLFormElement, locale?: Locale, focusFirst?: boolean, scroll?: boolean) => boolean) | undefined {
   if (vf) {
     return vf;
   }
   return (u && u.ui ? u.ui.validateForm : undefined);
 }
-export function getDecodeFromForm(u?: UIParameter, d?: (form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any): ((form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any)|undefined {
+export function getDecodeFromForm(u?: UIParameter, d?: (form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any): ((form: HTMLFormElement, locale?: Locale, currencyCode?: string) => any) | undefined {
   if (d) {
     return d;
   }
   return (u && u.ui ? u.ui.decodeFromForm : undefined);
 }
+export function handleToggle(target?: HTMLInputElement, on?: boolean): void {
+  if (target) {
+    if (on) {
+      if (!target.classList.contains('on')) {
+        target.classList.add('on');
+      }
+    } else {
+      target.classList.remove('on');
+    }
+  }
+}

package/src/diff.ts

@@ -1,5 +1,5 @@
-import {clone} from 'reflectx';
 import {DiffModel} from './core';
+import {clone} from './reflect';
 
 export function formatDiffModel<T, ID>(obj: DiffModel<T, ID>, formatFields?: (obj3: T) => T): DiffModel<T, ID> {
   if (!obj) {

package/src/formutil.ts

@@ -74,7 +74,7 @@ export function focusFirstError(form?: HTMLFormElement|null, className?: string)
       const ctrl = form[i] as HTMLInputElement;
       const parent = ctrl.parentElement;
       if (ctrl.classList.contains(className)
-        || parent && parent.classList.contains(className)) {
+        || (parent && parent.classList.contains(className))) {
         ctrl.focus();
         ctrl.scrollIntoView();
         return;
@@ -86,7 +86,7 @@ export function focusFirstError(form?: HTMLFormElement|null, className?: string)
       const parent = ctrl.parentElement;
       if (ctrl.classList.contains('invalid')
         || ctrl.classList.contains('.ng-invalid')
-        || parent && parent.classList.contains('invalid')) {
+        || (parent && parent.classList.contains('invalid'))) {
         ctrl.focus();
         ctrl.scrollIntoView();
         return;

package/src/index.ts

@@ -1,25 +1,35 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
 export * from './formutil';
 export * from './util';
 export * from './core';
 export * from './state';
 export * from './edit';
 export * from './route';
-export * from './components';
 export * from './diff';
-export * from './router';
 export * from './merge';
 export * from './update';
-export * from './useView';
-export * from './useEdit';
 export * from './useSearch';
 export * from './useMessage';
+export * from './useEdit';
+export * from './components';
+export * from './search';
+export * from './reflect';
 
-export const withDefaultProps = (Component: any) => (props: RouteComponentProps) => {
-  // return <Component props={props} history={props.history} />;
-  return React.createElement(Component, { props, history: props.history });
-};
+import {pageSizes} from './core';
+
+export function checked(s: string[]|string|undefined, v: string): boolean|undefined {
+  if (s) {
+    if (Array.isArray(s)) {
+      return s.includes(v);
+    } else {
+      return s === v;
+    }
+  }
+  return false;
+}
+export function value<T>(obj?: T): T {
+  return (obj ? obj : {} as any);
+}
 export interface LoadingProps {
   error?: any;
 }
@@ -45,3 +55,17 @@ export const Loading = (props: LoadingProps) => {
     );*/
   }
 };
+export interface Props {
+  id?: string;
+  name?: string;
+  size?: number;
+  sizes?: number[];
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+}
+export function PageSizeSelect(p: Props) {
+  const g = p.sizes;
+  const s = (!g || g.length === 0 ? pageSizes : g);
+  const opts = s.map(pgSize => React.createElement('option', { key: pgSize, value: pgSize }, pgSize));
+  return React.createElement('select', { id: p.id, name: p.name, defaultValue: p.size, onChange: p.onChange }, opts);
+}
+export type OnClick = React.MouseEvent<HTMLElement, MouseEvent>;