@hazelcast/ui 1.3.2-next.18 → 1.3.2-next.21
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/lib/Calendar/Calendar.d.ts +3 -2
- package/lib/Calendar/Calendar.js +29 -23
- package/lib/Calendar/Calendar.js.map +1 -1
- package/lib/Calendar/CalendarRange.d.ts +0 -1
- package/lib/Calendar/CalendarRange.js +3 -3
- package/lib/Calendar/CalendarRange.js.map +1 -1
- package/lib/Calendar/components/CalendarTime.js +1 -1
- package/lib/Calendar/components/CalendarTime.js.map +1 -1
- package/lib/Select/CheckableSelectField.module.scss +1 -1
- package/lib/index.d.ts +0 -3
- package/lib/index.js +0 -3
- package/lib/index.js.map +1 -1
- package/package.json +2 -6
- package/lib/Code.d.ts +0 -9
- package/lib/Code.js +0 -16
- package/lib/Code.js.map +0 -1
- package/lib/CodeEditor.d.ts +0 -29
- package/lib/CodeEditor.js +0 -180
- package/lib/CodeEditor.js.map +0 -1
- package/lib/CodeEditor.module.scss +0 -32
- package/lib/CodeEditorFormik.d.ts +0 -11
- package/lib/CodeEditorFormik.js +0 -23
- package/lib/CodeEditorFormik.js.map +0 -1
|
@@ -10,6 +10,7 @@ export declare type CalendarProps = {
|
|
|
10
10
|
onDateChange: ReactDatePickerProps['onChange'];
|
|
11
11
|
size?: CalendarSize;
|
|
12
12
|
container?: PortalContainer;
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
inPortal?: boolean;
|
|
14
|
+
dateFormat?: string;
|
|
15
|
+
} & Omit<ReactDatePickerProps, 'value' | 'onChange' | 'dateFormat'>;
|
|
15
16
|
export declare const Calendar: FC<CalendarProps>;
|
package/lib/Calendar/Calendar.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import DatePicker from 'react-datepicker';
|
|
@@ -8,26 +8,32 @@ import { CalendarTime } from './components/CalendarTime';
|
|
|
8
8
|
import styles from './Calendar.module.scss';
|
|
9
9
|
import { getPortalContainer } from '../utils/portal';
|
|
10
10
|
const DATE_FORMAT = 'yyyy-MM-dd';
|
|
11
|
-
const
|
|
12
|
-
const CalendarPopperContainer = (container,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
11
|
+
const TIME_FORMAT = 'hh:mm a';
|
|
12
|
+
const CalendarPopperContainer = (container, inPortal) => ({ children }) => {
|
|
13
|
+
const content = ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
14
|
+
React.createElement("div", { className: styles.popper },
|
|
15
|
+
React.createElement("div", { "data-test": "date-picker-popper-container", className: "hz-date-picker-popper-container" }, children)));
|
|
16
|
+
if (inPortal) {
|
|
17
|
+
return content;
|
|
18
|
+
}
|
|
19
|
+
return container && children ? createPortal(content, container) : null;
|
|
20
|
+
};
|
|
21
|
+
export const Calendar = ({ calendarClassName, className, containerClassName, date, inputLabel, inputClassName, onDateChange, showTimeInput, size = 'medium', container = `body`, inPortal = false, dateFormat = DATE_FORMAT, timeFormat = TIME_FORMAT, ...props }) => {
|
|
22
|
+
const PopperContainer = useMemo(() => CalendarPopperContainer(getPortalContainer(container), inPortal), [container, inPortal]);
|
|
23
|
+
return (React.createElement("div", { className: cn(styles.container, {
|
|
24
|
+
[styles.time]: showTimeInput,
|
|
25
|
+
}, containerClassName) },
|
|
26
|
+
React.createElement(DatePicker, { ...props, calendarClassName: cn(styles.calendar, calendarClassName), className: className,
|
|
27
|
+
/*
|
|
28
|
+
* Note: The library instantiates the component using React.cloneElement
|
|
29
|
+
* Source: https://github.com/Hacker0x01/react-datepicker/blob/master/src/index.jsx#L926
|
|
30
|
+
*/
|
|
31
|
+
customInput: React.createElement(CalendarInput, { label: inputLabel, textFieldSize: size, className: inputClassName }), customTimeInput: React.createElement(CalendarTime, null), dateFormat: showTimeInput ? `${dateFormat} ${timeFormat}` : dateFormat, onChange: onDateChange, popperContainer: PopperContainer,
|
|
32
|
+
/*
|
|
33
|
+
* Note:
|
|
34
|
+
* 'renderCustomHeader' is the only child component override prop that is not instantiated
|
|
35
|
+
* via React.cloneElement. So at least we can utilise a typed React.Component over React.ReactNode here
|
|
36
|
+
*/
|
|
37
|
+
renderCustomHeader: CalendarHeader, selected: date, timeFormat: timeFormat, showPopperArrow: false, showTimeInput: showTimeInput })));
|
|
38
|
+
};
|
|
33
39
|
//# sourceMappingURL=Calendar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAmB,MAAM,iBAAiB,CAAA;AAErE,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,WAAW,GAAG,SAAS,CAAA;AAE7B,MAAM,uBAAuB,GAC3B,CAAC,SAA6B,EAAE,QAAiB,EAAM,EAAE,CACzD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACf,MAAM,OAAO,GAAG,EAAE,mEAAmE;IACnF,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,CACP,CAAA;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,OAAO,CAAA;KACf;IAED,OAAO,SAAS,IAAI,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;AACxE,CAAC,CAAA;AAgBH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,WAAW,EACxB,UAAU,GAAG,WAAW,EACxB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE9H,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;SAC7B,EACD,kBAAkB,CACnB;QAED,oBAAC,UAAU,OACL,KAAK,EACT,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;YACpB;;;eAGG;YACH,WAAW,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjG,eAAe,EAAE,oBAAC,YAAY,OAAG,EACjC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,UAAU,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,EACtE,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,eAAe;YAChC;;;;eAIG;YACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,GAC5B,CACE,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -11,6 +11,5 @@ export declare type CalendarRangeProps = {
|
|
|
11
11
|
endOpen?: boolean;
|
|
12
12
|
variant?: CalendarRangeVariant;
|
|
13
13
|
onEndDateChange: CalendarProps['onDateChange'];
|
|
14
|
-
insidePopover?: boolean;
|
|
15
14
|
} & Omit<CalendarProps, 'onDateChange' | 'date' | 'inputLabel'>;
|
|
16
15
|
export declare const CalendarRange: FC<CalendarRangeProps>;
|
|
@@ -4,10 +4,10 @@ import cn from 'classnames';
|
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
5
|
import { Calendar } from './Calendar';
|
|
6
6
|
import styles from './CalendarRange.module.scss';
|
|
7
|
-
export const CalendarRange = ({ startDate, startInputLabel = 'From', startOpen, onStartDateChange, endDate, endInputLabel = 'To', endOpen, onEndDateChange, size,
|
|
7
|
+
export const CalendarRange = ({ startDate, startInputLabel = 'From', startOpen, onStartDateChange, endDate, endInputLabel = 'To', endOpen, onEndDateChange, size, variant = 'horizontal', ...rest }) => {
|
|
8
8
|
return (React.createElement("div", { className: cn(styles.container, { [styles.vertical]: variant === 'vertical' }) },
|
|
9
|
-
React.createElement(Calendar, { "data-test": "calendar-range-start", date: startDate, onDateChange: onStartDateChange, selectsStart: true, startDate: startDate, endDate: endDate, inputLabel: startInputLabel, open: startOpen, size: size,
|
|
9
|
+
React.createElement(Calendar, { "data-test": "calendar-range-start", date: startDate, onDateChange: onStartDateChange, selectsStart: true, startDate: startDate, endDate: endDate, inputLabel: startInputLabel, open: startOpen, size: size, ...rest }),
|
|
10
10
|
variant === 'horizontal' && (React.createElement(Icon, { "data-test": "calendar-range-icon", className: cn(styles.arrowRight, { [styles.small]: size === 'small' }), icon: ArrowRight, ariaLabel: "Arrow Right" })),
|
|
11
|
-
React.createElement(Calendar, { "data-test": "calendar-range-end", date: endDate, onDateChange: onEndDateChange, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, inputLabel: endInputLabel, open: endOpen, size: size,
|
|
11
|
+
React.createElement(Calendar, { "data-test": "calendar-range-end", date: endDate, onDateChange: onEndDateChange, selectsEnd: true, startDate: startDate, endDate: endDate, minDate: startDate, inputLabel: endInputLabel, open: endOpen, size: size, ...rest })));
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=CalendarRange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarRange.js","sourceRoot":"","sources":["../../src/Calendar/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,OAAO,MAAM,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"CalendarRange.js","sourceRoot":"","sources":["../../src/Calendar/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAehD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,SAAS,EACT,eAAe,GAAG,MAAM,EACxB,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,OAAO,EACP,eAAe,EACf,IAAI,EACJ,OAAO,GAAG,YAAY,EACtB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,UAAU,EAAE,CAAC;QACjF,oBAAC,QAAQ,iBACG,sBAAsB,EAChC,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,iBAAiB,EAC/B,YAAY,QACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,IAAI,KACN,IAAI,GACR;QACD,OAAO,KAAK,YAAY,IAAI,CAC3B,oBAAC,IAAI,iBACO,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,CAAC,EACtE,IAAI,EAAE,UAAU,EAChB,SAAS,EAAC,aAAa,GACvB,CACH;QACD,oBAAC,QAAQ,iBACG,oBAAoB,EAC9B,IAAI,EAAE,OAAO,EACb,YAAY,EAAE,eAAe,EAC7B,UAAU,QACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,aAAa,EACzB,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,IAAI,KACN,IAAI,GACR,CACE,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -53,7 +53,7 @@ export const CalendarTimeInternal = ({ date, value, onChange }) => {
|
|
|
53
53
|
}, [onChange, date]);
|
|
54
54
|
return (React.createElement("div", { "data-test": "calendar-time", className: styles.container },
|
|
55
55
|
React.createElement("div", { "data-test": "calendar-time-header", className: styles.header },
|
|
56
|
-
React.createElement(TimeField, { showAriaLabel: true, label: "Time Input", error: timeInputError,
|
|
56
|
+
React.createElement(TimeField, { showAriaLabel: true, label: "Time Input", error: timeInputError, name: "time", value: time.toString(), onChange: handleTimeInputChange })),
|
|
57
57
|
React.createElement("div", { "data-test": "calendar-time-timePoints", className: styles.timePoints }, timePoints.map((tP) => (React.createElement(Button, { className: styles.timePoint, bodyClassName: styles.timePointBody, key: tP, kind: "transparent", onClick: handleDateClick(tP) }, tP))))));
|
|
58
58
|
};
|
|
59
59
|
export const CalendarTime = (props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarTime.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmB,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAE/C,8BAA8B;AAC9B,MAAM,WAAW,GAAG,SAAS,CAAA;AAC7B,wBAAwB;AACxB,MAAM,uBAAuB,GAAG,OAAO,CAAA;AAQvC,MAAM,CAAC,MAAM,oBAAoB,GAAkC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IAE1E;;;;;;;;;;;;;;;;;;OAkBG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,KAAK,CAAC,CAAA;IAChB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAiC,EAAE,EAAE;QACvD,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,uBAAuB,EAAE,IAAI,CAAC,CAAA;QAE9D,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,EAAE;YAChC,iBAAiB,CAAC,SAAS,CAAC,CAAA;YAC5B,QAAQ,CAAC,KAAK,CAAC,CAAA;SAChB;aAAM;YACL,iBAAiB,CAAC,cAAc,CAAC,CAAA;SAClC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB,CAAA;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAU,EAAE,EAAE,CAAC,GAAG,EAAE;QACnB,iEAAiE;QACjE,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,CAAA;QAC/C,kGAAkG;QAClG,MAAM,mBAAmB,GAAG,MAAM,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAA;QACvE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IAC/B,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,CACjB,CAAA;IAED,OAAO,CACL,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS;QACxD,0CAAe,sBAAsB,EAAC,SAAS,EAAE,MAAM,CAAC,MAAM;YAC5D,oBAAC,SAAS,IACR,aAAa,QACb,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,cAAc,EACrB,
|
|
1
|
+
{"version":3,"file":"CalendarTime.js","sourceRoot":"","sources":["../../../src/Calendar/components/CalendarTime.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
CHANGED
|
@@ -7,9 +7,6 @@ export { Card } from './Card';
|
|
|
7
7
|
export { Checkbox } from './Checkbox';
|
|
8
8
|
export { CheckboxFormik } from './CheckboxFormik';
|
|
9
9
|
export { CircularProgressBar } from './CircularProgressBar';
|
|
10
|
-
export { Code } from './Code';
|
|
11
|
-
export { CodeEditor } from './CodeEditor';
|
|
12
|
-
export { CodeEditorFormik } from './CodeEditorFormik';
|
|
13
10
|
export { Dialog } from './Dialog';
|
|
14
11
|
export { EmptyState } from './EmptyState';
|
|
15
12
|
export { Error, errorId } from './Error';
|
package/lib/index.js
CHANGED
|
@@ -7,9 +7,6 @@ export { Card } from './Card';
|
|
|
7
7
|
export { Checkbox } from './Checkbox';
|
|
8
8
|
export { CheckboxFormik } from './CheckboxFormik';
|
|
9
9
|
export { CircularProgressBar } from './CircularProgressBar';
|
|
10
|
-
export { Code } from './Code';
|
|
11
|
-
export { CodeEditor } from './CodeEditor';
|
|
12
|
-
export { CodeEditorFormik } from './CodeEditorFormik';
|
|
13
10
|
export { Dialog } from './Dialog';
|
|
14
11
|
export { EmptyState } from './EmptyState';
|
|
15
12
|
export { Error, errorId } from './Error';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hazelcast/ui",
|
|
3
|
-
"version": "1.3.2-next.
|
|
3
|
+
"version": "1.3.2-next.21+304ad63",
|
|
4
4
|
"description": "Hazelcast design system components",
|
|
5
5
|
"author": "",
|
|
6
6
|
"homepage": "https://github.com/hazelcast/frontend-shared#readme",
|
|
@@ -46,9 +46,6 @@
|
|
|
46
46
|
"url": "https://github.com/hazelcast/frontend-shared/issues"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@codemirror/basic-setup": "^0.19.1",
|
|
50
|
-
"@codemirror/stream-parser": "^0.19.3",
|
|
51
|
-
"@codemirror/view": "^0.19.35",
|
|
52
49
|
"@hazelcast/helpers": "^1.3.1",
|
|
53
50
|
"@hazelcast/services": "^1.3.1",
|
|
54
51
|
"@headlessui/react": "^1.4.2",
|
|
@@ -76,7 +73,6 @@
|
|
|
76
73
|
"use-deep-compare": "^1.1.0"
|
|
77
74
|
},
|
|
78
75
|
"devDependencies": {
|
|
79
|
-
"@codemirror/legacy-modes": "0.19.0",
|
|
80
76
|
"@hazelcast/test-helpers": "^1.3.1",
|
|
81
77
|
"@storybook/addon-docs": "^6.4.9",
|
|
82
78
|
"@storybook/addons": "^6.4.9",
|
|
@@ -113,5 +109,5 @@
|
|
|
113
109
|
"webpack": "^5.65.0",
|
|
114
110
|
"yup": "^0.32.11"
|
|
115
111
|
},
|
|
116
|
-
"gitHead": "
|
|
112
|
+
"gitHead": "304ad6332d64435a3d41affe5024b6318210c3b1"
|
|
117
113
|
}
|
package/lib/Code.d.ts
DELETED
package/lib/Code.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
CodeMirror based Code component.
|
|
3
|
-
|
|
4
|
-
This is a readonly code viewer component. For editing purposes use `CodeEditor`.
|
|
5
|
-
*/
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import { CodeEditor, EditorView } from './CodeEditor';
|
|
8
|
-
const DEFAULT_OPTIONS = {
|
|
9
|
-
language: null,
|
|
10
|
-
lineWrapping: false,
|
|
11
|
-
lineNumbers: true,
|
|
12
|
-
};
|
|
13
|
-
export const Code = ({ value, className, options = DEFAULT_OPTIONS, dataTest = 'code' }) => {
|
|
14
|
-
return (React.createElement(CodeEditor, { value: value, options: options, dataTest: dataTest, className: className, customExtensions: [EditorView.editable.of(false)] }));
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=Code.js.map
|
package/lib/Code.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Code.js","sourceRoot":"","sources":["../src/Code.tsx"],"names":[],"mappings":"AAAA;;;;EAIE;AAEF,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAe,UAAU,EAAE,MAAM,cAAc,CAAA;AASlE,MAAM,eAAe,GAAgB;IACnC,QAAQ,EAAE,IAAI;IACd,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,IAAI;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,GAAG,eAAe,EAAE,QAAQ,GAAG,MAAM,EAAE,EAAE,EAAE;IACxG,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,GACjD,CACH,CAAA;AACH,CAAC,CAAA"}
|
package/lib/CodeEditor.d.ts
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { FC, MutableRefObject, FocusEvent } from 'react';
|
|
2
|
-
import { EditorView, KeyBinding } from '@codemirror/view';
|
|
3
|
-
import { EditorState, Extension } from '@codemirror/state';
|
|
4
|
-
export { EditorView, EditorState, KeyBinding };
|
|
5
|
-
export declare type CodeOptions = {
|
|
6
|
-
language?: any;
|
|
7
|
-
lineWrapping?: boolean;
|
|
8
|
-
lineNumbers?: boolean;
|
|
9
|
-
rows?: number;
|
|
10
|
-
};
|
|
11
|
-
export interface EditorViewRef {
|
|
12
|
-
view(): EditorView | null;
|
|
13
|
-
}
|
|
14
|
-
declare type OnChangeCallback = (val: string) => void;
|
|
15
|
-
export declare type CodeEditorProps = {
|
|
16
|
-
value?: string;
|
|
17
|
-
className?: string;
|
|
18
|
-
name?: string;
|
|
19
|
-
options?: CodeOptions;
|
|
20
|
-
onChange?: OnChangeCallback;
|
|
21
|
-
onBlur?: (e: FocusEvent) => void;
|
|
22
|
-
customExtensions?: Extension[];
|
|
23
|
-
customKeymap?: KeyBinding[];
|
|
24
|
-
innerRef?: MutableRefObject<EditorViewRef | null>;
|
|
25
|
-
error?: string;
|
|
26
|
-
errorClassName?: string;
|
|
27
|
-
dataTest?: string;
|
|
28
|
-
};
|
|
29
|
-
export declare const CodeEditor: FC<CodeEditorProps>;
|
package/lib/CodeEditor.js
DELETED
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
CodeMirror based Code Editor component.
|
|
3
|
-
|
|
4
|
-
* For readonly/code-viewing purposes use `Code`.
|
|
5
|
-
|
|
6
|
-
## CM5 vs CM6
|
|
7
|
-
|
|
8
|
-
We are not using the old CM5; we're basing our component on CM6 which is the next gen. version of the hugely
|
|
9
|
-
popular CM5. CM6 is still years old and solid despite being a young project.
|
|
10
|
-
|
|
11
|
-
See https://codemirror.net/6/ for more.
|
|
12
|
-
|
|
13
|
-
## About language support
|
|
14
|
-
|
|
15
|
-
There is a combined package of backported languages from CM5. We are using this language pack for ease
|
|
16
|
-
of use (no need to add anything to your dependencies) and also there're not many CM6 languages as of
|
|
17
|
-
writing this.
|
|
18
|
-
|
|
19
|
-
// add @codemirror/legacy-modes to your project's dependencies.
|
|
20
|
-
import { javascript } from '@codemirror/legacy-modes/mode/javascript'
|
|
21
|
-
import { python } from '@codemirror/legacy-modes/mode/python'
|
|
22
|
-
|
|
23
|
-
So using a language is one import and one property assignment. See the `CodeEditor.stories.tsx`.
|
|
24
|
-
|
|
25
|
-
For more see https://github.com/codemirror/legacy-modes
|
|
26
|
-
|
|
27
|
-
## About styling/themes
|
|
28
|
-
|
|
29
|
-
CM6 is not that rich with predefined themes yet so we are not providing anything other than the
|
|
30
|
-
default theme (though it's easy provide custom ones if/when we need it.)
|
|
31
|
-
|
|
32
|
-
## Customizing the editor
|
|
33
|
-
|
|
34
|
-
For further customizations, one can use .customExtensions prop to extend the editor with
|
|
35
|
-
any CM6 extension possible. (see Code component for an example.)
|
|
36
|
-
|
|
37
|
-
For getting a handle to the actual CM6 instance one may use the .innerRef prop which refers
|
|
38
|
-
to the EditorView instance created behind the scenes. (See the story of this component)
|
|
39
|
-
*/
|
|
40
|
-
import React, { useEffect, useRef, useImperativeHandle } from 'react';
|
|
41
|
-
import cn from 'classnames';
|
|
42
|
-
import { useUID } from 'react-uid';
|
|
43
|
-
import { EditorView, highlightSpecialChars, drawSelection, highlightActiveLine, keymap, } from '@codemirror/view';
|
|
44
|
-
import { EditorState } from '@codemirror/state';
|
|
45
|
-
import { history, historyKeymap } from '@codemirror/history';
|
|
46
|
-
import { foldGutter, foldKeymap } from '@codemirror/fold';
|
|
47
|
-
import { indentOnInput } from '@codemirror/language';
|
|
48
|
-
import { lineNumbers } from '@codemirror/gutter';
|
|
49
|
-
import { defaultKeymap } from '@codemirror/commands';
|
|
50
|
-
import { bracketMatching } from '@codemirror/matchbrackets';
|
|
51
|
-
import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
|
|
52
|
-
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
|
|
53
|
-
import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
|
|
54
|
-
import { commentKeymap } from '@codemirror/comment';
|
|
55
|
-
import { rectangularSelection } from '@codemirror/rectangular-selection';
|
|
56
|
-
import { defaultHighlightStyle } from '@codemirror/highlight';
|
|
57
|
-
import { lintKeymap } from '@codemirror/lint';
|
|
58
|
-
import { StreamLanguage } from '@codemirror/stream-parser';
|
|
59
|
-
import { useDeepCompareMemo } from './hooks/useDeepCompareMemo';
|
|
60
|
-
import { Error } from './Error';
|
|
61
|
-
import styles from './CodeEditor.module.scss';
|
|
62
|
-
// Export these very common CodeMirror types for ease of use
|
|
63
|
-
export { EditorView, EditorState };
|
|
64
|
-
const DEFAULT_OPTIONS = {
|
|
65
|
-
language: null,
|
|
66
|
-
lineWrapping: false,
|
|
67
|
-
lineNumbers: true,
|
|
68
|
-
};
|
|
69
|
-
export const CodeEditor = ({ name, value, className, options = {}, onChange, onBlur, customExtensions, customKeymap, innerRef, error, errorClassName, dataTest = 'code-editor', }) => {
|
|
70
|
-
const id = useUID();
|
|
71
|
-
const parentRef = useRef(null);
|
|
72
|
-
const cm = useRef(null);
|
|
73
|
-
const optionsMemoized = useDeepCompareMemo(() => options, [options]);
|
|
74
|
-
// use onChange via a Ref so we avoid unnecessary calls if the caller does not use useCallback on onChange
|
|
75
|
-
const onChangeRef = useRef(onChange);
|
|
76
|
-
// use this handle to access the cm element (which is a `view`)
|
|
77
|
-
useImperativeHandle(innerRef, () => ({
|
|
78
|
-
view: () => cm.current,
|
|
79
|
-
}));
|
|
80
|
-
useEffect(() => {
|
|
81
|
-
if (!parentRef.current)
|
|
82
|
-
return;
|
|
83
|
-
const opts = { ...DEFAULT_OPTIONS, ...optionsMemoized };
|
|
84
|
-
const updateListenerExtension = () => EditorView.updateListener.of((v) => {
|
|
85
|
-
if (!v.docChanged)
|
|
86
|
-
return;
|
|
87
|
-
const val = v.state.doc.toString();
|
|
88
|
-
const cb = onChangeRef.current;
|
|
89
|
-
if (cb)
|
|
90
|
-
cb(val);
|
|
91
|
-
});
|
|
92
|
-
const domEventsExtension = () => {
|
|
93
|
-
const eventHandlers = {
|
|
94
|
-
blur: (event) => onBlur && onBlur(event),
|
|
95
|
-
};
|
|
96
|
-
return EditorView.domEventHandlers(eventHandlers);
|
|
97
|
-
};
|
|
98
|
-
// configure/enable very common features
|
|
99
|
-
const basicExtensions = [
|
|
100
|
-
highlightSpecialChars(),
|
|
101
|
-
history(),
|
|
102
|
-
drawSelection(),
|
|
103
|
-
EditorState.allowMultipleSelections.of(true),
|
|
104
|
-
indentOnInput(),
|
|
105
|
-
defaultHighlightStyle.fallback,
|
|
106
|
-
bracketMatching(),
|
|
107
|
-
closeBrackets(),
|
|
108
|
-
autocompletion(),
|
|
109
|
-
rectangularSelection(),
|
|
110
|
-
highlightActiveLine(),
|
|
111
|
-
highlightSelectionMatches(),
|
|
112
|
-
keymap.of([
|
|
113
|
-
...closeBracketsKeymap,
|
|
114
|
-
...defaultKeymap,
|
|
115
|
-
...searchKeymap,
|
|
116
|
-
...historyKeymap,
|
|
117
|
-
...foldKeymap,
|
|
118
|
-
...commentKeymap,
|
|
119
|
-
...completionKeymap,
|
|
120
|
-
...lintKeymap,
|
|
121
|
-
...(customKeymap !== null && customKeymap !== void 0 ? customKeymap : []),
|
|
122
|
-
]),
|
|
123
|
-
];
|
|
124
|
-
const fixedHeightExtension = () => {
|
|
125
|
-
if (!opts.rows)
|
|
126
|
-
return [];
|
|
127
|
-
const LINE_HEIGHT = 22;
|
|
128
|
-
const EXTRA_PADDING = 4;
|
|
129
|
-
const h = LINE_HEIGHT * opts.rows + EXTRA_PADDING;
|
|
130
|
-
return EditorView.theme({
|
|
131
|
-
'&': { height: `${h}px` },
|
|
132
|
-
'.cm-scroller': { overflow: 'auto' },
|
|
133
|
-
});
|
|
134
|
-
};
|
|
135
|
-
const extensions = [
|
|
136
|
-
...basicExtensions,
|
|
137
|
-
...(customExtensions !== null && customExtensions !== void 0 ? customExtensions : []),
|
|
138
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
139
|
-
...(opts.language ? [StreamLanguage.define(opts.language)] : []),
|
|
140
|
-
...(opts.lineWrapping ? [EditorView.lineWrapping] : []),
|
|
141
|
-
...(opts.lineNumbers ? [foldGutter(), lineNumbers()] : []),
|
|
142
|
-
...(opts.rows ? [fixedHeightExtension()] : []),
|
|
143
|
-
updateListenerExtension(),
|
|
144
|
-
domEventsExtension(),
|
|
145
|
-
];
|
|
146
|
-
cm.current = new EditorView({
|
|
147
|
-
state: EditorState.create({
|
|
148
|
-
doc: value || '',
|
|
149
|
-
extensions,
|
|
150
|
-
}),
|
|
151
|
-
parent: parentRef.current,
|
|
152
|
-
});
|
|
153
|
-
// set the .id attr. of the dom element (formik demands this)
|
|
154
|
-
if (name)
|
|
155
|
-
cm.current.contentDOM.id = name;
|
|
156
|
-
return () => {
|
|
157
|
-
var _a;
|
|
158
|
-
// destroy cm. (mind you; this component will be recreated whenever options are modified.)
|
|
159
|
-
(_a = cm.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
160
|
-
cm.current = null;
|
|
161
|
-
};
|
|
162
|
-
},
|
|
163
|
-
// value should not be a dependency (it is handled below), just disable the warnings:
|
|
164
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
165
|
-
[cm, optionsMemoized, customExtensions, onChangeRef]);
|
|
166
|
-
useEffect(() => {
|
|
167
|
-
if (!cm.current)
|
|
168
|
-
return;
|
|
169
|
-
// avoid recursive calls between .value and onChange listener/
|
|
170
|
-
if (value === cm.current.state.doc.toString())
|
|
171
|
-
return;
|
|
172
|
-
cm.current.dispatch({
|
|
173
|
-
changes: { from: 0, to: cm.current.state.doc.length, insert: value },
|
|
174
|
-
});
|
|
175
|
-
}, [value]);
|
|
176
|
-
return (React.createElement(React.Fragment, null,
|
|
177
|
-
React.createElement("div", { className: cn(styles.container, className), id: name, ref: parentRef, "data-test": dataTest }),
|
|
178
|
-
React.createElement(Error, { error: error, className: cn(styles.errorContainer, errorClassName), inputId: id })));
|
|
179
|
-
};
|
|
180
|
-
//# sourceMappingURL=CodeEditor.js.map
|
package/lib/CodeEditor.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../src/CodeEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
@use '../styles/constants' as c;
|
|
2
|
-
@use '../styles/helpers' as h;
|
|
3
|
-
|
|
4
|
-
.container {
|
|
5
|
-
box-shadow: 0 c.$cardShadowSize c.$cardShadowBlur 0 c.$colorShadow;
|
|
6
|
-
border-radius: c.$borderRadius;
|
|
7
|
-
|
|
8
|
-
:global .cm-editor {
|
|
9
|
-
// bogus padding to avoid overlapping with our outlineFormField mixin.
|
|
10
|
-
padding: 1px;
|
|
11
|
-
border-radius: c.$borderRadius;
|
|
12
|
-
border: c.$borderWidth solid c.$colorNeutralLight;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
:global .cm-editor.cm-focused {
|
|
16
|
-
// inherited outline just looks weird, override it
|
|
17
|
-
outline: none;
|
|
18
|
-
|
|
19
|
-
// use our own outline
|
|
20
|
-
@include h.outlineFormField;
|
|
21
|
-
|
|
22
|
-
border: c.$borderWidth solid c.$colorAccessibilityOutline;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:global .cm-scroller {
|
|
26
|
-
border-radius: c.$borderRadius;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.errorContainer {
|
|
31
|
-
margin-top: c.$grid;
|
|
32
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React, { ReactElement } from 'react';
|
|
2
|
-
import { FieldValidator } from 'formik';
|
|
3
|
-
import { CodeEditorProps } from './CodeEditor';
|
|
4
|
-
import { ExtractKeysOfValueType } from './utils/types';
|
|
5
|
-
export declare type CodeEditorFormikProps<V extends object> = CodeEditorProps & {
|
|
6
|
-
name: ExtractKeysOfValueType<V, string | undefined>;
|
|
7
|
-
validate?: FieldValidator;
|
|
8
|
-
onChange?: (value: string) => void;
|
|
9
|
-
onBlur?: (e: React.FocusEvent) => void;
|
|
10
|
-
};
|
|
11
|
-
export declare const CodeEditorFormik: <V extends object>({ name, validate, onBlur, onChange, ...props }: CodeEditorFormikProps<V>) => ReactElement;
|
package/lib/CodeEditorFormik.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useField } from 'formik';
|
|
3
|
-
import { CodeEditor } from './CodeEditor';
|
|
4
|
-
import { getFieldError } from './utils/formik';
|
|
5
|
-
export const CodeEditorFormik = ({ name, validate, onBlur, onChange, ...props }) => {
|
|
6
|
-
const [{ onBlur: onFormikBlur, value }, meta, helpers] = useField({
|
|
7
|
-
name,
|
|
8
|
-
validate,
|
|
9
|
-
});
|
|
10
|
-
const onBlurInner = React.useCallback((e) => {
|
|
11
|
-
if (onBlur) {
|
|
12
|
-
onBlur(e);
|
|
13
|
-
}
|
|
14
|
-
onFormikBlur(e);
|
|
15
|
-
}, [onBlur, onFormikBlur]);
|
|
16
|
-
return (React.createElement(CodeEditor, { ...props, name: name, value: value, onChange: (val) => {
|
|
17
|
-
if (onChange) {
|
|
18
|
-
onChange(val);
|
|
19
|
-
}
|
|
20
|
-
helpers.setValue(val);
|
|
21
|
-
}, onBlur: onBlurInner, error: getFieldError(meta) }));
|
|
22
|
-
};
|
|
23
|
-
//# sourceMappingURL=CodeEditorFormik.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditorFormik.js","sourceRoot":"","sources":["../src/CodeEditorFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAU9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAmB,EACjD,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACiB,EAAgB,EAAE;IAC3C,MAAM,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB;QACpF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,CAAC,CAAC,CAAA;SACV;QACD,YAAY,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,OACL,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,GAAW,EAAE,EAAE;YACxB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,GAAG,CAAC,CAAA;aACd;YAED,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;QACvB,CAAC,EACD,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAC1B,CACH,CAAA;AACH,CAAC,CAAA"}
|