@fixefy/fixefy-ui-components 0.0.10 → 0.0.14

package/dist-es/FxActionsTray/FxActionsTray.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import Image from 'next/image';
+import { Slide } from '@mui/material';
+import { imageLoader } from '@fixefy/fixefy-ui-utils';
+import { ActionBtn, ActionTitle, ChargesCount, ChargesTitle, Close, Container, Divider, TitleWrapper } from './styles/actions_tray.styles';
+export function FxActionsTray({ type, onApprove, onChallenge, show, onClose, chargesCount, container, direction = 'up' }) {
+    const renderActions = () => {
+        switch (type) {
+            case 'approved':
+                return React.createElement(ApprovedActions, { onChallenge: onChallenge });
+            case 'challenge':
+                return React.createElement(ChallengeActions, { onChallenge: onChallenge, onApprove: onApprove });
+            case 'pending':
+                return React.createElement(PendingActions, { onApprove: onApprove, onChallenge: onChallenge });
+            case 'no_pricing':
+                return React.createElement(NoPricingActions, { onApprove: onApprove, onChallenge: onChallenge });
+            default:
+                return React.createElement(ApprovedActions, { onChallenge: onChallenge });
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement(Slide, { direction: direction, in: show, mountOnEnter: true, unmountOnExit: true, timeout: 400, container: container },
+            React.createElement(Container, null,
+                React.createElement(TitleWrapper, null,
+                    React.createElement(ChargesCount, null, chargesCount),
+                    React.createElement(ChargesTitle, null, "charges selected")),
+                React.createElement(Divider, null),
+                React.createElement("div", null, renderActions()),
+                React.createElement(Divider, null),
+                React.createElement("div", { onClick: onClose },
+                    React.createElement(Close, null, "close"))))));
+}
+const ChallengeActions = ({ onChallenge, onApprove }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionBtn, { onClick: onChallenge, type: "low" },
+            React.createElement(Image, { alt: "challenge", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/challenge.svg',
+                }), src: 'actions/challenge.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "challenge")),
+        React.createElement(ActionBtn, { onClick: onApprove },
+            React.createElement(Image, { alt: "approve", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/approve.svg',
+                }), src: 'actions/approve.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "approve")),
+        React.createElement(ActionBtn, { onClick: onApprove },
+            React.createElement(Image, { alt: "ignore and approve", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/ignore_and_approve.svg',
+                }), src: 'actions/ignore_and_approve.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "ignore & approve")),
+        React.createElement(ActionBtn, { onClick: onApprove },
+            React.createElement(Image, { alt: "change exception", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/change_exception.svg',
+                }), src: 'actions/change_exception.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "Change exeption"))));
+};
+const PendingActions = ({ onApprove, onChallenge }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionBtn, { onClick: onApprove, type: "excellent" },
+            React.createElement(Image, { alt: "approve", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/approve.svg',
+                }), src: 'actions/approve.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "approve")),
+        React.createElement(ActionBtn, { onClick: onChallenge },
+            React.createElement(Image, { alt: "challenge", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/challenge.svg',
+                }), src: 'actions/challenge.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "challenge")),
+        React.createElement(ActionBtn, { onClick: onChallenge },
+            React.createElement(Image, { alt: "dive in", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/dive_in.svg',
+                }), src: 'actions/dive_in.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "dive in"))));
+};
+const NoPricingActions = ({ onApprove, onChallenge }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionBtn, { onClick: onChallenge },
+            React.createElement(Image, { alt: "dive in", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/dive_in.svg',
+                }), src: 'actions/dive_in.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "dive in")),
+        React.createElement(ActionBtn, { onClick: onApprove },
+            React.createElement(Image, { alt: "solve", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/solve.svg',
+                }), src: 'actions/solve.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "solve")),
+        React.createElement(ActionBtn, { onClick: onApprove },
+            React.createElement(Image, { alt: "ignore and approve", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/ignore_and_approve.svg',
+                }), src: 'actions/ignore_and_approve.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "ignore & approve"))));
+};
+const ApprovedActions = ({ onChallenge }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ActionBtn, { onClick: onChallenge },
+            React.createElement(Image, { alt: "dive in", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actionsCards/check_exceptions.svg',
+                }), src: 'actionsCards/check_exceptions.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "dive in")),
+        React.createElement(ActionBtn, { onClick: onChallenge },
+            React.createElement(Image, { alt: "challenge", loader: () => imageLoader({
+                    root: 'https://cdn-dev.fixefy.me/',
+                    src: 'actions/undo.svg',
+                }), src: 'actions/undo.svg', width: 20, height: 20, onLoad: () => console.log('loaded'), onError: (e) => console.log('error:', e) }),
+            React.createElement(ActionTitle, null, "undo"))));
+};
+//# sourceMappingURL=FxActionsTray.js.map

package/dist-es/FxActionsTray/FxActionsTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FxActionsTray.js","sourceRoot":"","sources":["../../src/FxActionsTray/FxActionsTray.tsx"],"names":[],"mappings":"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"}

package/dist-es/FxActionsTray/index.d.ts

@@ -0,0 +1,2 @@
+export { FxActionsTray } from './FxActionsTray';
+export type { ActionsTrayPropsType, ActionButtonPropsType } from './actions_tray_types';

package/dist-es/FxActionsTray/index.js

@@ -0,0 +1,2 @@
+export { FxActionsTray } from './FxActionsTray';
+//# sourceMappingURL=index.js.map

package/dist-es/FxActionsTray/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FxActionsTray/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/dist-es/FxActionsTray/styles/actions_tray.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const Container: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const ChargesCount: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const ChargesTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const Close: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const TitleWrapper: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const Divider: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+export declare const ActionBtn: StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
+export declare const ActionTitle: StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;

package/dist-es/FxActionsTray/styles/actions_tray.styles.js

@@ -0,0 +1,77 @@
+import { FxButton } from '../../FxButton';
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+// const filterWhite = 'invert(99%) sepia(74%) saturate(0%) hue-rotate(253deg) brightness(108%) contrast(100%)'
+const filterPrimary = 'invert(46%) sepia(48%) saturate(297%) hue-rotate(145deg) brightness(97%) contrast(90%)';
+export const Container = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    background: theme.palette.common.white,
+    border: '1px solid #C6DDE2',
+    boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
+    borderRadius: 8,
+    padding: '16px 24px',
+    height: 38,
+    width: 'fit-content',
+    margin: 4,
+}));
+export const ChargesCount = styled(Typography)(({ theme }) => ({
+    ...theme.typography.table,
+    color: theme.palette.typography.title,
+    fontWeight: 700,
+    marginRight: 4,
+}));
+export const ChargesTitle = styled(Typography)(({ theme }) => ({
+    ...theme.typography.table,
+    color: theme.palette.typography.title,
+}));
+export const Close = styled(Typography)(({ theme }) => ({
+    ...theme.typography.body1,
+    color: theme.palette.primary['500'],
+    textTransform: 'uppercase',
+    fontWeight: 600,
+    letterSpacing: '0.5px',
+    cursor: 'pointer',
+}));
+export const TitleWrapper = styled('div')(({}) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const Divider = styled('div')(({ theme }) => ({
+    width: 1,
+    height: '100%',
+    background: theme.palette.greyscale.contrastText,
+    marginRight: 24,
+    marginLeft: 24,
+}));
+export const ActionBtn = styled(FxButton)(({ theme, type }) => ({
+    height: 40,
+    maxHeight: 40,
+    borderRadius: 100,
+    padding: '8px 16px',
+    color: type ? theme.palette.common.white : theme.palette.primary['500'],
+    borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
+    background: type ? theme.palette.score[type] : theme.palette.common.white,
+    marginRight: 8,
+    ['& img']: {
+        filter: type ? 'none' : filterPrimary,
+    },
+    ['&:hover']: {
+        background: type ? theme.palette.score[type] : theme.palette.common.white,
+        color: type ? theme.palette.common.white : theme.palette.primary['500'],
+        borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
+    },
+}));
+export const ActionTitle = styled('span')(({ theme }) => ({
+    ...theme.typography.body1,
+    color: 'inherit',
+    textTransform: 'uppercase',
+    fontWeight: 600,
+    letterSpacing: '0.5px',
+    cursor: 'pointer',
+    marginLeft: 4,
+    marginTop: 2,
+}));
+//# sourceMappingURL=actions_tray.styles.js.map

package/dist-es/FxActionsTray/styles/actions_tray.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions_tray.styles.js","sourceRoot":"","sources":["../../../src/FxActionsTray/styles/actions_tray.styles.tsx"],"names":[],"mappings":"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"}

package/dist-es/FxAggregationsBar/FxAggregations.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AggreationsBarPropsType } from './aggregations_types';
+export declare const FxAggregationsBar: (props: AggreationsBarPropsType) => React.JSX.Element;

package/dist-es/FxAggregationsBar/FxAggregations.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import { structureReader } from './helpers/structureReader';
+export const FxAggregationsBar = (props) => {
+    const { structure, minWidth, mb, filter, initialValues } = props;
+    const { children, extended } = structure;
+    const { variables } = extended;
+    const { collapsed } = variables;
+    return (React.createElement(Stack, { direction: "row", spacing: 1.5, sx: {
+            mb: mb ? mb : 0,
+            ['& div']: {
+                minWidth: minWidth,
+            },
+            ['& > span']: {
+                minWidth: minWidth,
+            },
+        } }, children.map((child) => {
+        return structureReader(child, filter, collapsed, initialValues);
+    })));
+};
+//# sourceMappingURL=FxAggregations.js.map

package/dist-es/FxAggregationsBar/FxAggregations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FxAggregations.js","sourceRoot":"","sources":["../../src/FxAggregationsBar/FxAggregations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,qBAAqB,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAI3D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAChE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;IACxC,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAA;IAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,CAAA;IAE/B,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,GAAG,EACZ,EAAE,EAAE;YACF,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACf,CAAC,OAAO,CAAC,EAAE;gBACT,QAAQ,EAAE,QAAQ;aACnB;YACD,CAAC,UAAU,CAAC,EAAE;gBACZ,QAAQ,EAAE,QAAQ;aACnB;SACF,IAEA,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAU,EAAE,EAAE;QAC3B,OAAO,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAA;IACjE,CAAC,CAAC,CACI,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist-es/FxAggregationsBar/helpers/structureReader.d.ts

@@ -0,0 +1 @@
+export declare const structureReader: (structure: any, filter: any, collapsed: boolean, initialValues: any) => any;

package/dist-es/FxAggregationsBar/helpers/structureReader.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box, Stack, Divider } from '@mui/material';
+import { FxScore } from '../../FxScore';
+import { FxStatisticsBar } from '../../FxStatisticsBar';
+import { FxProgressCounter } from '../../FxProgressCounter';
+export const structureReader = (structure, filter, collapsed, initialValues) => {
+    const { extended, type } = structure;
+    switch (type) {
+        case 'aggregations_primary_container':
+            return structure.children.map((child, index) => child.input_type?.value === 'percentage' ? (React.createElement(FxScore, { structure: child, key: index, filter: filter, value: initialValues?.score })) : child.input_type?.value === 'progress' ? (React.createElement(FxProgressCounter, { structure: child, filter: filter, key: index, values: initialValues })) : (React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    width: 'fit-content',
+                    padding: 2,
+                    borderRadius: 2,
+                    backgroundColor: extended?.variables?.bg || '#FFFFFF',
+                } },
+                React.createElement(FxStatisticsBar, { structure: child, key: index, filter: filter, collapsed: collapsed, value: initialValues ? initialValues[child.extended.object_path] : null }))));
+        case 'aggregations_secondary_container':
+            return (React.createElement(Stack, { direction: 'row', divider: React.createElement(Divider, { orientation: 'vertical', flexItem: true }), spacing: 2, sx: {
+                    backgroundColor: extended?.variables?.bg || '#FFFFFF',
+                    borderRadius: '8px',
+                    padding: '24px 16px',
+                } }, structure.children.map((child, index) => {
+                return (React.createElement(FxStatisticsBar, { structure: child, key: index, filter: filter, collapsed: collapsed, value: initialValues ? initialValues[child.extended.object_path] : null }));
+            })));
+    }
+};
+//# sourceMappingURL=structureReader.js.map

package/dist-es/FxAggregationsBar/helpers/structureReader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"structureReader.js","sourceRoot":"","sources":["../../../src/FxAggregationsBar/helpers/structureReader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAc,EAAE,MAAW,EAAE,SAAkB,EAAE,aAAkB,EAAE,EAAE;IACrG,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,CAAA;IACpC,QAAQ,IAAI,EAAE;QACZ,KAAK,gCAAgC;YACnC,OAAO,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAU,EAAE,KAAa,EAAE,EAAE,CAC1D,KAAK,CAAC,UAAU,EAAE,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,CACzC,oBAAC,OAAO,IAAC,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,GAAI,CACvF,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,CAC3C,oBAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,GAAI,CAC3F,CAAC,CAAC,CAAC,CACF,oBAAC,GAAG,IACF,EAAE,EAAE;oBACF,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,QAAQ;oBACxB,UAAU,EAAE,QAAQ;oBACpB,KAAK,EAAE,aAAa;oBACpB,OAAO,EAAE,CAAC;oBACV,YAAY,EAAE,CAAC;oBACf,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,SAAS;iBACtD;gBAED,oBAAC,eAAe,IACd,SAAS,EAAE,KAAK,EAChB,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,GACvE,CACE,CACP,CACF,CAAA;QACH,KAAK,kCAAkC;YACrC,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,oBAAC,OAAO,IAAC,WAAW,EAAC,UAAU,EAAC,QAAQ,SAAG,EACpD,OAAO,EAAE,CAAC,EACV,EAAE,EAAE;oBACF,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,SAAS;oBACrD,YAAY,EAAE,KAAK;oBACnB,OAAO,EAAE,WAAW;iBACrB,IAEA,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAU,EAAE,KAAa,EAAE,EAAE;gBACpD,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAE,KAAK,EAChB,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,GACvE,CACH,CAAA;YACH,CAAC,CAAC,CACI,CACT,CAAA;KACJ;AACH,CAAC,CAAA"}

package/dist-es/FxAggregationsBar/index.d.ts

@@ -0,0 +1,2 @@
+export { FxAggregationsBar } from './FxAggregations';
+export type { AggregationsDataPropsType, AggreationsBarPropsType } from './aggregations_types';

package/dist-es/FxAggregationsBar/index.js

@@ -0,0 +1,2 @@
+export { FxAggregationsBar } from './FxAggregations';
+//# sourceMappingURL=index.js.map

package/dist-es/FxAggregationsBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FxAggregationsBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist-es/FxAggregationsBar/operations/query.d.ts

@@ -0,0 +1 @@
+export declare const STRUCTURES: import("graphql").DocumentNode;

package/dist-es/FxAggregationsBar/operations/query.js

@@ -0,0 +1,64 @@
+import { gql } from 'graphql-tag';
+export const STRUCTURES = gql `
+  query STRUCTURES {
+    structure(where: { name: "aggregations_invoice" }) {
+      _id
+      bundle_name
+      name
+      title
+      type
+      input_type {
+        name
+        value
+      }
+      readable_id
+      extended {
+        format
+        gql_operation
+        title_path
+        object_path
+        filter
+        variables
+      }
+      children(sort: { index: 1 }) {
+        _id
+        name
+        title
+        type
+        input_type {
+          name
+          value
+        }
+        readable_id
+        extended {
+          format
+          gql_operation
+          title_path
+          object_path
+          filter
+          variables
+        }
+        children(sort: { index: 1 }) {
+          _id
+          name
+          title
+          type
+          input_type {
+            name
+            value
+          }
+          readable_id
+          extended {
+            format
+            gql_operation
+            title_path
+            object_path
+            filter
+            variables
+          }
+        }
+      }
+    }
+  }
+`;
+//# sourceMappingURL=query.js.map

package/dist-es/FxAggregationsBar/operations/query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.js","sourceRoot":"","sources":["../../../src/FxAggregationsBar/operations/query.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D5B,CAAA"}

package/dist-es/FxAsyncDropdown/FxAsyncDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AsyncDropdownPropsType } from './async_dropdown_types';
+export declare const FxAsyncDropdown: React.ForwardRefExoticComponent<Omit<AsyncDropdownPropsType, "ref"> & React.RefAttributes<unknown>>;

package/dist-es/FxAsyncDropdown/FxAsyncDropdown.js

@@ -0,0 +1,230 @@
+// @ts-ignore
+import _ from 'lodash';
+import { Close as CloseIcon, CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon, KeyboardArrowDown as ArrowIcon, } from '@mui/icons-material';
+import { gql } from 'graphql-tag';
+// import { getJPart } from './helpers/helpers'
+import { useLazyQuery } from '@apollo/client';
+import { titleCase } from '@fixefy/fixefy-ui-utils';
+import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
+import { Button, Checkbox, CircularProgress, useAutocomplete, useTheme, Typography } from '@mui/material';
+import { Root, InputWrapper, Listbox, StyledClose, StyledListBox, Loading } from './styles/dropdown.styles';
+const icon = React.createElement(CheckBoxOutlineBlankIcon, { fontSize: 'small' });
+const checkedIcon = React.createElement(CheckBoxIcon, { fontSize: 'small' });
+export const FxAsyncDropdown = React.forwardRef((props, parentRef) => {
+    const ref = useRef(null);
+    const theme = useTheme();
+    const [options, setOptions] = useState([]);
+    const [loadingData, setLoadingData] = useState(false);
+    const [isLastPage, setIsLastPage] = useState(false);
+    const [searchValue, setSearchValue] = useState(null);
+    const [hasClearBtn, setHasClearBtn] = useState(false);
+    const [page, setPage] = useState(1);
+    const [prevPage, setPrevPage] = useState(0);
+    const [pageSize] = useState(20);
+    const { debug, structure, onChange, onClear, renderOptions, fetcher, initialValue = {}, multiple, disabled, type = 'text', showSelectedValue, ...rest } = props;
+    const { name, extended, children } = structure;
+    const { search_path, variables } = extended;
+    const { method_name } = variables;
+    const [fetch, { data, loading }] = useLazyQuery(gql(fetcher.query), {
+        ...fetcher.queryOptions,
+        variables: {
+            ...fetcher.queryOptions.variables,
+            where: searchValue
+                ? {
+                    ...fetcher.queryOptions.variables.where,
+                    [search_path]: searchValue,
+                }
+                : {
+                    ...fetcher.queryOptions.variables.where,
+                },
+            skip: page * pageSize - pageSize,
+            limit: pageSize,
+        },
+    });
+    const labelOption = structure?.extended?.title_path ?? 'title';
+    const { getRootProps, getInputProps, getClearProps, getListboxProps, getOptionProps, groupedOptions, value, popupOpen, focused, setAnchorEl, } = useAutocomplete({
+        ...rest,
+        defaultValue: initialValue,
+        options: options,
+        disableCloseOnSelect: !!multiple,
+        multiple,
+        disabled: disabled,
+        isOptionEqualToValue: (option, value) => {
+            return option._id === value._id;
+        },
+        getOptionLabel: (option) => titleCase(option[labelOption] ?? option.title),
+    });
+    const onPopupScroll = _.debounce(() => {
+        if (ref && ref.current) {
+            //@ts-ignore
+            const threshHold = ref.current.scrollHeight / 2;
+            //@ts-ignore
+            if (ref.current.scrollTop > threshHold && !loadingData && !isLastPage) {
+                setLoadingData(true);
+                setPage((prevPage) => prevPage + 1);
+                setPrevPage((prevPage) => prevPage + 1);
+            }
+        }
+    }, 800);
+    const createTitle = () => {
+        if (Array.isArray(value)) {
+            if (value && value.length) {
+                return `${titleCase(name)} (${value.length})`;
+            }
+        }
+        return titleCase(name);
+    };
+    const handleSearch = _.debounce((e) => {
+        setSearchValue(e.target.value);
+        setPage(1);
+    }, 300);
+    const handleChildrens = ({ structure, ...rest }) => {
+        let rv = null;
+        const { type, children } = structure;
+        debug === true && console.log('handleChildrens', structure);
+        switch (type) {
+            case 'dropdownOptions':
+            case 'dropdown_options': {
+                rv = children.map((child) => handleChildrens({
+                    structure: child,
+                    ...rest,
+                }));
+                break;
+            }
+            case 'clear': {
+                if (!hasClearBtn) {
+                    setHasClearBtn(true);
+                }
+                rv = React.createElement(Button, { ...rest }, structure.title);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+        return rv;
+    };
+    const handleRenderOptions = () => {
+        debug === true && console.log('renderOptions: ', renderOptions);
+        if (renderOptions) {
+            return groupedOptions.map((option, index) => {
+                const CustomeComponent = renderOptions(option, index);
+                //@ts-ignore
+                return React.cloneElement(CustomeComponent, {
+                    ...getOptionProps({ option, index }),
+                });
+            });
+        }
+        else {
+            switch (type) {
+                case 'checkbox': {
+                    return groupedOptions.map((option, index) => {
+                        const isSelected = getOptionProps({
+                            option,
+                            index,
+                        })['aria-selected'];
+                        return (React.createElement("li", { ...getOptionProps({ option, index }) },
+                            React.createElement(Checkbox, { icon: icon, checked: Boolean(isSelected), checkedIcon: checkedIcon, sx: {
+                                    mr: 1,
+                                    minWidth: 24,
+                                    minHeight: 24,
+                                    p: 0,
+                                    ['& svg']: { fill: theme.palette.primary.light },
+                                } }),
+                            React.createElement(Typography, { variant: 'table', color: theme.palette.typography.title }, titleCase(option?.title))));
+                    });
+                }
+                case 'text': {
+                    return groupedOptions.map((option, index) => {
+                        debug === true &&
+                            console.log('renderOptions: ', structure?.extended?.title_path, option[structure?.extended?.title_path], options);
+                        return (React.createElement("li", { ...getOptionProps({ option, index }) },
+                            React.createElement(Typography, { variant: 'table', color: theme.palette.typography.title }, titleCase(option[structure?.extended?.title_path] ?? option.title))));
+                    });
+                }
+                default: {
+                    return groupedOptions.map((option, index) => {
+                        debug === true &&
+                            console.log('renderOptions: ', structure?.extended?.title_path, option[structure?.extended?.title_path], options);
+                        return (React.createElement("li", { ...getOptionProps({ option, index }) },
+                            React.createElement(Typography, { variant: 'table', color: theme.palette.typography.title }, titleCase(option[structure?.extended?.title_path] ?? option.title))));
+                    });
+                }
+            }
+        }
+    };
+    useImperativeHandle(parentRef, () => ({
+        clearDDL: () => {
+            //@ts-ignore
+            getClearProps()?.onClick(null);
+        },
+    }));
+    useEffect(() => {
+        if (ref && ref.current) {
+            //@ts-ignore
+            ref.current.addEventListener('scroll', () => onPopupScroll());
+        }
+        return () => {
+            if (ref && ref.current) {
+                //@ts-ignore
+                ref.current.removeEventListener('scroll', () => onPopupScroll());
+            }
+        };
+    }, [groupedOptions]);
+    useEffect(() => {
+        onChange && onChange(value, name);
+    }, [value]);
+    useEffect(() => {
+        if (popupOpen && !isLastPage && prevPage < page && !disabled) {
+            fetch();
+        }
+    }, [popupOpen]);
+    useEffect(() => {
+        if (!disabled) {
+            fetch();
+        }
+    }, []);
+    useEffect(() => {
+        if (data && !isLastPage && prevPage < page) {
+            const newOptions = data[method_name];
+            if (newOptions.length === 0 || newOptions.length < pageSize) {
+                setIsLastPage(true);
+            }
+            setOptions([...newOptions, ...options]);
+            setLoadingData(false);
+        }
+    }, [data]);
+    return (React.createElement(Root, null,
+        React.createElement(InputWrapper, { hasValue: !!(value && Object.keys(value).length), disabled: disabled, sx: {
+                width: props.styles?.width ?? 180,
+                maxWidth: props.styles?.maxWidth ?? 300,
+            }, ...getRootProps(), ref: setAnchorEl, className: focused ? 'focused' : '' },
+            React.createElement("input", { ...getInputProps(), readOnly: true, onChange: (e) => {
+                    //@ts-ignore
+                    getInputProps()?.onChange(e);
+                    handleSearch(e);
+                }, placeholder: createTitle(), value: showSelectedValue ? titleCase(value.title) : undefined }),
+            loading ? (React.createElement(Loading, null,
+                React.createElement(CircularProgress, null))) : (React.createElement(ArrowIcon, null))),
+        groupedOptions.length > 0 && !disabled ? (React.createElement(Listbox
+        // sx={{
+        //   width: props.styles?.width ?? 300,
+        //   maxWidth: props.styles?.maxWidth ?? 300,
+        //   minWidth: props.styles?.width ?? 300,
+        // }}
+        , { ...getListboxProps() },
+            React.createElement(StyledListBox, { sx: {
+                    ...props.styles?.menuSx,
+                    // width: props.styles?.width ?? 300,
+                }, hasClearBtn: children?.length, ref: ref }, handleRenderOptions()),
+            children && children.length ? (React.createElement(StyledClose, null, handleChildrens({
+                structure: children[0],
+                onClick: (e) => {
+                    onClear && onClear();
+                    //@ts-ignore
+                    getClearProps()?.onClick(e);
+                },
+                startIcon: React.createElement(CloseIcon, null),
+            }))) : null)) : null));
+});
+//# sourceMappingURL=FxAsyncDropdown.js.map