[WIP] Добавлен ~/fields/Zoom2

fields/MomentField.tsx

@@ -10,7 +10,6 @@ import Icon from './Icon';
 import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
 import DayPicker from 'react-dates/lib/components/DayPicker';
-import * as F from '~/fields';
 
 
 // Props
@@ -35,29 +34,6 @@ class MomentField extends React.Component<Props, State> {
   state: State = { open: false, textFieldValue: null, value: null };
   unlisten: Function|null;
 
-  projectContext = (input: FieldProps) => {
-    const { classes } = this.props as Props & WithStyles;
-    const self = this;
-
-    const endAdornment = <React.Fragment>
-      <Icon data-ignore-focus-in className={classes.iconDate} onClick={this.handleVisibilityToggle}>date_range</Icon>
-      <Icon data-ignore-focus-in className={classes.iconClose} onClick={this.handleClear}>close</Icon>
-    </React.Fragment>;
-
-    return {
-      ...input,
-      endAdornment,
-      value: inputValue(this.state, input),
-      onValueChange: this.handleChange,
-      onBlur: this.handleBlur,
-      onKeyDown: this.handleKeyDown,
-    };
-
-    function inputValue(state: State, input: FieldProps) {
-      return state.value !== null ? state.value : input.value ? input.value.format(self.format(self.props)) : '';
-    }
-  };
-
   componentDidMount() {
     document.addEventListener('focusin', this.handleFocusIn);
     document.addEventListener('click', this.handleFocusIn);
@@ -152,25 +128,38 @@ class MomentField extends React.Component<Props, State> {
     const { rootEl } = this;
     const { open } = this.state;
     const rootClass = classes.root;
+    const self = this;
 
-    return <F.Modifier proj={this.projectContext}>
-      <div {...rest} className={rootClass} ref={this.handleRootRef}>
-        <TextField
-          {...InputProps as any}
-          disabled={disabled}
-          error={error}
-          className={classes.input}
+    const endAdornment = <React.Fragment>
+      <Icon data-ignore-focus-in className={classes.iconDate} onClick={this.handleVisibilityToggle}>date_range</Icon>
+      <Icon data-ignore-focus-in className={classes.iconClose} onClick={this.handleClear}>close</Icon>
+    </React.Fragment>;
+
+    return <div {...rest} className={rootClass} ref={this.handleRootRef}>
+      <TextField
+        {...InputProps as any}
+        disabled={disabled}
+        error={error}
+        className={classes.input}
+        onValueChange={this.handleChange}
+        onBlur={this.handleBlur}
+        onKeyDown={this.handleKeyDown}
+        endAdornment={endAdornment}
+        value={inputValue(this.state, this.props)}
+      />
+      {rootEl && <Popover className={classes.modal} anchorEl={rootEl} open={open} onClose={this.handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }} disableAutoFocus disableEnforceFocus disableRestoreFocus hideBackdrop>
+        <DayPicker
+          ref={this.handlePickerRef}
+          date={value}
+          onDayClick={this.handleDatesChange}
+          numberOfMonths={1}
         />
-        {rootEl && <Popover className={classes.modal} anchorEl={rootEl} open={open} onClose={this.handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }} disableAutoFocus disableEnforceFocus disableRestoreFocus hideBackdrop>
-          <DayPicker
-            ref={this.handlePickerRef}
-            date={value}
-            onDayClick={this.handleDatesChange}
-            numberOfMonths={1}
-          />
-        </Popover>}
-      </div>
-    </F.Modifier>;
+      </Popover>}
+    </div>;
+    
+    function inputValue(state: State, input: FieldProps) {
+      return state.value !== null ? state.value : input.value ? input.value.format(self.format(self.props)) : '';
+    }
   }
 }
 

fields/Suggestions.tsx

@@ -192,7 +192,7 @@ class Suggestions<A> extends React.Component<Props<A>, State> {
   }
 }
 
-export default withStyles(styles)(withGettext(require('./i18n'))(Suggestions));
+export default withStyles(styles)(withGettext(require('./i18n.yml'))(Suggestions));
 
 
 // Styles

fields/TextField.tsx

@@ -113,7 +113,7 @@ export class TextField extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles)(withGettext(require('./i18n'))(TextField));
+export default withStyles(styles)(withGettext(require('./i18n.yml'))(TextField));
 
 
 // CSS классы

fields/Zoom2.tsx

+import * as React from 'react';
+// import { FieldProps } from './';
+// import * as F from './';
+// import { StandardProps } from '@material-ui/core';
+// import memoize from '~/functions/memoize';
+
+
+type FieldProps<T=any> =  { value: T }
+
+// Props
+export type CardProps<T> = {
+  model: {
+    initial: T;
+    modified: T|null;
+  };
+  dispatch(action: { tag: 'Change', value, at }): void;
+}
+
+
+// 
+export type Any<T=any> = React.ReactType<FieldProps<T>>;
+export type AnyC<T=any> = React.ReactElement<FieldProps<T>>;
+export type GetProps<T extends Any> = T extends React.ReactType<infer Props> ? Props : never;
+
+
+// Props
+export type ZoomComponentProps<C extends Any> = {
+  Component: C;
+} & GetProps<C>;
+
+
+/* export default function createZoom<T>(self: React.Component<CardProps<T>>) {
+ *   const { Provider, Consumer } = React.createContext<string[]>([]);
+ *   
+ *   class ZoomComponent<C extends Any> extends React.Component<ZoomComponentProps<C>> {
+ *     projectContext = (path: string[]) => (input: FieldProps) => {
+ *       return {
+ *         ...input,
+ *         value: zoomAny(path, input.value),
+ *         error: zoomAny(path, input.error),
+ *         disabled: zoomAny(path, input.disabled),
+ *         onValueChange: zoomOnChange(path, input.onValueChange),
+ *       };
+ *     }
+ * 
+ *     consumerRender = (path: string[]) => {
+ *       // @ts-ignore
+ *       const { Component, ...rest} = this.props;
+ *       // @ts-ignore
+ *       return <Component {...this.projectProps(rest)}/>;
+ *     };
+ *     
+ *     render() {
+ *       return <Consumer>{this.consumerRender}</Consumer>;
+ *     }
+ *   }
+ *   
+ *   function Zoom<K1 extends keyof T, C extends Any<T[K1]>>(...keys: [K1]): React.ComponentClass<ZoomComponentProps<C>>;
+ *   function Zoom<K1 extends keyof T, K2 extends keyof T[K1], C extends Any<T[K1][K2]>>(...keys: [K1, K2]): React.ComponentClass<ZoomComponentProps<C>>;
+ *   function Zoom<K1 extends keyof T, K2 extends keyof T[K1], K3 extends keyof T[K1][K2], C extends Any<T[K1][K2][K3]>>(...keys: [K1, K2]): React.ComponentClass<ZoomComponentProps<C>>;
+ *   function Zoom(...keys): any {
+ *     return props => <Provider value={keys}><ZoomComponent {...props}/></Provider>;
+ *   }
+ * 
+ *   return Zoom;
+ * }
+ * 
+ * const zoomOnChange = memoize((path: ObjectKey[], onChange: ((x: any, at: ObjectPath) => void)|undefined) => {
+ *   return (next, at=[]) => {
+ *     onChange && onChange(next, [...path, ...at]);
+ *   };
+ * });
+ * 
+ * const zoomAny = memoize((path: ObjectKey[], input: any) => {
+ *   let iter = input as any;
+ *   for (const key of path) {
+ *     if (typeof(iter) !== 'object' || iter === null) return iter;
+ *     iter = iter[key];
+ *   }
+ *   return iter;
+ * });
+ * 
+ *  */
+
+// Props
+type Props = {
+  model: {
+    initial: Form;
+    modified: Form|null;
+  },
+  dispatch(action: any): void;
+}
+
+
+// Form
+type Form = {
+  login: string;
+  password: string;
+  one: {
+    two: {
+      'name': string;
+      three: {
+        counter: number
+      },
+    },
+  },
+}
+
+
+// @ts-ignore
+class TextField extends React.Component<FieldProps<string>> {
+  render() { return <div/>; }
+}
+// @ts-ignore
+declare const NumberField: React.ReactType<FieldProps<number>>;
+// @ts-ignore
+declare const FormField: React.ReactType<FieldProps<Form['one']>>;
+
+
+type T = Form;
+/* function Zoom2(props: { in: keyof T }, context) {
+ *   return <div></div>;
+ * }; */
+declare function Zoom2<K1 extends keyof T, C extends Any<T[K1]>>(props: { in: K1, Component: C }, context): JSX.Element;
+declare function Zoom2<K1 extends keyof T, K2 extends keyof T[K1], C extends Any<T[K1][K2]>>(props: { in: [K1, K2], Component: C }, context): JSX.Element;
+declare function Zoom2<K1 extends keyof T, K2 extends keyof T[K1], K3 extends keyof T[K1][K2], C extends Any<T[K1][K2][K3]>>(props: { in: [K1, K2, K3], Component: C }, context): JSX.Element;
+
+
+
+export class Widget extends React.Component<Props> {
+  render() {
+    //    const Zoom = createZoom<Form>(this);
+    //    const ZoomName = Zoom('login');
+
+    return <div>
+      <Zoom2
+        in="one"
+        Component={FormField}
+      />
+    </div>;
+  }
+}

fields/i18n.yml

+- "":
+    locale: "ru-RU"
+  "Fill out this field": "Заполните это поле"
+  "Nothing found…": "Ничего не найдено…"

fields/i18n/index.ts

-export default {
-  "ru-RU": {
-    "Fill out this field": "Заполните это поле",
-    "Nothing found…": "Ничего не найдено…",
-  },
-  "lt-LT": {
-  },
-  "de-DE": {
-  },
-};

functions/update-at.ts

 import { ObjectPath } from './get-at';
+export { ObjectPath };
 
 
 /**
@@ -9,7 +10,7 @@ import { ObjectPath } from './get-at';
  * // b => { one: { two: { three: 'four' } } }
  * ```
  */
-export function updateAt(at_: ObjectPath, value: any): <A>(obj: A) => A {
+export default function updateAt(at_: ObjectPath, value: any): <A>(obj: A) => A {
   const at = Array.isArray(at_) ? at_ : [at_];
   return obj => {
     let stack: any[] = [obj];

gettext/index.ts

@@ -66,7 +66,7 @@ export function makeGettext(...webpackContexts): DeferredGettext {
     if (!Array.isArray(xs)) return xs;
     return idx >= xs.length ? xs[xs.length - 1] : xs[idx];
   }
-};
+}
 
 
 /**