react-ui-basics 0.0.218 → 0.0.220
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Button.d.ts +24 -0
- package/Button.js +45 -75
- package/Button.js.map +1 -1
- package/CalendarMonthView.d.ts +1 -0
- package/CircleProgress.d.ts +1 -0
- package/DNDContainer.js +10 -5
- package/DNDContainer.js.map +1 -1
- package/DNDDraggable.d.ts +29 -0
- package/DNDDraggable.js +27 -44
- package/DNDDraggable.js.map +1 -1
- package/DNDDroppable.d.ts +28 -0
- package/DNDDroppable.js +32 -46
- package/DNDDroppable.js.map +1 -1
- package/DroppableHorizontalList.js +28 -27
- package/DroppableHorizontalList.js.map +1 -1
- package/DroppableList.js +29 -34
- package/DroppableList.js.map +1 -1
- package/Dropzone.js.map +1 -1
- package/MaterialIcon.d.ts +1 -0
- package/ReactConstants.d.ts +1 -0
- package/ReactConstants.js +17 -2
- package/ReactConstants.js.map +1 -1
- package/ScrollableTable.d.ts +4 -2
- package/ScrollableTable.js +5 -6
- package/ScrollableTable.js.map +1 -1
- package/Size.d.ts +1 -0
- package/SpinningProgress.d.ts +1 -0
- package/Table.js +1 -1
- package/Table.js.map +1 -1
- package/TextField.d.ts +36 -0
- package/TextField.js +73 -134
- package/TextField.js.map +1 -1
- package/Tools.d.ts +1 -1
- package/Tools.js +1 -1
- package/Tools.js.map +1 -1
- package/bundle.css +684 -684
- package/package.json +1 -1
- package/src/Button.tsx +97 -0
- package/src/DNDContainer.tsx +19 -10
- package/src/{DNDDraggable.js → DNDDraggable.tsx} +35 -9
- package/src/{DNDDroppable.js → DNDDroppable.tsx} +35 -8
- package/src/DroppableHorizontalList.js +33 -32
- package/src/DroppableList.js +34 -41
- package/src/Dropzone.tsx +1 -1
- package/src/ReactConstants.ts +21 -1
- package/src/ScrollableTable.tsx +7 -7
- package/src/Table.tsx +3 -3
- package/src/{TextField.js → TextField.tsx} +42 -44
- package/src/Tools.ts +2 -2
- package/src/store/Store.test.js +1 -1
- package/src/store/Store.ts +8 -26
- package/store/Store.d.ts +3 -4
- package/store/Store.js +5 -21
- package/store/Store.js.map +1 -1
- package/src/Button.js +0 -98
|
@@ -1,11 +1,41 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React, {ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, ReactElement} from 'react';
|
|
2
2
|
import ReactCreateElement from './ReactCreateElement';
|
|
3
3
|
import './TextField.css'
|
|
4
4
|
import {classNames, getRandomId, isUndefined, orNoop, addEventListener, createRef, setTimeout} from "./Tools";
|
|
5
5
|
import {PureComponent, render, componentDidMount, propsGetter, stateGSs, componentDidUpdate} from "./ReactConstants";
|
|
6
|
-
import PropTypes from "prop-types";
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
export interface TextAreaProps {
|
|
8
|
+
id?: string,
|
|
9
|
+
className?: string,
|
|
10
|
+
value?: string,
|
|
11
|
+
name?: string,
|
|
12
|
+
type?: string,
|
|
13
|
+
autoComplete?: string,
|
|
14
|
+
placeholder?: string,
|
|
15
|
+
label?: string | ReactElement,
|
|
16
|
+
check?: (value: string) => boolean,
|
|
17
|
+
onClick?: MouseEventHandler<HTMLInputElement>,
|
|
18
|
+
onMouseUp?: MouseEventHandler<HTMLInputElement>,
|
|
19
|
+
onKeyDown?: KeyboardEventHandler<HTMLInputElement>,
|
|
20
|
+
onKeyUp?: KeyboardEventHandler<HTMLInputElement>,
|
|
21
|
+
onFocus?: () => void,
|
|
22
|
+
onBlur?: () => void,
|
|
23
|
+
onChange: ChangeEventHandler<HTMLInputElement>,
|
|
24
|
+
required?: boolean,
|
|
25
|
+
disabled?: boolean,
|
|
26
|
+
focused?: boolean,
|
|
27
|
+
min?: string | number,
|
|
28
|
+
max?: string | number,
|
|
29
|
+
input?: (el: HTMLInputElement) => void,
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
abstract class AbstractTextField extends PureComponent<TextAreaProps> {
|
|
33
|
+
check: () => void
|
|
34
|
+
getInput: () => HTMLInputElement
|
|
35
|
+
withAutofillAnimationCallback: () => void
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
class TextField extends AbstractTextField {
|
|
9
39
|
|
|
10
40
|
constructor(properties) {
|
|
11
41
|
super(properties);
|
|
@@ -20,18 +50,18 @@ class TextField extends PureComponent {
|
|
|
20
50
|
] = stateGSs(that, 3);
|
|
21
51
|
const props = propsGetter(that);
|
|
22
52
|
|
|
23
|
-
const inputRef = createRef();
|
|
53
|
+
const inputRef = createRef<HTMLInputElement>();
|
|
24
54
|
const check = () => {
|
|
25
55
|
const {required, check} = props();
|
|
26
|
-
const value =
|
|
56
|
+
const value = inputRef().value;
|
|
27
57
|
const error = (required && value === '') || (check && check(value));
|
|
28
58
|
errorState() !== error && setTimeout(errorState, 0, error);
|
|
29
59
|
return error;
|
|
30
60
|
};
|
|
31
61
|
|
|
32
62
|
const onChange = (e) => {
|
|
33
|
-
orNoop(props()
|
|
34
|
-
isWithValue(!!
|
|
63
|
+
orNoop(props().onChange)(e);
|
|
64
|
+
isWithValue(!!inputRef().value);
|
|
35
65
|
check()
|
|
36
66
|
};
|
|
37
67
|
|
|
@@ -45,7 +75,7 @@ class TextField extends PureComponent {
|
|
|
45
75
|
orNoop(props().onBlur)();
|
|
46
76
|
};
|
|
47
77
|
|
|
48
|
-
that[
|
|
78
|
+
that[render] = () => {
|
|
49
79
|
const _props = props();
|
|
50
80
|
const {value, name, type, label, check, disabled, required, min, max, onClick, onKeyDown, onKeyUp, onMouseUp, autoComplete, placeholder, className} = _props;
|
|
51
81
|
const id = _props.id || randomId;
|
|
@@ -86,10 +116,10 @@ class TextField extends PureComponent {
|
|
|
86
116
|
)
|
|
87
117
|
};
|
|
88
118
|
|
|
89
|
-
that[
|
|
119
|
+
that[componentDidMount] = () => {
|
|
90
120
|
const {focused, input} = props(),
|
|
91
121
|
i = inputRef();
|
|
92
|
-
let hasValue = !!
|
|
122
|
+
let hasValue = !!i.value;
|
|
93
123
|
isWithValue(hasValue);
|
|
94
124
|
|
|
95
125
|
!hasValue && setTimeout(() => {
|
|
@@ -103,8 +133,8 @@ class TextField extends PureComponent {
|
|
|
103
133
|
focused && i.focus();
|
|
104
134
|
orNoop(input)(i);
|
|
105
135
|
};
|
|
106
|
-
that[
|
|
107
|
-
if (
|
|
136
|
+
that[componentDidUpdate] = () => {
|
|
137
|
+
if (props().value !== inputRef().value)
|
|
108
138
|
check();
|
|
109
139
|
const {focused} = props(),
|
|
110
140
|
i = inputRef();
|
|
@@ -121,36 +151,4 @@ class TextField extends PureComponent {
|
|
|
121
151
|
}
|
|
122
152
|
}
|
|
123
153
|
|
|
124
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
125
|
-
TextField.propTypes = {
|
|
126
|
-
id: PropTypes.string,
|
|
127
|
-
[ReactConstants[5]]: PropTypes.string,
|
|
128
|
-
value: PropTypes.string,
|
|
129
|
-
name: PropTypes.string,
|
|
130
|
-
type: PropTypes.string,
|
|
131
|
-
autoComplete: PropTypes.string,
|
|
132
|
-
placeholder: PropTypes.string,
|
|
133
|
-
label: PropTypes.oneOfType([
|
|
134
|
-
PropTypes.string,
|
|
135
|
-
PropTypes.element
|
|
136
|
-
]),
|
|
137
|
-
check: PropTypes.func,
|
|
138
|
-
[ReactConstants[6]]: PropTypes.func,
|
|
139
|
-
onKeyDown: PropTypes.func,
|
|
140
|
-
onFocus: PropTypes.func,
|
|
141
|
-
onBlur: PropTypes.func,
|
|
142
|
-
[ReactConstants[7]]: PropTypes.func,
|
|
143
|
-
required: PropTypes.bool,
|
|
144
|
-
disabled: PropTypes.bool,
|
|
145
|
-
min: PropTypes.oneOfType([
|
|
146
|
-
PropTypes.string,
|
|
147
|
-
PropTypes.number
|
|
148
|
-
]),
|
|
149
|
-
max: PropTypes.oneOfType([
|
|
150
|
-
PropTypes.string,
|
|
151
|
-
PropTypes.number
|
|
152
|
-
]),
|
|
153
|
-
};
|
|
154
|
-
}
|
|
155
|
-
|
|
156
154
|
export default TextField
|
package/src/Tools.ts
CHANGED
|
@@ -24,9 +24,9 @@ export const ref = (name, component) => {
|
|
|
24
24
|
return component[refKey] || (component[refKey] = (it) => component[name] = it)
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
export const createRef = (initialValue?:
|
|
27
|
+
export const createRef = <T>(initialValue?: T) => {
|
|
28
28
|
let v = initialValue;
|
|
29
|
-
return
|
|
29
|
+
return (value?: any) => {
|
|
30
30
|
if (value != UNDEFINED)
|
|
31
31
|
v = value
|
|
32
32
|
return v;
|
package/src/store/Store.test.js
CHANGED
|
@@ -95,7 +95,7 @@ it('update value if selector dependencies change', () => {
|
|
|
95
95
|
|
|
96
96
|
const MyComponent = () => {
|
|
97
97
|
let key = useStore(store, it => it.key);
|
|
98
|
-
let value = useStore(store, it => it[key]
|
|
98
|
+
let value = useStore(store, it => it[key]);
|
|
99
99
|
renderCount++
|
|
100
100
|
renderedValue.push(value)
|
|
101
101
|
return <div>{value}</div>;
|
package/src/store/Store.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {useEffect, useReducer} from "react";
|
|
2
1
|
import {createProxy} from "./ProxyTools";
|
|
3
2
|
import {isFunction, isObject} from "../Tools";
|
|
3
|
+
import {useSyncExternalStore} from "../ReactConstants";
|
|
4
4
|
|
|
5
5
|
const STORES = new Map<Symbol, Store<any>>()
|
|
6
6
|
|
|
@@ -77,28 +77,10 @@ export function getGlobalState() {
|
|
|
77
77
|
|
|
78
78
|
export type Selector<T, R> = (t: T) => R;
|
|
79
79
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
export function useStore<T
|
|
84
|
-
|
|
85
|
-
export
|
|
86
|
-
|
|
87
|
-
selector = (defaultSelector as Selector<T, R>)
|
|
88
|
-
|
|
89
|
-
const [_, forceUpdate] = useReducer(x => x + 1, 0);
|
|
90
|
-
let value = selector(store.get())
|
|
91
|
-
|
|
92
|
-
useEffect(() => {
|
|
93
|
-
const updateState = () => {
|
|
94
|
-
let next = selector(store.get())
|
|
95
|
-
if (value !== next) {
|
|
96
|
-
value = next
|
|
97
|
-
forceUpdate()
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
return store.subscribe(updateState)
|
|
101
|
-
}, selectorDependencies)
|
|
102
|
-
|
|
103
|
-
return value
|
|
104
|
-
}
|
|
80
|
+
// @ts-ignore
|
|
81
|
+
export function useStore<T, R>(store: Store<T>, selector: Selector<T, R>): R
|
|
82
|
+
// @ts-ignore
|
|
83
|
+
export function useStore<T>(store: Store<T>, selector?: undefined): T
|
|
84
|
+
// @ts-ignore
|
|
85
|
+
export const useStore = <T, R>(store: Store<T>, selector?: Selector<T, R>): R =>
|
|
86
|
+
useSyncExternalStore(store.subscribe, selector ? () => selector(store.get()) : store.get);
|
package/store/Store.d.ts
CHANGED
|
@@ -19,7 +19,6 @@ export declare class Store<T> extends AbstractStore<T> {
|
|
|
19
19
|
export default Store;
|
|
20
20
|
export declare function getGlobalState(): Map<Symbol, Store<any>>;
|
|
21
21
|
export declare type Selector<T, R> = (t: T) => R;
|
|
22
|
-
export declare
|
|
23
|
-
export declare function useStore<T
|
|
24
|
-
export declare
|
|
25
|
-
export declare function useStore<T>(store: Store<T>, selector?: undefined, selectorDependencies?: undefined): T;
|
|
22
|
+
export declare function useStore<T, R>(store: Store<T>, selector: Selector<T, R>): R;
|
|
23
|
+
export declare function useStore<T>(store: Store<T>, selector?: undefined): T;
|
|
24
|
+
export declare const useStore: <T, R>(store: Store<T>, selector?: Selector<T, R>) => R;
|
package/store/Store.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
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 {
|
|
2
|
-
import { createProxy } from './ProxyTools.js';
|
|
1
|
+
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 { createProxy } from './ProxyTools.js';
|
|
3
2
|
import { isFunction, isObject } from '../Tools.js';
|
|
3
|
+
import { useSyncExternalStore } from '../ReactConstants.js';
|
|
4
4
|
|
|
5
5
|
const STORES = new Map();
|
|
6
6
|
class AbstractStore {
|
|
@@ -52,24 +52,8 @@ class Store extends AbstractStore {
|
|
|
52
52
|
function getGlobalState() {
|
|
53
53
|
return STORES;
|
|
54
54
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
if (!selector)
|
|
58
|
-
selector = defaultSelector;
|
|
59
|
-
const [_, forceUpdate] = useReducer(x => x + 1, 0);
|
|
60
|
-
let value = selector(store.get());
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
const updateState = () => {
|
|
63
|
-
let next = selector(store.get());
|
|
64
|
-
if (value !== next) {
|
|
65
|
-
value = next;
|
|
66
|
-
forceUpdate();
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
return store.subscribe(updateState);
|
|
70
|
-
}, selectorDependencies);
|
|
71
|
-
return value;
|
|
72
|
-
}
|
|
55
|
+
// @ts-ignore
|
|
56
|
+
const useStore = (store, selector) => useSyncExternalStore(store.subscribe, selector ? () => selector(store.get()) : store.get);
|
|
73
57
|
|
|
74
|
-
export { Store, Store as default,
|
|
58
|
+
export { Store, Store as default, getGlobalState, useStore };
|
|
75
59
|
//# sourceMappingURL=Store.js.map
|
package/store/Store.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"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
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
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';
|
|
2
|
-
import ReactCreateElement from './ReactCreateElement';
|
|
3
|
-
import './Button.css'
|
|
4
|
-
import {classNames, DOCUMENT, addEventListener, createRef, orNoop} from "./Tools";
|
|
5
|
-
import PropTypes from "prop-types";
|
|
6
|
-
import {PureComponent, render, stateGS, props} from "./ReactConstants";
|
|
7
|
-
|
|
8
|
-
class Button extends PureComponent {
|
|
9
|
-
constructor(properties) {
|
|
10
|
-
super(properties);
|
|
11
|
-
|
|
12
|
-
const that = this;
|
|
13
|
-
const el = createRef();
|
|
14
|
-
const ripple = createRef();
|
|
15
|
-
|
|
16
|
-
const rippleClassName = stateGS(that);
|
|
17
|
-
|
|
18
|
-
const onMouseDown = (e) => {
|
|
19
|
-
if (!props(that).withRipple) return;
|
|
20
|
-
|
|
21
|
-
const rect = el().getBoundingClientRect();
|
|
22
|
-
const rippleElement = ripple();
|
|
23
|
-
const style = __style(rippleElement);
|
|
24
|
-
const body = DOCUMENT.body;
|
|
25
|
-
|
|
26
|
-
style.height = style.width = Math.max(__width(rect), __height(rect)) + 'px';
|
|
27
|
-
style.top = (__pageY(e) - __top(rect) - rippleElement.offsetHeight / 2 - __scrollTop(body)) + 'px';
|
|
28
|
-
style.left = (__pageX(e) - __left(rect) - rippleElement.offsetWidth / 2 - __scrollLeft(body)) + 'px';
|
|
29
|
-
|
|
30
|
-
rippleClassName('show');
|
|
31
|
-
|
|
32
|
-
addEventListener(rippleElement, 'animationend', () => {
|
|
33
|
-
rippleClassName('showed');
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const onFocus = e => {
|
|
38
|
-
orNoop(props(that).onFocus)(e)
|
|
39
|
-
if (rippleClassName() === 'show')
|
|
40
|
-
return
|
|
41
|
-
|
|
42
|
-
const rect = el().getBoundingClientRect();
|
|
43
|
-
const style = __style(ripple());
|
|
44
|
-
|
|
45
|
-
let size = Math.max(__width(rect), __height(rect)) * 0.8
|
|
46
|
-
style.height = style.width = size + 'px';
|
|
47
|
-
style.top = (__height(rect) / 2 - size / 2) + 'px';
|
|
48
|
-
style.left = (__width(rect) / 2 - size / 2) + 'px';
|
|
49
|
-
|
|
50
|
-
rippleClassName('focused');
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
that[ReactConstants[3]] = () => {
|
|
54
|
-
const {children, type, className, onClick, flat, raised = !flat, round, style, disabled} = props(that);
|
|
55
|
-
return (
|
|
56
|
-
<button className={classNames('Button',
|
|
57
|
-
className,
|
|
58
|
-
disabled && 'disabled',
|
|
59
|
-
raised && 'raised',
|
|
60
|
-
flat && 'flat',
|
|
61
|
-
round && 'round')
|
|
62
|
-
}
|
|
63
|
-
onFocus={onFocus}
|
|
64
|
-
disabled={disabled}
|
|
65
|
-
style={style}
|
|
66
|
-
type={type}
|
|
67
|
-
onClick={onClick}
|
|
68
|
-
onMouseDown={onMouseDown}
|
|
69
|
-
ref={el}>
|
|
70
|
-
{children}
|
|
71
|
-
<span className={classNames(`ripple`, rippleClassName())} ref={ripple}/>
|
|
72
|
-
</button>
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
79
|
-
Button.propTypes = {
|
|
80
|
-
flat: PropTypes.bool,
|
|
81
|
-
raised: PropTypes.bool,
|
|
82
|
-
round: PropTypes.bool,
|
|
83
|
-
disabled: PropTypes.bool,
|
|
84
|
-
withRipple: PropTypes.bool,
|
|
85
|
-
type: PropTypes.oneOf(['button', 'submit', 'reset']),
|
|
86
|
-
[ReactConstants[5]]: PropTypes.string,
|
|
87
|
-
[ReactConstants[6]]: PropTypes.func,
|
|
88
|
-
onFocus: PropTypes.func,
|
|
89
|
-
style: PropTypes.object,
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
Button.defaultProps = {
|
|
94
|
-
type: 'button',
|
|
95
|
-
withRipple: true,
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
export default Button;
|