@e1011/es-kit 1.0.116 → 1.0.120
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/dist/hooks/esm/index.css +43 -43
- package/dist/hooks/index.css +43 -43
- package/dist/lib/cjs/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/lib/cjs/src/core/ui/components/field/Field.js.map +1 -1
- package/dist/lib/cjs/src/core/utils/appState/store/store.vanillajs.templates.js +1 -1
- package/dist/lib/cjs/src/core/utils/appState/store/store.vanillajs.templates.js.map +1 -1
- package/dist/lib/esm/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/lib/esm/src/core/ui/components/field/Field.js.map +1 -1
- package/dist/lib/esm/src/core/utils/appState/store/store.vanillajs.templates.js +1 -1
- package/dist/lib/esm/src/core/utils/appState/store/store.vanillajs.templates.js.map +1 -1
- package/dist/lib/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/lib/src/core/ui/components/field/Field.js +1 -1
- package/dist/lib/src/core/ui/components/field/Field.js.map +1 -1
- package/dist/lib/src/core/utils/appState/store/simpleComponent/SimpleComponent.js.map +1 -1
- package/dist/lib/src/core/utils/appState/store/store.vanillajs.templates.js +4 -3
- package/dist/lib/src/core/utils/appState/store/store.vanillajs.templates.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/types/src/core/ui/components/container/ResizableContainer.d.ts.map +1 -1
- package/dist/types/src/core/ui/components/field/Field.d.ts.map +1 -1
- package/dist/types/src/core/utils/appState/store/simpleComponent/SimpleComponent.d.ts.map +1 -1
- package/dist/types/src/core/utils/appState/store/store.vanillajs.templates.d.ts +6 -2
- package/dist/types/src/core/utils/appState/store/store.vanillajs.templates.d.ts.map +1 -1
- package/dist/ui/esm/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/ui/esm/src/core/ui/components/field/Field.js.map +1 -1
- package/dist/ui/src/core/ui/components/container/ResizableContainer.js.map +1 -1
- package/dist/ui/src/core/ui/components/field/Field.js.map +1 -1
- package/dist/utils/esm/index.css +43 -43
- package/dist/utils/esm/src/core/utils/appState/store/store.vanillajs.templates.js +1 -1
- package/dist/utils/esm/src/core/utils/appState/store/store.vanillajs.templates.js.map +1 -1
- package/dist/utils/index.css +43 -43
- package/dist/utils/src/core/utils/appState/store/store.vanillajs.templates.js +1 -1
- package/dist/utils/src/core/utils/appState/store/store.vanillajs.templates.js.map +1 -1
- package/package.json +1 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizableContainer.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+D,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAItG,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,MAAM,MAAM,uBAAuB,GAAG,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC,GAAG;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAmBD,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"ResizableContainer.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+D,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAItG,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,MAAM,MAAM,uBAAuB,GAAG,cAAc,GAAG,iBAAiB,CAAC,GAAG,CAAC,GAAG;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAmBD,eAAO,MAAM,kBAAkB,0CA4E9B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAE,SAAS,EAA8B,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGpF,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAI5D,eAAO,MAAM,YAAY,UAAW,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,KAAG,IAE7D,CAAA;AAID,eAAO,MAAM,gBAAgB,cAAe,iBAAiB,KAAG,IAE/D,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,gBAAgB,CAyE7C,CAAA;AAED,KAAK,SAAS,GAAG;IAAE,MAAM,EAAE,GAAG,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAA;AAC7D,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAA;IAClC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IACvD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,CAAA;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,OAAO,CAAA;IAEzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;IAC3D,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB;AAED,UAAU,WAAY,SAAQ,UAAU;IACtC,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAKD,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAkBlC,CAAA;AAQD,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/field/Field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleComponent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/utils/appState/store/simpleComponent/SimpleComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAA;AAIhE,OAAO,EAAE,gBAAgB,EAAe,MAAM,oBAAoB,CAAA;AAKlE,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,EAAE,CAAA;CACf,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAA;AAEnD,eAAO,MAAM,WAAW,EAAE,gBAAgB,CAAC,WAAW,CAcnB,CAAA;AAInC,eAAO,MAAM,cAAc,QAAO,MAAqB,CAAA;AACvD,eAAO,MAAM,cAAc,UAAW,MAAM,SAE3C,CAAA;AAyBD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,
|
|
1
|
+
{"version":3,"file":"SimpleComponent.d.ts","sourceRoot":"","sources":["../../../../../../../../src/core/utils/appState/store/simpleComponent/SimpleComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAA;AAIhE,OAAO,EAAE,gBAAgB,EAAe,MAAM,oBAAoB,CAAA;AAKlE,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,EAAE,CAAA;CACf,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAA;AAEnD,eAAO,MAAM,WAAW,EAAE,gBAAgB,CAAC,WAAW,CAcnB,CAAA;AAInC,eAAO,MAAM,cAAc,QAAO,MAAqB,CAAA;AACvD,eAAO,MAAM,cAAc,UAAW,MAAM,SAE3C,CAAA;AAyBD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,CA4BlD,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Store } from './store.vanillajs';
|
|
1
|
+
import { ActionHandler, Store, StoreWithActions } from './store.vanillajs';
|
|
2
2
|
export type DataState<T> = {
|
|
3
3
|
dataId: string;
|
|
4
4
|
isLoading: boolean;
|
|
@@ -6,7 +6,11 @@ export type DataState<T> = {
|
|
|
6
6
|
data?: T;
|
|
7
7
|
};
|
|
8
8
|
type LoadHandler<T> = (dataPromise: unknown | Promise<unknown>) => Promise<Partial<DataState<T>>>;
|
|
9
|
-
export declare const createDataStore: <T>(dataId: string) => Store<DataState<T>> & {
|
|
9
|
+
export declare const createDataStore: <T>(dataId: string, actions?: Record<string, ActionHandler<T>> | undefined) => Store<DataState<T>> & {
|
|
10
|
+
actions: {
|
|
11
|
+
[actionName: string]: import("./store.vanillajs").ActionHandlerCaller;
|
|
12
|
+
};
|
|
13
|
+
} & {
|
|
10
14
|
actions: {
|
|
11
15
|
load: LoadHandler<T>;
|
|
12
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.vanillajs.templates.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/utils/appState/store/store.vanillajs.templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"store.vanillajs.templates.d.ts","sourceRoot":"","sources":["../../../../../../../src/core/utils/appState/store/store.vanillajs.templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAe,MAAM,mBAAmB,CAAA;AAGvF,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,CAAC,CAAA;CACT,CAAA;AAYD,KAAK,WAAW,CAAC,CAAC,IAAI,CACpB,WAAW,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,KACpC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAEnC,eAAO,MAAM,eAAe,cACd,MAAM;;;;;;;;CA+BnB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useLayoutEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { LayoutBox } from './LayoutBox'\nimport { LayoutBoxProps } from './layoutBox.types'\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n}\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (<LayoutBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n
|
|
1
|
+
{"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useLayoutEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { LayoutBox } from './LayoutBox'\nimport { LayoutBoxProps } from './layoutBox.types'\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n}\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (\n <LayoutBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n />\n )}\n {children && children?.({\n height: `${containerSize?.height || 200}px`,\n width: `${containerSize?.width || 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </LayoutBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","_ref$debounceDelay","debounceDelay","props","_objectWithoutProperties","_excluded","containerRef","useRef","lastResizeWidthRef","width","height","_useState","useState","undefined","_useState2","_slicedToArray","containerSize","setContainerSize","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","_resizeObserver","_resizeObserver$unobs","unobserve","call","React","createElement","LayoutBox","_extends","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"uWAkBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,IACRC,KAAM,EACNC,cAAe,QAGjBC,MAAO,CACLD,cAAe,SAMNE,EAAqBC,GAChC,SAAAC,GAA0E,IAAvEC,EAAQD,EAARC,SAAQC,EAAAF,EAAEG,cAAAA,OAAgB,IAAHD,EAAG,IAAGA,EAAKE,EAAKC,EAAAL,EAAAM,GAClCC,EAAeC,IAEfC,EAAqBD,EAA0C,CAAEE,MAAO,EAAGC,OAAQ,IAEzFC,EACEC,EAAsB,CAAEH,WAAOI,EAAWH,YAAQG,IAAYC,EAAAC,EAAAJ,EAAA,GADzDK,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAyBC,GAAQ,WAAA,OAAMC,GAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYlB,MACxCmB,EAAkBP,EAAQ,GAAGM,YAAYjB,QAEjBY,QAA1BA,EAAAd,EAAmBqB,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bb,SAAUiB,IACb,QAA1BH,EAAAf,EAAmBqB,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bb,UAAWkB,IAG1CpB,EAAmBqB,QAAU,CAAEpB,MAAOiB,EAAgBhB,OAAQkB,GAE9DX,EAAiB,CACfR,MAAOH,SAAqBkB,QAATA,EAAZlB,EAAcuB,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BpB,OAAQJ,SAAqB,QAATmB,EAAZnB,EAAcuB,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE7B,KAAgB,CAACA,IAuBpB,OArBA8B,GAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvB9B,SAAAA,EAAcuB,UAChBK,EAAmB5B,aAAAA,EAAAA,EAAcuB,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBjB,EAAiB,CACfR,MAAOH,SAAqB6B,QAATA,EAAZ7B,EAAcuB,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BpB,OAAQJ,SAAqB,QAAT8B,EAAZ9B,EAAcuB,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,OAAO,WAAM,IAAAQ,EAAAC,EACG,QAAdD,EAAAN,SAAcO,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BL,GAEhC,GAAG,CAAChB,EAAwBZ,IAK1BqC,MAAAC,cAACC,EAASC,EAAA,CACRrC,MAAM,OACNC,OAAO,OACPqC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACN9C,GAEJwC,MAAAC,cAACC,EAAS,CACRK,MAAO5D,EAAOC,KACdkB,MAAM,OACNC,OAAO,OACPyC,IAAK7C,KAELN,GACF2C,MAAAC,cAACC,EAAS,CACRpC,MAAK,GAAA2C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeP,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAA0C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeN,SAAU,IAAK,MAAQ,IAAQ,MAClEwC,MAAO5D,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBU,OAAM0C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeN,SAAU,IAAO,MAC3CD,MAAK2C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeP,QAAS,IAAO,MACzC8C,WAAYvC,UAAAA,EAAeN,WAInC,IAGFb,EAAmB2D,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../../../../../../src/core/ui/components/field/Field.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { FC, ReactNode, memo, useMemo, useCallback, PropsWithChildren } from 'react'\nimport styled from 'styled-components'\n\nimport type { FieldError, IconComponentType } from './types'\n\nlet iconColor: string | (() => string) = () => '#000000'\n\nexport const setIconColor = (color: string | (() => string)): void => {\n iconColor = color\n}\n\nlet IconComponent: IconComponentType = memo(function IconComponent() { return <span /> })\n\nexport const setIconComponent = (component: IconComponentType): void => {\n IconComponent = component\n}\n\nexport type FileWrapperProps = PropsWithChildren<unknown> & {\n className?: string\n error?: boolean\n disabled?: boolean\n userDisabled?: boolean\n css?: string\n}\n\nexport const FieldWrapper: FC<FileWrapperProps> = styled.div<FileWrapperProps>`\n opacity: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 0.5 : 1)};\n pointer-events: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 'none' : 'auto')};\n flex: 1 1 auto;\n width: 100%;\n @media (min-width: 400px) {\n flex: 1;\n }\n .label {\n font-size: 0.8rem !important;\n font-weight: normal;\n }\n\n .help {\n text-align: left;\n }\n\n .mainControl {\n flex: 1;\n border-radius: 6px;\n box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n will-change: box-shadow;\n transition: box-shadow 250ms ease-in-out;\n &:hover {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n }\n button {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n .select {\n width: 100%;\n flex: 1;\n &::after {\n border-color: #000000 !important;\n }\n }\n\n .icon {\n &.is-action {\n cursor: pointer;\n pointer-events: initial !important;\n }\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n input[type=number] {\n -moz-appearance: textfield;\n }\n\n .input[type=date]::-webkit-calendar-picker-indicator {\n opacity:0;\n -webkit-appearance: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 40px;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n textarea {\n resize: none;\n }\n`\n\ntype EventType = { target: any; type?: any } & Partial<Event>\nexport interface FieldProps {\n label?: string\n name?: string\n type?: string\n min?: number | string | Date | any\n max?: number | string | Date | any\n value?: string | number | readonly string[] | undefined\n defaultValue?: string | number | readonly string[] | undefined\n placeholder?: string\n inputRef?: ReactHookFormRef\n error?: boolean\n errors?: FieldError\n disabled?: boolean\n userDisabled?: boolean\n helpTextInfo?: string\n helpText?: string\n iconLeft?: string\n iconRight?: string\n withoutComponent?: boolean\n addon?: ReactNode\n children?: ReactNode\n className?: string\n onChange?: (event?: EventType) => unknown\n // TODO, rename... something like changeHandler or valueDecorator\n onChangeInner?: (value: string | number) => string | number\n onBlur?: (event?: EventType) => void\n onFocus?: (event?: EventType | undefined) => void\n rightIconClick?: (event?: EventType) => void\n leftIconClick?: (event?: EventType) => void\n options?: any[] | null\n creatable?: boolean\n async?: boolean\n css?: string\n [key: string]: any\n}\n\ninterface SelectProps extends FieldProps {\n id?: string\n}\n\ntype OptionObj = { label: string | number | undefined; value: string | number | undefined }\ntype Option = OptionObj | string | number\n\nexport const Select: FC<SelectProps>\n= memo<SelectProps>(\n function Select({ options, value, inputRef, ...props }: SelectProps) {\n return (\n <div className='select'>\n <select {...props} ref={inputRef} defaultValue={value}>\n {options?.map((option: Option) => (\n <option\n key={`${JSON.stringify(option)}`}\n value={typeof option === 'object' ? (option as OptionObj)?.value : option}\n >\n {typeof option === 'object' ? (option as OptionObj)?.label : option}\n </option>\n ))}\n </select>\n </div>\n )\n },\n)\n\nconst InputComponent = styled.input``\nconst TextAreaComponent = styled.textarea``\nconst StyledFieldLabel = styled.label`\n text-align: left;\n`\n\nexport const Field: FC<FieldProps> = memo<FieldProps>(({\n label,\n name,\n type = 'text',\n value,\n defaultValue,\n placeholder,\n inputRef,\n error,\n disabled,\n userDisabled,\n withoutComponent,\n helpTextInfo,\n helpText,\n children,\n iconLeft,\n iconRight,\n addon,\n className,\n onChange,\n onChangeInner,\n onBlur,\n onFocus,\n rightIconClick,\n leftIconClick,\n options,\n css,\n ...props\n}: FieldProps) => {\n let Component: FC<any> = InputComponent\n\n if (!children && type === 'textarea') {\n Component = TextAreaComponent\n }\n const handleFocus = useCallback((event: Event | EventType | undefined) => {\n if (userDisabled) {\n event?.preventDefault?.()\n } else {\n onFocus && onFocus(event)\n }\n }, [userDisabled, onFocus])\n\n const handleChange = useCallback((event: { target: { value: string } }) => {\n if (userDisabled) {\n return\n }\n if (onChangeInner && event?.target) {\n // eslint-disable-next-line no-param-reassign\n event.target.value = onChangeInner((event.target.value as string)) as string\n onChange && onChange(event as EventType)\n } else {\n onChange && onChange(event as EventType)\n }\n }, [onChangeInner, onChange, userDisabled])\n\n const valueProps = useMemo(() => {\n if (value === undefined) {\n return { defaultValue }\n }\n return { value }\n }, [value, defaultValue])\n\n return (\n <FieldWrapper\n className={`field ${className}`}\n error={error}\n disabled={disabled}\n userDisabled={userDisabled}\n css={css}\n >\n <StyledFieldLabel htmlFor={name} className='label'>{label}</StyledFieldLabel>\n <div className={`field ${addon ? 'has-addons' : ''}`}>\n <div\n className={`control mainControl ${iconLeft && !withoutComponent\n ? 'has-icons-left' : ''} ${iconRight ? 'has-icons-right' : ''}`}\n >\n {!withoutComponent && ((!children && (type === 'select' || options))\n ? (\n <Select\n name={name}\n id={name}\n inputRef={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type='select'\n placeholder={placeholder}\n value={value}\n options={options}\n // TODO also handle change but value versus event.target.value issue\n onChange={onChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />\n )\n : (\n !children && <Component\n name={name}\n id={name}\n ref={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type={type}\n placeholder={placeholder}\n {...valueProps}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />))}\n\n {iconLeft && !withoutComponent && (\n <span\n className={`iconLeft icon is-small is-left ${leftIconClick ? 'is-action' : ''}`}\n onClick={leftIconClick}\n >\n <IconComponent\n iconName={iconLeft}\n color={iconColor}\n />\n </span>\n )}\n {iconRight && (\n <span\n className={`iconRight icon is-small is-right ${rightIconClick ? 'is-action' : ''}`}\n onClick={rightIconClick}\n >\n <IconComponent\n iconName={iconRight}\n color={iconColor}\n />\n </span>\n )}\n {children && children}\n </div>\n {addon && addon}\n </div>\n {helpTextInfo && <p className='help'>{helpTextInfo}</p>}\n {helpText && <p className={`help ${error ? 'is-danger' : ''}`}>{helpText}</p>}\n </FieldWrapper>\n )\n})\n\nField.displayName = 'Field'\n"],"names":["iconColor","setIconColor","color","IconComponent","memo","React","createElement","setIconComponent","component","FieldWrapper","styled","div","withConfig","displayName","componentId","_ref","disabled","userDisabled","_ref2","_StyledFieldWrapper","p","$_css","Select","_ref3","options","value","inputRef","props","_objectWithoutProperties","_excluded","className","_extends","ref","defaultValue","map","option","key","concat","JSON","stringify","_typeof","label","InputComponent","input","TextAreaComponent","textarea","StyledFieldLabel","Field","_ref4","name","_ref4$type","type","placeholder","error","withoutComponent","helpTextInfo","helpText","children","iconLeft","iconRight","addon","onChange","onChangeInner","onBlur","onFocus","rightIconClick","leftIconClick","css","_excluded2","Component","handleFocus","useCallback","event","_event$preventDefault","preventDefault","call","handleChange","target","valueProps","useMemo","undefined","htmlFor","id","onKeyDown","autoComplete","onClick","iconName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../../../../../../src/core/ui/components/field/Field.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { FC, ReactNode, memo, useMemo, useCallback, PropsWithChildren } from 'react'\nimport styled from 'styled-components'\n\nimport type { FieldError, IconComponentType } from './types'\n\nlet iconColor: string | (() => string) = () => '#000000'\n\nexport const setIconColor = (color: string | (() => string)): void => {\n iconColor = color\n}\n\nlet IconComponent: IconComponentType = memo(function IconComponent() { return <span /> })\n\nexport const setIconComponent = (component: IconComponentType): void => {\n IconComponent = component\n}\n\nexport type FileWrapperProps = PropsWithChildren<unknown> & {\n className?: string\n error?: boolean\n disabled?: boolean\n userDisabled?: boolean\n css?: string\n}\n\nexport const FieldWrapper: FC<FileWrapperProps> = styled.div<FileWrapperProps>`\n opacity: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 0.5 : 1)};\n pointer-events: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 'none' : 'auto')};\n flex: 1 1 auto;\n width: 100%;\n @media (min-width: 400px) {\n flex: 1;\n }\n .label {\n font-size: 0.8rem !important;\n font-weight: normal;\n }\n\n .help {\n text-align: left;\n }\n\n .mainControl {\n flex: 1;\n border-radius: 6px;\n box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n will-change: box-shadow;\n transition: box-shadow 250ms ease-in-out;\n &:hover {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n }\n button {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n .select {\n width: 100%;\n flex: 1;\n &::after {\n border-color: #000000 !important;\n }\n }\n\n .icon {\n &.is-action {\n cursor: pointer;\n pointer-events: initial !important;\n }\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n input[type=number] {\n -moz-appearance: textfield;\n }\n\n .input[type=date]::-webkit-calendar-picker-indicator {\n opacity:0;\n -webkit-appearance: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 40px;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n textarea {\n resize: none;\n }\n`\n\ntype EventType = { target: any; type?: any } & Partial<Event>\nexport interface FieldProps {\n label?: string\n name?: string\n type?: string\n min?: number | string | Date | any\n max?: number | string | Date | any\n value?: string | number | readonly string[] | undefined\n defaultValue?: string | number | readonly string[] | undefined\n placeholder?: string\n inputRef?: ReactHookFormRef\n error?: boolean\n errors?: FieldError\n disabled?: boolean\n userDisabled?: boolean\n helpTextInfo?: string\n helpText?: string\n iconLeft?: string\n iconRight?: string\n withoutComponent?: boolean\n addon?: ReactNode\n children?: ReactNode\n className?: string\n onChange?: (event?: EventType) => unknown\n // TODO, rename... something like changeHandler or valueDecorator\n onChangeInner?: (value: string | number) => string | number\n onBlur?: (event?: EventType) => void\n onFocus?: (event?: EventType | undefined) => void\n rightIconClick?: (event?: EventType) => void\n leftIconClick?: (event?: EventType) => void\n options?: any[] | null\n creatable?: boolean\n async?: boolean\n css?: string\n [key: string]: any\n}\n\ninterface SelectProps extends FieldProps {\n id?: string\n}\n\ntype OptionObj = { label: string | number | undefined; value: string | number | undefined }\ntype Option = OptionObj | string | number\n\nexport const Select: FC<SelectProps>\n= memo<SelectProps>(\n function Select({ options, value, inputRef, ...props }: SelectProps) {\n return (\n <div className='select'>\n <select {...props} ref={inputRef} defaultValue={value}>\n {options?.map((option: Option) => (\n <option\n key={`${JSON.stringify(option)}`}\n value={typeof option === 'object' ? (option as OptionObj)?.value : option}\n >\n {typeof option === 'object' ? (option as OptionObj)?.label : option}\n </option>\n ))}\n </select>\n </div>\n )\n },\n)\n\nconst InputComponent = styled.input``\nconst TextAreaComponent = styled.textarea``\nconst StyledFieldLabel = styled.label`\n text-align: left;\n`\n\nexport const Field: FC<FieldProps> = memo<FieldProps>(({\n label,\n name,\n type = 'text',\n value,\n defaultValue,\n placeholder,\n inputRef,\n error,\n disabled,\n userDisabled,\n withoutComponent,\n helpTextInfo,\n helpText,\n children,\n iconLeft,\n iconRight,\n addon,\n className,\n onChange,\n onChangeInner,\n onBlur,\n onFocus,\n rightIconClick,\n leftIconClick,\n options,\n css,\n ...props\n}: FieldProps) => {\n let Component: FC<any> = InputComponent\n\n if (!children && type === 'textarea') {\n Component = TextAreaComponent\n }\n const handleFocus = useCallback((event: Event | EventType | undefined) => {\n if (userDisabled) {\n event?.preventDefault?.()\n } else {\n onFocus && onFocus(event)\n }\n }, [userDisabled, onFocus])\n\n const handleChange = useCallback((event: { target: { value: string } }) => {\n if (userDisabled) {\n return\n }\n if (onChangeInner && event?.target) {\n // eslint-disable-next-line no-param-reassign\n event.target.value = onChangeInner((event.target.value as string)) as string\n onChange && onChange(event as EventType)\n } else {\n onChange && onChange(event as EventType)\n }\n }, [onChangeInner, onChange, userDisabled])\n\n const valueProps = useMemo(() => {\n if (value === undefined) {\n return { defaultValue }\n }\n return { value }\n }, [value, defaultValue])\n\n return (\n <FieldWrapper\n className={`field ${className}`}\n error={error}\n disabled={disabled}\n userDisabled={userDisabled}\n css={css}\n >\n <StyledFieldLabel htmlFor={name} className='label'>{label}</StyledFieldLabel>\n <div className={`field ${addon ? 'has-addons' : ''}`}>\n <div\n className={`control mainControl ${iconLeft && !withoutComponent\n ? 'has-icons-left' : ''} ${iconRight ? 'has-icons-right' : ''}`}\n >\n {!withoutComponent && ((!children && (type === 'select' || options))\n ? (\n <Select\n name={name}\n id={name}\n inputRef={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type='select'\n placeholder={placeholder}\n value={value}\n options={options}\n // TODO also handle change but value versus event.target.value issue\n onChange={onChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />\n )\n : (\n !children && (\n <Component\n name={name}\n id={name}\n ref={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type={type}\n placeholder={placeholder}\n {...valueProps}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />\n )))}\n\n {iconLeft && !withoutComponent && (\n <span\n className={`iconLeft icon is-small is-left ${leftIconClick ? 'is-action' : ''}`}\n onClick={leftIconClick}\n >\n <IconComponent\n iconName={iconLeft}\n color={iconColor}\n />\n </span>\n )}\n {iconRight && (\n <span\n className={`iconRight icon is-small is-right ${rightIconClick ? 'is-action' : ''}`}\n onClick={rightIconClick}\n >\n <IconComponent\n iconName={iconRight}\n color={iconColor}\n />\n </span>\n )}\n {children && children}\n </div>\n {addon && addon}\n </div>\n {helpTextInfo && <p className='help'>{helpTextInfo}</p>}\n {helpText && <p className={`help ${error ? 'is-danger' : ''}`}>{helpText}</p>}\n </FieldWrapper>\n )\n})\n\nField.displayName = 'Field'\n"],"names":["iconColor","setIconColor","color","IconComponent","memo","React","createElement","setIconComponent","component","FieldWrapper","styled","div","withConfig","displayName","componentId","_ref","disabled","userDisabled","_ref2","_StyledFieldWrapper","p","$_css","Select","_ref3","options","value","inputRef","props","_objectWithoutProperties","_excluded","className","_extends","ref","defaultValue","map","option","key","concat","JSON","stringify","_typeof","label","InputComponent","input","TextAreaComponent","textarea","StyledFieldLabel","Field","_ref4","name","_ref4$type","type","placeholder","error","withoutComponent","helpTextInfo","helpText","children","iconLeft","iconRight","addon","onChange","onChangeInner","onBlur","onFocus","rightIconClick","leftIconClick","css","_excluded2","Component","handleFocus","useCallback","event","_event$preventDefault","preventDefault","call","handleChange","target","valueProps","useMemo","undefined","htmlFor","id","onKeyDown","autoComplete","onClick","iconName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useLayoutEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { LayoutBox } from './LayoutBox'\nimport { LayoutBoxProps } from './layoutBox.types'\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n}\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (<LayoutBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n
|
|
1
|
+
{"version":3,"file":"ResizableContainer.js","sources":["../../../../../../../src/core/ui/components/container/ResizableContainer.tsx"],"sourcesContent":["import { memo, useState, useRef, useMemo, useLayoutEffect, RefObject, PropsWithChildren } from 'react'\nimport debounce from 'lodash-es/debounce'\n\nimport { LayoutBox } from './LayoutBox'\nimport { LayoutBoxProps } from './layoutBox.types'\n\nexport type ResizableContainerProps = LayoutBoxProps & PropsWithChildren<any> & {\n debounceDelay?: number\n}\n\nexport type ResizableContainerRenderProps = {\n width: number | string\n height: number | string\n measured: boolean\n}\n\ntype WrapperSize = {width: undefined | number; height: undefined | number}\n\nconst styles = {\n main: {\n position: 'absolute',\n zIndex: 111,\n left: 0,\n pointerEvents: 'none',\n // backgroundColor: '#FF000040',\n },\n empty: {\n pointerEvents: 'none',\n // background: '#FF000040',\n // border: '1px solid #0000FF40',\n },\n}\n\nexport const ResizableContainer = memo<ResizableContainerProps>(\n ({ children, debounceDelay = 250, ...props }: ResizableContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n\n const lastResizeWidthRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })\n\n const [containerSize, setContainerSize]\n = useState<WrapperSize>({ width: undefined, height: undefined })\n\n const debouncedResizeWrapper = useMemo(() => debounce((entries) => {\n const newResizeWidth = entries[0].contentRect.width\n const newResizeHeight = entries[0].contentRect.height\n\n if (lastResizeWidthRef.current?.width === newResizeWidth\n && lastResizeWidthRef.current?.height === newResizeHeight) {\n return\n }\n lastResizeWidthRef.current = { width: newResizeWidth, height: newResizeHeight }\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }, debounceDelay), [debounceDelay])\n\n useLayoutEffect(() => {\n let resizeObserver: ResizeObserver\n let containerElement: HTMLElement\n\n if (containerRef?.current) {\n containerElement = containerRef?.current\n resizeObserver = new ResizeObserver(debouncedResizeWrapper)\n resizeObserver.observe(containerElement as Element)\n\n setContainerSize({\n width: containerRef?.current?.clientWidth,\n height: containerRef?.current?.clientHeight,\n })\n }\n return () => {\n resizeObserver?.unobserve?.(containerElement as Element)\n }\n }, [debouncedResizeWrapper, containerRef])\n\n // END RESIZING\n\n return (\n <LayoutBox\n width='100%'\n height='100%'\n justify='center'\n align='center'\n direction='column'\n {...props}\n >\n <LayoutBox\n style={styles.main}\n width='100%'\n height='100%'\n ref={containerRef as RefObject<HTMLDivElement>}\n />\n {!children && (\n <LayoutBox\n width={`${Math.max(containerSize?.width || 200, 200) || 200}px`}\n height={`${Math.max(containerSize?.height || 200, 200) || 200}px`}\n style={styles.empty}\n />\n )}\n {children && children?.({\n height: `${containerSize?.height || 200}px`,\n width: `${containerSize?.width || 200}px`,\n measured: !!containerSize?.height,\n } as ResizableContainerRenderProps)}\n </LayoutBox>\n )\n },\n)\n\nResizableContainer.displayName = 'ResizableContainer'\n\n"],"names":["styles","main","position","zIndex","left","pointerEvents","empty","ResizableContainer","memo","_ref","children","_ref$debounceDelay","debounceDelay","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","lastResizeWidthRef","width","height","_useState","useState","undefined","_useState2","_slicedToArray","containerSize","setContainerSize","debouncedResizeWrapper","useMemo","debounce","entries","_lastResizeWidthRef$c","_lastResizeWidthRef$c2","_containerRef$current","_containerRef$current2","newResizeWidth","contentRect","newResizeHeight","current","clientWidth","clientHeight","useLayoutEffect","resizeObserver","containerElement","_containerRef$current3","_containerRef$current4","ResizeObserver","observe","_resizeObserver","_resizeObserver$unobs","unobserve","call","React","createElement","LayoutBox","_extends","justify","align","direction","style","ref","concat","Math","max","measured","displayName"],"mappings":"uRAkBMA,EAAS,CACbC,KAAM,CACJC,SAAU,WACVC,OAAQ,IACRC,KAAM,EACNC,cAAe,QAGjBC,MAAO,CACLD,cAAe,SAMNE,EAAqBC,EAAAA,MAChC,SAAAC,GAA0E,IAAvEC,EAAQD,EAARC,SAAQC,EAAAF,EAAEG,cAAAA,OAAgB,IAAHD,EAAG,IAAGA,EAAKE,EAAKC,EAAAC,wBAAAN,EAAAO,GAClCC,EAAeC,EAAAA,SAEfC,EAAqBD,EAAAA,OAA0C,CAAEE,MAAO,EAAGC,OAAQ,IAEzFC,EACEC,EAAAA,SAAsB,CAAEH,WAAOI,EAAWH,YAAQG,IAAYC,EAAAC,EAAAA,cAAAJ,EAAA,GADzDK,EAAaF,EAAA,GAAEG,EAAgBH,EAAA,GAGhCI,EAAyBC,EAAAA,SAAQ,WAAA,OAAMC,EAAAA,SAAS,SAACC,GAAY,IAAAC,EAAAC,EAAAC,EAAAC,EAC3DC,EAAiBL,EAAQ,GAAGM,YAAYlB,MACxCmB,EAAkBP,EAAQ,GAAGM,YAAYjB,QAEjBY,QAA1BA,EAAAd,EAAmBqB,eAAnBP,IAA0BA,OAA1BA,EAAAA,EAA4Bb,SAAUiB,IACb,QAA1BH,EAAAf,EAAmBqB,eAAO,IAAAN,OAAA,EAA1BA,EAA4Bb,UAAWkB,IAG1CpB,EAAmBqB,QAAU,CAAEpB,MAAOiB,EAAgBhB,OAAQkB,GAE9DX,EAAiB,CACfR,MAAOH,SAAqBkB,QAATA,EAAZlB,EAAcuB,eAAdL,IAAqBA,SAArBA,EAAuBM,YAC9BpB,OAAQJ,SAAqB,QAATmB,EAAZnB,EAAcuB,eAAO,IAAAJ,SAArBA,EAAuBM,eAElC,GAAE9B,KAAgB,CAACA,IAuBpB,OArBA+B,EAAAA,iBAAgB,WACd,IAAIC,EACAC,EAEuBC,EAAAC,EAAvB9B,SAAAA,EAAcuB,UAChBK,EAAmB5B,aAAAA,EAAAA,EAAcuB,SACjCI,EAAiB,IAAII,eAAenB,IACrBoB,QAAQJ,GAEvBjB,EAAiB,CACfR,MAAOH,SAAqB6B,QAATA,EAAZ7B,EAAcuB,eAAdM,IAAqBA,SAArBA,EAAuBL,YAC9BpB,OAAQJ,SAAqB,QAAT8B,EAAZ9B,EAAcuB,eAAO,IAAAO,SAArBA,EAAuBL,gBAGnC,OAAO,WAAM,IAAAQ,EAAAC,EACG,QAAdD,EAAAN,SAAcO,IAAAD,GAAWC,QAAXA,EAAdD,EAAgBE,qBAASD,GAAzBA,EAAAE,KAAAH,EAA4BL,GAEhC,GAAG,CAAChB,EAAwBZ,IAK1BqC,MAAAC,cAACC,EAASA,UAAAC,UAAA,CACRrC,MAAM,OACNC,OAAO,OACPqC,QAAQ,SACRC,MAAM,SACNC,UAAU,UACN/C,GAEJyC,MAAAC,cAACC,EAAAA,UAAS,CACRK,MAAO7D,EAAOC,KACdmB,MAAM,OACNC,OAAO,OACPyC,IAAK7C,KAELP,GACF4C,MAAAC,cAACC,EAAAA,UAAS,CACRpC,MAAK,GAAA2C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeP,QAAS,IAAK,MAAQ,IAAQ,MAChEC,OAAM,GAAA0C,OAAKC,KAAKC,KAAItC,eAAAA,EAAeN,SAAU,IAAK,MAAQ,IAAQ,MAClEwC,MAAO7D,EAAOM,QAGfI,IAAYA,aAAAA,EAAAA,EAAW,CACtBW,OAAM0C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeN,SAAU,IAAO,MAC3CD,MAAK2C,GAAAA,QAAKpC,aAAa,EAAbA,EAAeP,QAAS,IAAO,MACzC8C,WAAYvC,UAAAA,EAAeN,WAInC,IAGFd,EAAmB4D,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../../../../../src/core/ui/components/field/Field.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { FC, ReactNode, memo, useMemo, useCallback, PropsWithChildren } from 'react'\nimport styled from 'styled-components'\n\nimport type { FieldError, IconComponentType } from './types'\n\nlet iconColor: string | (() => string) = () => '#000000'\n\nexport const setIconColor = (color: string | (() => string)): void => {\n iconColor = color\n}\n\nlet IconComponent: IconComponentType = memo(function IconComponent() { return <span /> })\n\nexport const setIconComponent = (component: IconComponentType): void => {\n IconComponent = component\n}\n\nexport type FileWrapperProps = PropsWithChildren<unknown> & {\n className?: string\n error?: boolean\n disabled?: boolean\n userDisabled?: boolean\n css?: string\n}\n\nexport const FieldWrapper: FC<FileWrapperProps> = styled.div<FileWrapperProps>`\n opacity: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 0.5 : 1)};\n pointer-events: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 'none' : 'auto')};\n flex: 1 1 auto;\n width: 100%;\n @media (min-width: 400px) {\n flex: 1;\n }\n .label {\n font-size: 0.8rem !important;\n font-weight: normal;\n }\n\n .help {\n text-align: left;\n }\n\n .mainControl {\n flex: 1;\n border-radius: 6px;\n box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n will-change: box-shadow;\n transition: box-shadow 250ms ease-in-out;\n &:hover {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n }\n button {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n .select {\n width: 100%;\n flex: 1;\n &::after {\n border-color: #000000 !important;\n }\n }\n\n .icon {\n &.is-action {\n cursor: pointer;\n pointer-events: initial !important;\n }\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n input[type=number] {\n -moz-appearance: textfield;\n }\n\n .input[type=date]::-webkit-calendar-picker-indicator {\n opacity:0;\n -webkit-appearance: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 40px;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n textarea {\n resize: none;\n }\n`\n\ntype EventType = { target: any; type?: any } & Partial<Event>\nexport interface FieldProps {\n label?: string\n name?: string\n type?: string\n min?: number | string | Date | any\n max?: number | string | Date | any\n value?: string | number | readonly string[] | undefined\n defaultValue?: string | number | readonly string[] | undefined\n placeholder?: string\n inputRef?: ReactHookFormRef\n error?: boolean\n errors?: FieldError\n disabled?: boolean\n userDisabled?: boolean\n helpTextInfo?: string\n helpText?: string\n iconLeft?: string\n iconRight?: string\n withoutComponent?: boolean\n addon?: ReactNode\n children?: ReactNode\n className?: string\n onChange?: (event?: EventType) => unknown\n // TODO, rename... something like changeHandler or valueDecorator\n onChangeInner?: (value: string | number) => string | number\n onBlur?: (event?: EventType) => void\n onFocus?: (event?: EventType | undefined) => void\n rightIconClick?: (event?: EventType) => void\n leftIconClick?: (event?: EventType) => void\n options?: any[] | null\n creatable?: boolean\n async?: boolean\n css?: string\n [key: string]: any\n}\n\ninterface SelectProps extends FieldProps {\n id?: string\n}\n\ntype OptionObj = { label: string | number | undefined; value: string | number | undefined }\ntype Option = OptionObj | string | number\n\nexport const Select: FC<SelectProps>\n= memo<SelectProps>(\n function Select({ options, value, inputRef, ...props }: SelectProps) {\n return (\n <div className='select'>\n <select {...props} ref={inputRef} defaultValue={value}>\n {options?.map((option: Option) => (\n <option\n key={`${JSON.stringify(option)}`}\n value={typeof option === 'object' ? (option as OptionObj)?.value : option}\n >\n {typeof option === 'object' ? (option as OptionObj)?.label : option}\n </option>\n ))}\n </select>\n </div>\n )\n },\n)\n\nconst InputComponent = styled.input``\nconst TextAreaComponent = styled.textarea``\nconst StyledFieldLabel = styled.label`\n text-align: left;\n`\n\nexport const Field: FC<FieldProps> = memo<FieldProps>(({\n label,\n name,\n type = 'text',\n value,\n defaultValue,\n placeholder,\n inputRef,\n error,\n disabled,\n userDisabled,\n withoutComponent,\n helpTextInfo,\n helpText,\n children,\n iconLeft,\n iconRight,\n addon,\n className,\n onChange,\n onChangeInner,\n onBlur,\n onFocus,\n rightIconClick,\n leftIconClick,\n options,\n css,\n ...props\n}: FieldProps) => {\n let Component: FC<any> = InputComponent\n\n if (!children && type === 'textarea') {\n Component = TextAreaComponent\n }\n const handleFocus = useCallback((event: Event | EventType | undefined) => {\n if (userDisabled) {\n event?.preventDefault?.()\n } else {\n onFocus && onFocus(event)\n }\n }, [userDisabled, onFocus])\n\n const handleChange = useCallback((event: { target: { value: string } }) => {\n if (userDisabled) {\n return\n }\n if (onChangeInner && event?.target) {\n // eslint-disable-next-line no-param-reassign\n event.target.value = onChangeInner((event.target.value as string)) as string\n onChange && onChange(event as EventType)\n } else {\n onChange && onChange(event as EventType)\n }\n }, [onChangeInner, onChange, userDisabled])\n\n const valueProps = useMemo(() => {\n if (value === undefined) {\n return { defaultValue }\n }\n return { value }\n }, [value, defaultValue])\n\n return (\n <FieldWrapper\n className={`field ${className}`}\n error={error}\n disabled={disabled}\n userDisabled={userDisabled}\n css={css}\n >\n <StyledFieldLabel htmlFor={name} className='label'>{label}</StyledFieldLabel>\n <div className={`field ${addon ? 'has-addons' : ''}`}>\n <div\n className={`control mainControl ${iconLeft && !withoutComponent\n ? 'has-icons-left' : ''} ${iconRight ? 'has-icons-right' : ''}`}\n >\n {!withoutComponent && ((!children && (type === 'select' || options))\n ? (\n <Select\n name={name}\n id={name}\n inputRef={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type='select'\n placeholder={placeholder}\n value={value}\n options={options}\n // TODO also handle change but value versus event.target.value issue\n onChange={onChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />\n )\n : (\n !children && <Component\n name={name}\n id={name}\n ref={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type={type}\n placeholder={placeholder}\n {...valueProps}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />))}\n\n {iconLeft && !withoutComponent && (\n <span\n className={`iconLeft icon is-small is-left ${leftIconClick ? 'is-action' : ''}`}\n onClick={leftIconClick}\n >\n <IconComponent\n iconName={iconLeft}\n color={iconColor}\n />\n </span>\n )}\n {iconRight && (\n <span\n className={`iconRight icon is-small is-right ${rightIconClick ? 'is-action' : ''}`}\n onClick={rightIconClick}\n >\n <IconComponent\n iconName={iconRight}\n color={iconColor}\n />\n </span>\n )}\n {children && children}\n </div>\n {addon && addon}\n </div>\n {helpTextInfo && <p className='help'>{helpTextInfo}</p>}\n {helpText && <p className={`help ${error ? 'is-danger' : ''}`}>{helpText}</p>}\n </FieldWrapper>\n )\n})\n\nField.displayName = 'Field'\n"],"names":["iconColor","IconComponent","memo","React","createElement","FieldWrapper","styled","div","withConfig","displayName","componentId","_ref","disabled","userDisabled","_ref2","_StyledFieldWrapper","p","$_css","Select","_ref3","options","value","inputRef","props","_objectWithoutProperties","objectWithoutProperties","_excluded","className","_extends","ref","defaultValue","map","option","key","concat","JSON","stringify","_typeof","label","InputComponent","input","TextAreaComponent","textarea","StyledFieldLabel","Field","_ref4","name","_ref4$type","type","placeholder","error","withoutComponent","helpTextInfo","helpText","children","iconLeft","iconRight","addon","onChange","onChangeInner","onBlur","onFocus","rightIconClick","leftIconClick","css","_excluded2","Component","handleFocus","useCallback","event","_event$preventDefault","preventDefault","call","handleChange","target","valueProps","useMemo","undefined","htmlFor","id","onKeyDown","autoComplete","onClick","iconName","color","component"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../../../../../src/core/ui/components/field/Field.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport { FC, ReactNode, memo, useMemo, useCallback, PropsWithChildren } from 'react'\nimport styled from 'styled-components'\n\nimport type { FieldError, IconComponentType } from './types'\n\nlet iconColor: string | (() => string) = () => '#000000'\n\nexport const setIconColor = (color: string | (() => string)): void => {\n iconColor = color\n}\n\nlet IconComponent: IconComponentType = memo(function IconComponent() { return <span /> })\n\nexport const setIconComponent = (component: IconComponentType): void => {\n IconComponent = component\n}\n\nexport type FileWrapperProps = PropsWithChildren<unknown> & {\n className?: string\n error?: boolean\n disabled?: boolean\n userDisabled?: boolean\n css?: string\n}\n\nexport const FieldWrapper: FC<FileWrapperProps> = styled.div<FileWrapperProps>`\n opacity: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 0.5 : 1)};\n pointer-events: ${({ disabled, userDisabled }) => (disabled || userDisabled ? 'none' : 'auto')};\n flex: 1 1 auto;\n width: 100%;\n @media (min-width: 400px) {\n flex: 1;\n }\n .label {\n font-size: 0.8rem !important;\n font-weight: normal;\n }\n\n .help {\n text-align: left;\n }\n\n .mainControl {\n flex: 1;\n border-radius: 6px;\n box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.06);\n will-change: box-shadow;\n transition: box-shadow 250ms ease-in-out;\n &:hover {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n }\n button {\n box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);\n }\n .select {\n width: 100%;\n flex: 1;\n &::after {\n border-color: #000000 !important;\n }\n }\n\n .icon {\n &.is-action {\n cursor: pointer;\n pointer-events: initial !important;\n }\n }\n\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n input[type=number] {\n -moz-appearance: textfield;\n }\n\n .input[type=date]::-webkit-calendar-picker-indicator {\n opacity:0;\n -webkit-appearance: none;\n position: absolute;\n left: 0;\n top: 0;\n width: 40px;\n height: 100%;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n textarea {\n resize: none;\n }\n`\n\ntype EventType = { target: any; type?: any } & Partial<Event>\nexport interface FieldProps {\n label?: string\n name?: string\n type?: string\n min?: number | string | Date | any\n max?: number | string | Date | any\n value?: string | number | readonly string[] | undefined\n defaultValue?: string | number | readonly string[] | undefined\n placeholder?: string\n inputRef?: ReactHookFormRef\n error?: boolean\n errors?: FieldError\n disabled?: boolean\n userDisabled?: boolean\n helpTextInfo?: string\n helpText?: string\n iconLeft?: string\n iconRight?: string\n withoutComponent?: boolean\n addon?: ReactNode\n children?: ReactNode\n className?: string\n onChange?: (event?: EventType) => unknown\n // TODO, rename... something like changeHandler or valueDecorator\n onChangeInner?: (value: string | number) => string | number\n onBlur?: (event?: EventType) => void\n onFocus?: (event?: EventType | undefined) => void\n rightIconClick?: (event?: EventType) => void\n leftIconClick?: (event?: EventType) => void\n options?: any[] | null\n creatable?: boolean\n async?: boolean\n css?: string\n [key: string]: any\n}\n\ninterface SelectProps extends FieldProps {\n id?: string\n}\n\ntype OptionObj = { label: string | number | undefined; value: string | number | undefined }\ntype Option = OptionObj | string | number\n\nexport const Select: FC<SelectProps>\n= memo<SelectProps>(\n function Select({ options, value, inputRef, ...props }: SelectProps) {\n return (\n <div className='select'>\n <select {...props} ref={inputRef} defaultValue={value}>\n {options?.map((option: Option) => (\n <option\n key={`${JSON.stringify(option)}`}\n value={typeof option === 'object' ? (option as OptionObj)?.value : option}\n >\n {typeof option === 'object' ? (option as OptionObj)?.label : option}\n </option>\n ))}\n </select>\n </div>\n )\n },\n)\n\nconst InputComponent = styled.input``\nconst TextAreaComponent = styled.textarea``\nconst StyledFieldLabel = styled.label`\n text-align: left;\n`\n\nexport const Field: FC<FieldProps> = memo<FieldProps>(({\n label,\n name,\n type = 'text',\n value,\n defaultValue,\n placeholder,\n inputRef,\n error,\n disabled,\n userDisabled,\n withoutComponent,\n helpTextInfo,\n helpText,\n children,\n iconLeft,\n iconRight,\n addon,\n className,\n onChange,\n onChangeInner,\n onBlur,\n onFocus,\n rightIconClick,\n leftIconClick,\n options,\n css,\n ...props\n}: FieldProps) => {\n let Component: FC<any> = InputComponent\n\n if (!children && type === 'textarea') {\n Component = TextAreaComponent\n }\n const handleFocus = useCallback((event: Event | EventType | undefined) => {\n if (userDisabled) {\n event?.preventDefault?.()\n } else {\n onFocus && onFocus(event)\n }\n }, [userDisabled, onFocus])\n\n const handleChange = useCallback((event: { target: { value: string } }) => {\n if (userDisabled) {\n return\n }\n if (onChangeInner && event?.target) {\n // eslint-disable-next-line no-param-reassign\n event.target.value = onChangeInner((event.target.value as string)) as string\n onChange && onChange(event as EventType)\n } else {\n onChange && onChange(event as EventType)\n }\n }, [onChangeInner, onChange, userDisabled])\n\n const valueProps = useMemo(() => {\n if (value === undefined) {\n return { defaultValue }\n }\n return { value }\n }, [value, defaultValue])\n\n return (\n <FieldWrapper\n className={`field ${className}`}\n error={error}\n disabled={disabled}\n userDisabled={userDisabled}\n css={css}\n >\n <StyledFieldLabel htmlFor={name} className='label'>{label}</StyledFieldLabel>\n <div className={`field ${addon ? 'has-addons' : ''}`}>\n <div\n className={`control mainControl ${iconLeft && !withoutComponent\n ? 'has-icons-left' : ''} ${iconRight ? 'has-icons-right' : ''}`}\n >\n {!withoutComponent && ((!children && (type === 'select' || options))\n ? (\n <Select\n name={name}\n id={name}\n inputRef={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type='select'\n placeholder={placeholder}\n value={value}\n options={options}\n // TODO also handle change but value versus event.target.value issue\n onChange={onChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />\n )\n : (\n !children && (\n <Component\n name={name}\n id={name}\n ref={inputRef}\n className={`input ${error ? 'is-danger' : ''}`}\n type={type}\n placeholder={placeholder}\n {...valueProps}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={handleFocus}\n onKeyDown={handleFocus}\n autoComplete='off'\n disabled={disabled}\n {...props}\n />\n )))}\n\n {iconLeft && !withoutComponent && (\n <span\n className={`iconLeft icon is-small is-left ${leftIconClick ? 'is-action' : ''}`}\n onClick={leftIconClick}\n >\n <IconComponent\n iconName={iconLeft}\n color={iconColor}\n />\n </span>\n )}\n {iconRight && (\n <span\n className={`iconRight icon is-small is-right ${rightIconClick ? 'is-action' : ''}`}\n onClick={rightIconClick}\n >\n <IconComponent\n iconName={iconRight}\n color={iconColor}\n />\n </span>\n )}\n {children && children}\n </div>\n {addon && addon}\n </div>\n {helpTextInfo && <p className='help'>{helpTextInfo}</p>}\n {helpText && <p className={`help ${error ? 'is-danger' : ''}`}>{helpText}</p>}\n </FieldWrapper>\n )\n})\n\nField.displayName = 'Field'\n"],"names":["iconColor","IconComponent","memo","React","createElement","FieldWrapper","styled","div","withConfig","displayName","componentId","_ref","disabled","userDisabled","_ref2","_StyledFieldWrapper","p","$_css","Select","_ref3","options","value","inputRef","props","_objectWithoutProperties","objectWithoutProperties","_excluded","className","_extends","ref","defaultValue","map","option","key","concat","JSON","stringify","_typeof","label","InputComponent","input","TextAreaComponent","textarea","StyledFieldLabel","Field","_ref4","name","_ref4$type","type","placeholder","error","withoutComponent","helpTextInfo","helpText","children","iconLeft","iconRight","addon","onChange","onChangeInner","onBlur","onFocus","rightIconClick","leftIconClick","css","_excluded2","Component","handleFocus","useCallback","event","_event$preventDefault","preventDefault","call","handleChange","target","valueProps","useMemo","undefined","htmlFor","id","onKeyDown","autoComplete","onClick","iconName","color","component"],"mappings":"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"}
|
package/dist/utils/esm/index.css
CHANGED
|
@@ -1,32 +1,21 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
1
|
+
.divider-module_divider-line__6CesR {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: block;
|
|
4
|
+
transition: opacity, width, height 250ms ease-in-out;
|
|
5
|
+
background-color: var(--color);
|
|
6
|
+
opacity: var(--opacity);
|
|
3
7
|
}
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
height: var(--height) !important;
|
|
10
|
-
line-height: 1px !important;
|
|
11
|
-
background-color: var(--icon-color);
|
|
12
|
-
color: var(--icon-content-color);
|
|
13
|
-
background-repeat: no-repeat;
|
|
14
|
-
mask-image: var(--icon-url);
|
|
15
|
-
-webkit-mask-image: var(--icon-url);
|
|
16
|
-
mask-repeat: no-repeat;
|
|
17
|
-
-webkit-mask-repeat: no-repeat;
|
|
18
|
-
mask-size: contain;
|
|
19
|
-
-webkit-mask-size: contain;
|
|
20
|
-
mask-position: center;
|
|
21
|
-
-webkit-mask-position: center;
|
|
22
|
-
display: inline-block;
|
|
23
|
-
will-change: transform;
|
|
24
|
-
transform: translate3d(0, 0, 0);
|
|
8
|
+
.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
|
|
9
|
+
height: var(--length);
|
|
10
|
+
left: var(--left);
|
|
11
|
+
width: var(--width);
|
|
12
|
+
margin: var(--margin);
|
|
25
13
|
}
|
|
26
|
-
.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
height: var(--
|
|
14
|
+
.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
|
|
15
|
+
width: var(--length);
|
|
16
|
+
left: var(--left);
|
|
17
|
+
height: var(--height);
|
|
18
|
+
margin: var(--margin);
|
|
30
19
|
}
|
|
31
20
|
.layoutBox-module_flexible-box__Q8zyl {
|
|
32
21
|
display: flex;
|
|
@@ -52,24 +41,35 @@
|
|
|
52
41
|
min-height: 0;
|
|
53
42
|
border-radius: initial;
|
|
54
43
|
}
|
|
55
|
-
.
|
|
56
|
-
|
|
57
|
-
display: block;
|
|
58
|
-
transition: opacity, width, height 250ms ease-in-out;
|
|
59
|
-
background-color: var(--color);
|
|
60
|
-
opacity: var(--opacity);
|
|
44
|
+
.icon-module_icon-base-parent__nOMvW {
|
|
45
|
+
line-height: 1px !important;
|
|
61
46
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
47
|
+
|
|
48
|
+
.icon-module_icon-base__S0tHf {
|
|
49
|
+
min-width: var(--min-width);
|
|
50
|
+
min-height: var(--min-height);
|
|
51
|
+
width: var(--width) !important;
|
|
52
|
+
height: var(--height) !important;
|
|
53
|
+
line-height: 1px !important;
|
|
54
|
+
background-color: var(--icon-color);
|
|
55
|
+
color: var(--icon-content-color);
|
|
56
|
+
background-repeat: no-repeat;
|
|
57
|
+
mask-image: var(--icon-url);
|
|
58
|
+
-webkit-mask-image: var(--icon-url);
|
|
59
|
+
mask-repeat: no-repeat;
|
|
60
|
+
-webkit-mask-repeat: no-repeat;
|
|
61
|
+
mask-size: contain;
|
|
62
|
+
-webkit-mask-size: contain;
|
|
63
|
+
mask-position: center;
|
|
64
|
+
-webkit-mask-position: center;
|
|
65
|
+
display: inline-block;
|
|
66
|
+
will-change: transform;
|
|
67
|
+
transform: translate3d(0, 0, 0);
|
|
67
68
|
}
|
|
68
|
-
.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
height: var(--
|
|
72
|
-
margin: var(--margin);
|
|
69
|
+
.icon-module_icon-base__S0tHf svg {
|
|
70
|
+
fill: var(--icon-content-color);
|
|
71
|
+
width: var(--height);
|
|
72
|
+
height: var(--width);
|
|
73
73
|
}
|
|
74
74
|
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
75
75
|
transform-origin: 0% 0%;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{objectSpread2 as r,asyncToGenerator as a,regeneratorRuntime as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{createStore as t}from"./store.vanillajs.js";var n=function(n,o){var s,i=r(r({},o),{},{load:(s=a(e().mark((function a(t,n,o){var s,i;return e().wrap((function(a){for(;;)switch(a.prev=a.next){case 0:return s={},n({isLoading:!0}),a.prev=2,a.next=5,o;case 5:i=a.sent,s.data=(null==i?void 0:i.data)||i,a.next=12;break;case 9:a.prev=9,a.t0=a.catch(2),s.error=a.t0;case 12:return a.abrupt("return",n(r(r({},s),{},{isLoading:!1})));case 13:case"end":return a.stop()}}),a,null,[[2,9]])}))),function(r,a,e){return s.apply(this,arguments)})});return t({dataId:n,isLoading:!1},i)};export{n as createDataStore};
|
|
2
2
|
//# sourceMappingURL=store.vanillajs.templates.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.vanillajs.templates.js","sources":["../../../../../../../../src/core/utils/appState/store/store.vanillajs.templates.ts"],"sourcesContent":["import { Store, StoreWithActions, createStore } from './store.vanillajs'\n\n\nexport type DataState<T> = {\n dataId: string\n isLoading: boolean\n error?: unknown\n data?: T\n}\n\n// type CreateDataStoreType = <T>(dataId: string) => StoreWithActions<DataState<T>>\n\n\ntype Load<T> = (\n getState: Store<DataState<T>>['getState'],\n setState: Store<DataState<T>>['setState'],\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\n\ntype LoadHandler<T> = (\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\nexport const createDataStore
|
|
1
|
+
{"version":3,"file":"store.vanillajs.templates.js","sources":["../../../../../../../../src/core/utils/appState/store/store.vanillajs.templates.ts"],"sourcesContent":["import { ActionHandler, Store, StoreWithActions, createStore } from './store.vanillajs'\n\n\nexport type DataState<T> = {\n dataId: string\n isLoading: boolean\n error?: unknown\n data?: T\n}\n\n// type CreateDataStoreType = <T>(dataId: string) => StoreWithActions<DataState<T>>\n\n\ntype Load<T> = (\n getState: Store<DataState<T>>['getState'],\n setState: Store<DataState<T>>['setState'],\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\n\ntype LoadHandler<T> = (\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\nexport const createDataStore\n= <T>(dataId: string, actions?: Record<string, ActionHandler<T>>): StoreWithActions<DataState<T>>\n& { actions: { load: LoadHandler<T> } } => {\n const loadActions: { load: Load<T> } = {\n ...actions,\n load: async (\n getState: Store<DataState<T>>['getState'],\n setState: Store<DataState<T>>['setState'],\n dataPromise: unknown | Promise<unknown>,\n ) => {\n const re: Partial<DataState<T>> = {}\n\n setState({ isLoading: true })\n\n try {\n const response: unknown = await dataPromise\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n re.data = response?.data || response\n } catch (error) {\n re.error = error\n }\n return setState({ ...re, isLoading: false })\n },\n }\n\n return (createStore<DataState<T>>({\n dataId,\n isLoading: false,\n }, loadActions)) as StoreWithActions<DataState<T>>\n & { actions: { load: LoadHandler<T> } }\n}\n\n"],"names":["createDataStore","dataId","actions","_load","loadActions","_objectSpread","load","_asyncToGenerator","_regeneratorRuntime","mark","_callee","getState","setState","dataPromise","re","response","wrap","_context","prev","next","isLoading","sent","data","t0","error","abrupt","stop","_x","_x2","_x3","apply","this","arguments","createStore"],"mappings":"sLAwBO,IAAMA,EACX,SAAIC,EAAgBC,GAEpB,IAEMC,EAFAC,EAA8BC,EAAAA,KAC/BH,GAAO,GAAA,CACVI,MAAIH,EAAAI,EAAAC,IAAAC,MAAE,SAAAC,EACJC,EACAC,EACAC,GAAuC,IAAAC,EAAAC,EAAA,OAAAP,IAAAQ,MAAA,SAAAC,GAAA,cAAAA,EAAAC,KAAAD,EAAAE,MAAA,KAAA,EAIV,OAFvBL,EAA4B,CAAA,EAElCF,EAAS,CAAEQ,WAAW,IAAOH,EAAAC,KAAA,EAAAD,EAAAE,KAAA,EAGKN,EAAW,KAAA,EAArCE,EAAiBE,EAAAI,KAIvBP,EAAGQ,MAAOP,aAAQ,EAARA,EAAUO,OAAQP,EAAQE,EAAAE,KAAA,GAAA,MAAA,KAAA,EAAAF,EAAAC,KAAA,EAAAD,EAAAM,GAAAN,EAAA,MAAA,GAEpCH,EAAGU,MAAKP,EAAAM,GAAQ,KAAA,GAAA,OAAAN,EAAAQ,OAEXb,SAAAA,EAAQP,EAAAA,EAAA,CAAA,EAAMS,GAAE,GAAA,CAAEM,WAAW,MAAQ,KAAA,GAAA,IAAA,MAAA,OAAAH,EAAAS,OAAA,GAAAhB,EAAA,KAAA,CAAA,CAAA,EAAA,IAC7C,KAAA,SAAAiB,EAAAC,EAAAC,GAAA,OAAA1B,EAAA2B,MAAAC,KAAAC,UAAA,KAGH,OAAQC,EAA0B,CAChChC,OAAAA,EACAmB,WAAW,GACVhB,EAEL"}
|
package/dist/utils/index.css
CHANGED
|
@@ -1,32 +1,21 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
1
|
+
.divider-module_divider-line__6CesR {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: block;
|
|
4
|
+
transition: opacity, width, height 250ms ease-in-out;
|
|
5
|
+
background-color: var(--color);
|
|
6
|
+
opacity: var(--opacity);
|
|
3
7
|
}
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
height: var(--height) !important;
|
|
10
|
-
line-height: 1px !important;
|
|
11
|
-
background-color: var(--icon-color);
|
|
12
|
-
color: var(--icon-content-color);
|
|
13
|
-
background-repeat: no-repeat;
|
|
14
|
-
mask-image: var(--icon-url);
|
|
15
|
-
-webkit-mask-image: var(--icon-url);
|
|
16
|
-
mask-repeat: no-repeat;
|
|
17
|
-
-webkit-mask-repeat: no-repeat;
|
|
18
|
-
mask-size: contain;
|
|
19
|
-
-webkit-mask-size: contain;
|
|
20
|
-
mask-position: center;
|
|
21
|
-
-webkit-mask-position: center;
|
|
22
|
-
display: inline-block;
|
|
23
|
-
will-change: transform;
|
|
24
|
-
transform: translate3d(0, 0, 0);
|
|
8
|
+
.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
|
|
9
|
+
height: var(--length);
|
|
10
|
+
left: var(--left);
|
|
11
|
+
width: var(--width);
|
|
12
|
+
margin: var(--margin);
|
|
25
13
|
}
|
|
26
|
-
.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
height: var(--
|
|
14
|
+
.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
|
|
15
|
+
width: var(--length);
|
|
16
|
+
left: var(--left);
|
|
17
|
+
height: var(--height);
|
|
18
|
+
margin: var(--margin);
|
|
30
19
|
}
|
|
31
20
|
.layoutBox-module_flexible-box__Q8zyl {
|
|
32
21
|
display: flex;
|
|
@@ -52,24 +41,35 @@
|
|
|
52
41
|
min-height: 0;
|
|
53
42
|
border-radius: initial;
|
|
54
43
|
}
|
|
55
|
-
.
|
|
56
|
-
|
|
57
|
-
display: block;
|
|
58
|
-
transition: opacity, width, height 250ms ease-in-out;
|
|
59
|
-
background-color: var(--color);
|
|
60
|
-
opacity: var(--opacity);
|
|
44
|
+
.icon-module_icon-base-parent__nOMvW {
|
|
45
|
+
line-height: 1px !important;
|
|
61
46
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
47
|
+
|
|
48
|
+
.icon-module_icon-base__S0tHf {
|
|
49
|
+
min-width: var(--min-width);
|
|
50
|
+
min-height: var(--min-height);
|
|
51
|
+
width: var(--width) !important;
|
|
52
|
+
height: var(--height) !important;
|
|
53
|
+
line-height: 1px !important;
|
|
54
|
+
background-color: var(--icon-color);
|
|
55
|
+
color: var(--icon-content-color);
|
|
56
|
+
background-repeat: no-repeat;
|
|
57
|
+
mask-image: var(--icon-url);
|
|
58
|
+
-webkit-mask-image: var(--icon-url);
|
|
59
|
+
mask-repeat: no-repeat;
|
|
60
|
+
-webkit-mask-repeat: no-repeat;
|
|
61
|
+
mask-size: contain;
|
|
62
|
+
-webkit-mask-size: contain;
|
|
63
|
+
mask-position: center;
|
|
64
|
+
-webkit-mask-position: center;
|
|
65
|
+
display: inline-block;
|
|
66
|
+
will-change: transform;
|
|
67
|
+
transform: translate3d(0, 0, 0);
|
|
67
68
|
}
|
|
68
|
-
.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
height: var(--
|
|
72
|
-
margin: var(--margin);
|
|
69
|
+
.icon-module_icon-base__S0tHf svg {
|
|
70
|
+
fill: var(--icon-content-color);
|
|
71
|
+
width: var(--height);
|
|
72
|
+
height: var(--width);
|
|
73
73
|
}
|
|
74
74
|
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
75
75
|
transform-origin: 0% 0%;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),r=require("./store.vanillajs.js");exports.createDataStore=function(t){var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),r=require("./store.vanillajs.js");exports.createDataStore=function(t,a){var n,o=e.objectSpread2(e.objectSpread2({},a),{},{load:(n=e.asyncToGenerator(e.regeneratorRuntime().mark((function r(t,a,n){var o,s;return e.regeneratorRuntime().wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return o={},a({isLoading:!0}),r.prev=2,r.next=5,n;case 5:s=r.sent,o.data=(null==s?void 0:s.data)||s,r.next=12;break;case 9:r.prev=9,r.t0=r.catch(2),o.error=r.t0;case 12:return r.abrupt("return",a(e.objectSpread2(e.objectSpread2({},o),{},{isLoading:!1})));case 13:case"end":return r.stop()}}),r,null,[[2,9]])}))),function(e,r,t){return n.apply(this,arguments)})});return r.createStore({dataId:t,isLoading:!1},o)};
|
|
2
2
|
//# sourceMappingURL=store.vanillajs.templates.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.vanillajs.templates.js","sources":["../../../../../../../src/core/utils/appState/store/store.vanillajs.templates.ts"],"sourcesContent":["import { Store, StoreWithActions, createStore } from './store.vanillajs'\n\n\nexport type DataState<T> = {\n dataId: string\n isLoading: boolean\n error?: unknown\n data?: T\n}\n\n// type CreateDataStoreType = <T>(dataId: string) => StoreWithActions<DataState<T>>\n\n\ntype Load<T> = (\n getState: Store<DataState<T>>['getState'],\n setState: Store<DataState<T>>['setState'],\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\n\ntype LoadHandler<T> = (\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\nexport const createDataStore
|
|
1
|
+
{"version":3,"file":"store.vanillajs.templates.js","sources":["../../../../../../../src/core/utils/appState/store/store.vanillajs.templates.ts"],"sourcesContent":["import { ActionHandler, Store, StoreWithActions, createStore } from './store.vanillajs'\n\n\nexport type DataState<T> = {\n dataId: string\n isLoading: boolean\n error?: unknown\n data?: T\n}\n\n// type CreateDataStoreType = <T>(dataId: string) => StoreWithActions<DataState<T>>\n\n\ntype Load<T> = (\n getState: Store<DataState<T>>['getState'],\n setState: Store<DataState<T>>['setState'],\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\n\ntype LoadHandler<T> = (\n dataPromise: unknown | Promise<unknown>,\n) => Promise<Partial<DataState<T>>>\n\nexport const createDataStore\n= <T>(dataId: string, actions?: Record<string, ActionHandler<T>>): StoreWithActions<DataState<T>>\n& { actions: { load: LoadHandler<T> } } => {\n const loadActions: { load: Load<T> } = {\n ...actions,\n load: async (\n getState: Store<DataState<T>>['getState'],\n setState: Store<DataState<T>>['setState'],\n dataPromise: unknown | Promise<unknown>,\n ) => {\n const re: Partial<DataState<T>> = {}\n\n setState({ isLoading: true })\n\n try {\n const response: unknown = await dataPromise\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n re.data = response?.data || response\n } catch (error) {\n re.error = error\n }\n return setState({ ...re, isLoading: false })\n },\n }\n\n return (createStore<DataState<T>>({\n dataId,\n isLoading: false,\n }, loadActions)) as StoreWithActions<DataState<T>>\n & { actions: { load: LoadHandler<T> } }\n}\n\n"],"names":["dataId","actions","_load","loadActions","_objectSpread","load","_asyncToGenerator","_regeneratorRuntime","mark","_callee","getState","setState","dataPromise","re","response","regeneratorRuntime","wrap","_context","prev","next","isLoading","sent","data","t0","error","abrupt","stop","_x","_x2","_x3","apply","this","arguments","createStore"],"mappings":"oMAyBE,SAAIA,EAAgBC,GAEpB,IAEMC,EAFAC,EAA8BC,EAAAA,cAAAA,EAAAA,iBAC/BH,GAAO,GAAA,CACVI,MAAIH,EAAAI,mBAAAC,EAAAA,qBAAAC,MAAE,SAAAC,EACJC,EACAC,EACAC,GAAuC,IAAAC,EAAAC,EAAA,OAAAP,EAAAQ,qBAAAC,MAAA,SAAAC,GAAA,cAAAA,EAAAC,KAAAD,EAAAE,MAAA,KAAA,EAIV,OAFvBN,EAA4B,CAAA,EAElCF,EAAS,CAAES,WAAW,IAAOH,EAAAC,KAAA,EAAAD,EAAAE,KAAA,EAGKP,EAAW,KAAA,EAArCE,EAAiBG,EAAAI,KAIvBR,EAAGS,MAAOR,aAAQ,EAARA,EAAUQ,OAAQR,EAAQG,EAAAE,KAAA,GAAA,MAAA,KAAA,EAAAF,EAAAC,KAAA,EAAAD,EAAAM,GAAAN,EAAA,MAAA,GAEpCJ,EAAGW,MAAKP,EAAAM,GAAQ,KAAA,GAAA,OAAAN,EAAAQ,OAEXd,SAAAA,EAAQP,gBAAAA,EAAAA,cAAA,CAAA,EAAMS,GAAE,GAAA,CAAEO,WAAW,MAAQ,KAAA,GAAA,IAAA,MAAA,OAAAH,EAAAS,OAAA,GAAAjB,EAAA,KAAA,CAAA,CAAA,EAAA,IAC7C,KAAA,SAAAkB,EAAAC,EAAAC,GAAA,OAAA3B,EAAA4B,MAAAC,KAAAC,UAAA,KAGH,OAAQC,cAA0B,CAChCjC,OAAAA,EACAoB,WAAW,GACVjB,EAEL"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@e1011/es-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.120",
|
|
4
4
|
"main": "dist/lib/cjs/src/index.js",
|
|
5
5
|
"module": "dist/lib/esm/src/index.js",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -95,9 +95,6 @@
|
|
|
95
95
|
"identity-obj-proxy": "^3.0.0",
|
|
96
96
|
"jest": "^29.3.1",
|
|
97
97
|
"jest-environment-jsdom": "^29.3.1",
|
|
98
|
-
"prettier": "^2.7.1",
|
|
99
|
-
"prettier-eslint": "^15.0.1",
|
|
100
|
-
"prettier-eslint-cli": "^7.1.0",
|
|
101
98
|
"pretty-format": "^29.5.0",
|
|
102
99
|
"reflect-metadata": "^0.1.13",
|
|
103
100
|
"reselect": "^4.1.8",
|