react-ui-basics 0.0.219 → 0.0.220

package/src/{TextField.js → TextField.tsx}

@@ -1,11 +1,41 @@
-import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import './TextField.css'; import React from 'react';
+import React, {ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, ReactElement} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import './TextField.css'
 import {classNames, getRandomId, isUndefined, orNoop, addEventListener, createRef, setTimeout} from "./Tools";
 import {PureComponent, render, componentDidMount, propsGetter, stateGSs, componentDidUpdate} from "./ReactConstants";
-import PropTypes from "prop-types";
 
-class TextField extends PureComponent {
+export interface TextAreaProps {
+    id?: string,
+    className?: string,
+    value?: string,
+    name?: string,
+    type?: string,
+    autoComplete?: string,
+    placeholder?: string,
+    label?: string | ReactElement,
+    check?: (value: string) => boolean,
+    onClick?: MouseEventHandler<HTMLInputElement>,
+    onMouseUp?: MouseEventHandler<HTMLInputElement>,
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>,
+    onKeyUp?: KeyboardEventHandler<HTMLInputElement>,
+    onFocus?: () => void,
+    onBlur?: () => void,
+    onChange: ChangeEventHandler<HTMLInputElement>,
+    required?: boolean,
+    disabled?: boolean,
+    focused?: boolean,
+    min?: string | number,
+    max?: string | number,
+    input?: (el: HTMLInputElement) => void,
+}
+
+abstract class AbstractTextField extends PureComponent<TextAreaProps> {
+    check: () => void
+    getInput: () => HTMLInputElement
+    withAutofillAnimationCallback: () => void
+}
+
+class TextField extends AbstractTextField {
 
     constructor(properties) {
         super(properties);
@@ -20,18 +50,18 @@ class TextField extends PureComponent {
         ] = stateGSs(that, 3);
         const props = propsGetter(that);
 
-        const inputRef = createRef();
+        const inputRef = createRef<HTMLInputElement>();
         const check = () => {
             const {required, check} = props();
-            const value = __value(inputRef());
+            const value = inputRef().value;
             const error = (required && value === '') || (check && check(value));
             errorState() !== error && setTimeout(errorState, 0, error);
             return error;
         };
 
         const onChange = (e) => {
-            orNoop(props()[ReactConstants[7]])(e);
-            isWithValue(!!__value(inputRef()));
+            orNoop(props().onChange)(e);
+            isWithValue(!!inputRef().value);
             check()
         };
 
@@ -45,7 +75,7 @@ class TextField extends PureComponent {
             orNoop(props().onBlur)();
         };
 
-        that[ReactConstants[3]] = () => {
+        that[render] = () => {
             const _props = props();
             const {value, name, type, label, check, disabled, required, min, max, onClick, onKeyDown, onKeyUp, onMouseUp, autoComplete, placeholder, className} = _props;
             const id = _props.id || randomId;
@@ -86,10 +116,10 @@ class TextField extends PureComponent {
             )
         };
 
-        that[ReactConstants[0]] = () => {
+        that[componentDidMount] = () => {
             const {focused, input} = props(),
                 i = inputRef();
-            let hasValue = !!__value(i);
+            let hasValue = !!i.value;
             isWithValue(hasValue);
 
             !hasValue && setTimeout(() => {
@@ -103,8 +133,8 @@ class TextField extends PureComponent {
             focused && i.focus();
             orNoop(input)(i);
         };
-        that[ReactConstants[2]] = () => {
-            if (__value(props()) !== __value(inputRef()))
+        that[componentDidUpdate] = () => {
+            if (props().value !== inputRef().value)
                 check();
             const {focused} = props(),
                 i = inputRef();
@@ -121,36 +151,4 @@ class TextField extends PureComponent {
     }
 }
 
-if (process.env.NODE_ENV !== 'production') {
-    TextField.propTypes = {
-        id: PropTypes.string,
-        [ReactConstants[5]]: PropTypes.string,
-        value: PropTypes.string,
-        name: PropTypes.string,
-        type: PropTypes.string,
-        autoComplete: PropTypes.string,
-        placeholder: PropTypes.string,
-        label: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.element
-        ]),
-        check: PropTypes.func,
-        [ReactConstants[6]]: PropTypes.func,
-        onKeyDown: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        [ReactConstants[7]]: PropTypes.func,
-        required: PropTypes.bool,
-        disabled: PropTypes.bool,
-        min: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]),
-        max: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]),
-    };
-}
-
 export default TextField

package/src/Tools.ts

@@ -24,9 +24,9 @@ export const ref = (name, component) => {
     return component[refKey] || (component[refKey] = (it) => component[name] = it)
 };
 
-export const createRef = (initialValue?: any) => {
+export const createRef = <T>(initialValue?: T) => {
     let v = initialValue;
-    return function (value?: any) {
+    return (value?: any) => {
         if (value != UNDEFINED)
             v = value
         return v;

package/src/store/Store.test.js

@@ -95,7 +95,7 @@ it('update value if selector dependencies change', () => {
 
     const MyComponent = () => {
         let key = useStore(store, it => it.key);
-        let value = useStore(store, it => it[key], [key]);
+        let value = useStore(store, it => it[key]);
         renderCount++
         renderedValue.push(value)
         return <div>{value}</div>;

package/src/store/Store.ts

@@ -1,4 +1,3 @@
-import {useEffect, useReducer} from "react";
 import {createProxy} from "./ProxyTools";
 import {isFunction, isObject} from "../Tools";
 import {useSyncExternalStore} from "../ReactConstants";
@@ -78,7 +77,10 @@ export function getGlobalState() {
 
 export type Selector<T, R> = (t: T) => R;
 
+// @ts-ignore
 export function useStore<T, R>(store: Store<T>, selector: Selector<T, R>): R
+// @ts-ignore
 export function useStore<T>(store: Store<T>, selector?: undefined): T
+// @ts-ignore
 export const useStore = <T, R>(store: Store<T>, selector?: Selector<T, R>): R =>
     useSyncExternalStore(store.subscribe, selector ? () => selector(store.get()) : store.get);

package/store/Store.js

@@ -52,6 +52,7 @@ class Store extends AbstractStore {
 function getGlobalState() {
     return STORES;
 }
+// @ts-ignore
 const useStore = (store, selector) => useSyncExternalStore(store.subscribe, selector ? () => selector(store.get()) : store.get);
 
 export { Store, Store as default, getGlobalState, useStore };

package/store/Store.js.map

@@ -1 +1 @@
-{"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAsB,CAAA;AAM5C,MAAe,aAAa,CAAA;AAW3B,CAAA;AAGK,MAAO,KAAS,SAAQ,aAAgB,CAAA;IAE1C,WAAY,CAAA,YAAe,EAAE,IAAa,EAAA;AACtC,QAAA,KAAK,EAAE,CAAA;QACP,IAAI,IAAI,GAAG,IAAI,CAAC;AAChB,QAAA,IAAI,SAAS,GAA4B,IAAI,GAAG,EAAsB,CAAA;QACtE,IAAI,KAAK,GAAG,YAAY,CAAC;QACzB,IAAI,YAAY,GAAG,MAAK;AACpB,YAAA,KAAK,IAAI,QAAQ,IAAI,SAAS,CAAC,MAAM,EAAE,EAAE;AACrC,gBAAA,QAAQ,EAAE,CAAA;AACb,aAAA;AACL,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,GAAG,GAAG,MAAS,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,KAAI;AAClB,YAAA,IAAI,MAAM,CAAC;AACX,YAAA,IAAI,UAAU,CAAC,MAAM,CAAC,EAAE;AACpB,gBAAA,MAAM,KAAK,GAAG,WAAW,CAAC,KAAe,CAAC,CAAC;AAC3C,gBAAA,MAAM,GAAI,MAAoB,CAAC,KAAK,CAAC,CAAC;AACtC,gBAAA,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,KAAK;AAC3B,oBAAA,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;AAC5B,aAAA;AAAM,iBAAA,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE;AACzB,gBAAA,MAAM,GAAO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAAK,EAAA,MAAM,CAAC,CAAA;AACjC,aAAA;AAAM,iBAAA;gBACH,MAAM,GAAG,MAAM,CAAA;AAClB,aAAA;YAED,KAAK,GAAG,MAAM,CAAA;AACd,YAAA,YAAY,EAAE,CAAC;AACnB,SAAC,CAAA;AACD,QAAA,IAAI,CAAC,KAAK,GAAG,MAAK;YACd,KAAK,GAAG,YAAY,CAAA;AACpB,YAAA,YAAY,EAAE,CAAC;AACnB,SAAC,CAAA;AAED,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,EAAc,KAAI;AAChC,YAAA,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACrB,YAAA,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;AACtB,YAAA,OAAO,MAAK;AACR,gBAAA,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;AACzB,aAAC,CAAA;AACL,SAAC,CAAA;AAED,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAc,IAAI,CAAC;QACnC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,CAAA;KAC7B;AACJ,CAAA;SAIe,cAAc,GAAA;AAC1B,IAAA,OAAO,MAAM,CAAA;AACjB,CAAC;AAMY,MAAA,QAAQ,GAAG,CAAO,KAAe,EAAE,QAAyB,KACrE,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,GAAG,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,GAAG;;;;"}
+{"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAsB,CAAA;AAM5C,MAAe,aAAa,CAAA;AAW3B,CAAA;AAGK,MAAO,KAAS,SAAQ,aAAgB,CAAA;IAE1C,WAAY,CAAA,YAAe,EAAE,IAAa,EAAA;AACtC,QAAA,KAAK,EAAE,CAAA;QACP,IAAI,IAAI,GAAG,IAAI,CAAC;AAChB,QAAA,IAAI,SAAS,GAA4B,IAAI,GAAG,EAAsB,CAAA;QACtE,IAAI,KAAK,GAAG,YAAY,CAAC;QACzB,IAAI,YAAY,GAAG,MAAK;AACpB,YAAA,KAAK,IAAI,QAAQ,IAAI,SAAS,CAAC,MAAM,EAAE,EAAE;AACrC,gBAAA,QAAQ,EAAE,CAAA;AACb,aAAA;AACL,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,GAAG,GAAG,MAAS,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,KAAI;AAClB,YAAA,IAAI,MAAM,CAAC;AACX,YAAA,IAAI,UAAU,CAAC,MAAM,CAAC,EAAE;AACpB,gBAAA,MAAM,KAAK,GAAG,WAAW,CAAC,KAAe,CAAC,CAAC;AAC3C,gBAAA,MAAM,GAAI,MAAoB,CAAC,KAAK,CAAC,CAAC;AACtC,gBAAA,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,KAAK;AAC3B,oBAAA,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;AAC5B,aAAA;AAAM,iBAAA,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE;AACzB,gBAAA,MAAM,GAAO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAAK,EAAA,MAAM,CAAC,CAAA;AACjC,aAAA;AAAM,iBAAA;gBACH,MAAM,GAAG,MAAM,CAAA;AAClB,aAAA;YAED,KAAK,GAAG,MAAM,CAAA;AACd,YAAA,YAAY,EAAE,CAAC;AACnB,SAAC,CAAA;AACD,QAAA,IAAI,CAAC,KAAK,GAAG,MAAK;YACd,KAAK,GAAG,YAAY,CAAA;AACpB,YAAA,YAAY,EAAE,CAAC;AACnB,SAAC,CAAA;AAED,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,EAAc,KAAI;AAChC,YAAA,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACrB,YAAA,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;AACtB,YAAA,OAAO,MAAK;AACR,gBAAA,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;AACzB,aAAC,CAAA;AACL,SAAC,CAAA;AAED,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAc,IAAI,CAAC;QACnC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,CAAA;KAC7B;AACJ,CAAA;SAIe,cAAc,GAAA;AAC1B,IAAA,OAAO,MAAM,CAAA;AACjB,CAAC;AAQD;AACa,MAAA,QAAQ,GAAG,CAAO,KAAe,EAAE,QAAyB,KACrE,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,GAAG,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,GAAG;;;;"}

package/src/Button.js

@@ -1,98 +0,0 @@
-import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import './Button.css'; import React from 'react';
-import ReactCreateElement from './ReactCreateElement';
-import './Button.css'
-import {classNames, DOCUMENT, addEventListener, createRef, orNoop} from "./Tools";
-import PropTypes from "prop-types";
-import {PureComponent, render, stateGS, props} from "./ReactConstants";
-
-class Button extends PureComponent {
-    constructor(properties) {
-        super(properties);
-
-        const that = this;
-        const el = createRef();
-        const ripple = createRef();
-
-        const rippleClassName = stateGS(that);
-
-        const onMouseDown = (e) => {
-            if (!props(that).withRipple) return;
-
-            const rect = el().getBoundingClientRect();
-            const rippleElement = ripple();
-            const style = __style(rippleElement);
-            const body = DOCUMENT.body;
-
-            style.height = style.width = Math.max(__width(rect), __height(rect)) + 'px';
-            style.top = (__pageY(e) - __top(rect) - rippleElement.offsetHeight / 2 - __scrollTop(body)) + 'px';
-            style.left = (__pageX(e) - __left(rect) - rippleElement.offsetWidth / 2 - __scrollLeft(body)) + 'px';
-
-            rippleClassName('show');
-
-            addEventListener(rippleElement, 'animationend', () => {
-                rippleClassName('showed');
-            });
-        };
-
-        const onFocus = e => {
-            orNoop(props(that).onFocus)(e)
-            if (rippleClassName() === 'show')
-                return
-
-            const rect = el().getBoundingClientRect();
-            const style = __style(ripple());
-
-            let size = Math.max(__width(rect), __height(rect)) * 0.8
-            style.height = style.width = size + 'px';
-            style.top = (__height(rect) / 2 - size / 2) + 'px';
-            style.left = (__width(rect) / 2 - size / 2) + 'px';
-
-            rippleClassName('focused');
-        }
-
-        that[ReactConstants[3]] = () => {
-            const {children, type, className, onClick, flat, raised = !flat, round, style, disabled} = props(that);
-            return (
-                <button className={classNames('Button',
-                    className,
-                    disabled && 'disabled',
-                    raised && 'raised',
-                    flat && 'flat',
-                    round && 'round')
-                }
-                        onFocus={onFocus}
-                        disabled={disabled}
-                        style={style}
-                        type={type}
-                        onClick={onClick}
-                        onMouseDown={onMouseDown}
-                        ref={el}>
-                    {children}
-                    <span className={classNames(`ripple`, rippleClassName())} ref={ripple}/>
-                </button>
-            );
-        }
-    }
-}
-
-if (process.env.NODE_ENV !== 'production') {
-    Button.propTypes = {
-        flat: PropTypes.bool,
-        raised: PropTypes.bool,
-        round: PropTypes.bool,
-        disabled: PropTypes.bool,
-        withRipple: PropTypes.bool,
-        type: PropTypes.oneOf(['button', 'submit', 'reset']),
-        [ReactConstants[5]]: PropTypes.string,
-        [ReactConstants[6]]: PropTypes.func,
-        onFocus: PropTypes.func,
-        style: PropTypes.object,
-    };
-}
-
-Button.defaultProps = {
-    type: 'button',
-    withRipple: true,
-};
-
-export default Button;