@formatjs/editor 1.1.48 → 1.3.0

package/lib/index.js

@@ -1,116 +0,0 @@
-import { __awaiter, __generator } from "tslib";
-import React, { useEffect, useState } from 'react';
-import { useMediaQuery, createMuiTheme, ThemeProvider, CssBaseline, Grid, TextField, AppBar, Toolbar, Box, Typography, ButtonGroup, Button, Tabs, Tab, IconButton, Drawer, List, ListItem, ListItemText, } from '@material-ui/core';
-import { Menu, AddAlert, NotificationsOff } from '@material-ui/icons';
-import Header from './header';
-import { IntlProvider, useIntl } from 'react-intl';
-import Messages from './messages';
-var MESSAGES_COUNT = 50;
-function fetchData() {
-    return __awaiter(this, void 0, void 0, function () {
-        var en, ru;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, fetch('/fixtures/en.json')];
-                case 1: return [4 /*yield*/, (_a.sent()).json()];
-                case 2:
-                    en = _a.sent();
-                    return [4 /*yield*/, fetch('/fixtures/ru.json')];
-                case 3: return [4 /*yield*/, (_a.sent()).json()];
-                case 4:
-                    ru = _a.sent();
-                    return [2 /*return*/, Object.keys(en)
-                            .slice(MESSAGES_COUNT)
-                            .map(function (id) { return ({
-                            id: id,
-                            defaultMessage: en[id],
-                            translatedMessage: ru[id],
-                        }); })];
-            }
-        });
-    });
-}
-export function CoreApp() {
-    var intl = useIntl();
-    var _a = useState([]), messages = _a[0], setMessages = _a[1];
-    var _b = useState(true), isLoading = _b[0], setIsLoading = _b[1];
-    useEffect(function () {
-        ;
-        (function () {
-            return __awaiter(this, void 0, void 0, function () {
-                var _a;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
-                        case 0:
-                            _a = setMessages;
-                            return [4 /*yield*/, fetchData()];
-                        case 1:
-                            _a.apply(void 0, [_b.sent()]);
-                            setIsLoading(false);
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        })();
-    }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(CssBaseline, null),
-        React.createElement(Box, { height: "100vh" },
-            React.createElement(AppBar, { position: "static" },
-                React.createElement(Toolbar, { variant: "dense" },
-                    React.createElement(IconButton, { edge: "start", color: "inherit", "aria-label": "menu" },
-                        React.createElement(Menu, null)),
-                    React.createElement(Drawer, { anchor: "left" },
-                        React.createElement(List, null, ['Inbox', 'Starred', 'Send email', 'Drafts'].map(function (text) { return (React.createElement(ListItem, { button: true, key: text },
-                            React.createElement(ListItemText, { primary: text }))); }))),
-                    React.createElement(Header, null),
-                    React.createElement(AddAlert, null),
-                    React.createElement(NotificationsOff, null))),
-            React.createElement(Grid, { container: true, spacing: 0 },
-                React.createElement(Grid, { xs: 3 },
-                    React.createElement("form", { noValidate: true, autoComplete: "off" },
-                        React.createElement(TextField, { type: "search", fullWidth: true, margin: "none", size: "small", variant: "filled", label: intl.formatMessage({
-                                id: 'search-bar-label',
-                                defaultMessage: 'Search message',
-                                description: 'label in search bar',
-                            }) })),
-                    React.createElement(Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 108px)" },
-                        React.createElement(Messages, { messages: messages, isLoading: isLoading, count: MESSAGES_COUNT }))),
-                React.createElement(Grid, { xs: 6 },
-                    React.createElement(Box, { borderRight: 1, overflow: "auto", height: "calc(100vh - 48px)" },
-                        React.createElement(Box, { p: 2 },
-                            React.createElement(Typography, { variant: "h6", component: "h6" }, "English message"),
-                            React.createElement(Typography, { variant: "body2", component: "span" },
-                                "Description",
-                                ' ',
-                                React.createElement(Typography, { variant: "body2", color: "textSecondary", component: "span" }, "This is a description"))),
-                        React.createElement(TextField, { multiline: true, fullWidth: true, margin: "dense", size: "small", variant: "filled", rows: 4, label: intl.formatMessage({
-                                id: 'translated-box-label',
-                                defaultMessage: 'Translate',
-                                description: 'translated box label',
-                            }) }),
-                        React.createElement(Box, { px: 2, py: 1, display: "flex", justifyContent: "space-between", alignItems: "center" },
-                            React.createElement(Typography, { variant: "body2", component: "span" }, "71 / 101"),
-                            React.createElement(Box, null,
-                                React.createElement(ButtonGroup, { variant: "text", color: "primary", "aria-label": "text primary button group" },
-                                    React.createElement(Button, null, "Copy"),
-                                    React.createElement(Button, null, "Clear")),
-                                React.createElement(Button, { variant: "contained", color: "primary" }, "Translate"))))),
-                React.createElement(Grid, { xs: 3 },
-                    React.createElement(Tabs, { indicatorColor: "primary", textColor: "primary", centered: true, "aria-label": "disabled tabs example", value: 0, variant: "fullWidth" },
-                        React.createElement(Tab, { label: "Active" }),
-                        React.createElement(Tab, { label: "Active" })))))));
-}
-export default function App() {
-    var prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-    var theme = React.useMemo(function () {
-        return createMuiTheme({
-            palette: {
-                type: prefersDarkMode ? 'dark' : 'light',
-            },
-        });
-    }, [prefersDarkMode]);
-    return (React.createElement(IntlProvider, { locale: "en", messages: {} },
-        React.createElement(ThemeProvider, { theme: theme },
-            React.createElement(CoreApp, null))));
-}

package/lib/main.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=main.d.ts.map

package/lib/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/main.tsx"],"names":[],"mappings":""}

package/lib/main.js

@@ -1,4 +0,0 @@
-import Main from '.';
-import ReactDOM from 'react-dom';
-import React from 'react';
-ReactDOM.render(React.createElement(Main, null), document.getElementById('main'));

package/lib/message.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface Props {
-    message: string;
-}
-declare const Message: React.FC<Props>;
-export default Message;
-//# sourceMappingURL=message.d.ts.map

package/lib/message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAuFD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAG5B,CAAA;AAED,eAAe,OAAO,CAAA"}

package/lib/message.js

@@ -1,45 +0,0 @@
-import { __spreadArray } from "tslib";
-import React from 'react';
-import { Chip, Avatar } from '@material-ui/core';
-import { parse, isLiteralElement, isNumberElement, isDateElement, isTimeElement, isTagElement, isArgumentElement, isPoundElement, } from '@formatjs/icu-messageformat-parser';
-import { CallSplit, Event, Schedule } from '@material-ui/icons';
-function formatAst(ast) {
-    var els = [];
-    for (var _i = 0, ast_1 = ast; _i < ast_1.length; _i++) {
-        var el = ast_1[_i];
-        if (isLiteralElement(el)) {
-            els.push(el.value);
-        }
-        else if (isArgumentElement(el)) {
-            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, disabled: true }));
-        }
-        else if (isPoundElement(el)) {
-            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: "#", disabled: true }));
-        }
-        else if (isNumberElement(el)) {
-            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null, "N"), disabled: true }));
-        }
-        else if (isDateElement(el)) {
-            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null,
-                    React.createElement(Event, { fontSize: "small" })), disabled: true }));
-        }
-        else if (isTimeElement(el)) {
-            els.push(React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null,
-                    React.createElement(Schedule, { fontSize: "small" })), disabled: true }));
-        }
-        else if (isTagElement(el)) {
-            els.push.apply(els, __spreadArray(__spreadArray([React.createElement(Chip, { variant: "outlined", size: "small", label: "<".concat(el.value, ">"), disabled: true })], formatAst(el.children), false), [React.createElement(Chip, { variant: "outlined", size: "small", label: "</".concat(el.value, ">"), disabled: true })], false));
-        }
-        else {
-            els.push.apply(els, __spreadArray([React.createElement(Chip, { variant: "outlined", size: "small", label: el.value, avatar: React.createElement(Avatar, null,
-                        React.createElement(CallSplit, { fontSize: "small" })), disabled: true })], formatAst(el.options.other.value), false));
-        }
-    }
-    return els;
-}
-var Message = function (_a) {
-    var message = _a.message;
-    var ast = parse(message);
-    return React.createElement(React.Fragment, null, formatAst(ast));
-};
-export default Message;

package/lib/messages.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { TranslatedMessage } from './types';
-export interface Props {
-    messages: TranslatedMessage[];
-    isLoading?: boolean;
-    count: number;
-}
-declare const Messages: React.FC<Props>;
-export default Messages;
-//# sourceMappingURL=messages.d.ts.map

package/lib/messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/messages.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,iBAAiB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwB7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/lib/messages.js

@@ -1,21 +0,0 @@
-import { List, ListItem, Box } from '@material-ui/core';
-import { CheckCircle } from '@material-ui/icons';
-import { Skeleton } from '@material-ui/lab';
-import React from 'react';
-import Message from './message';
-var Messages = function (_a) {
-    var messages = _a.messages, isLoading = _a.isLoading, count = _a.count;
-    if (isLoading) {
-        var placeholders = [];
-        for (var i = 0; i < count; i++) {
-            placeholders.push(React.createElement(ListItem, { key: i, dense: true, divider: true },
-                React.createElement(Skeleton, { width: "100%", height: 60 })));
-        }
-        return React.createElement(List, { dense: true }, placeholders);
-    }
-    return (React.createElement(List, { dense: true }, messages.map(function (m) { return (React.createElement(ListItem, { key: m.id, dense: true, divider: true, alignItems: "flex-start" },
-        React.createElement(CheckCircle, null),
-        React.createElement(Box, { component: "span", paddingLeft: 1 },
-            React.createElement(Message, { message: m.defaultMessage })))); })));
-};
-export default Messages;

package/lib/types.d.ts

@@ -1,6 +0,0 @@
-export interface TranslatedMessage {
-    id: string;
-    defaultMessage: string;
-    translatedMessage: string;
-}
-//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/editor/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;CAC1B"}

package/lib/types.js

@@ -1 +0,0 @@
-export {};

package/main.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=main.d.ts.map

package/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/main.tsx"],"names":[],"mappings":""}

package/main.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var _1 = (0, tslib_1.__importDefault)(require("."));
-var react_dom_1 = (0, tslib_1.__importDefault)(require("react-dom"));
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-react_dom_1.default.render(react_1.default.createElement(_1.default, null), document.getElementById('main'));

package/message.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface Props {
-    message: string;
-}
-declare const Message: React.FC<Props>;
-export default Message;
-//# sourceMappingURL=message.d.ts.map

package/message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAuFD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAG5B,CAAA;AAED,eAAe,OAAO,CAAA"}

package/message.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var core_1 = require("@material-ui/core");
-var icu_messageformat_parser_1 = require("@formatjs/icu-messageformat-parser");
-var icons_1 = require("@material-ui/icons");
-function formatAst(ast) {
-    var els = [];
-    for (var _i = 0, ast_1 = ast; _i < ast_1.length; _i++) {
-        var el = ast_1[_i];
-        if ((0, icu_messageformat_parser_1.isLiteralElement)(el)) {
-            els.push(el.value);
-        }
-        else if ((0, icu_messageformat_parser_1.isArgumentElement)(el)) {
-            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, disabled: true }));
-        }
-        else if ((0, icu_messageformat_parser_1.isPoundElement)(el)) {
-            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: "#", disabled: true }));
-        }
-        else if ((0, icu_messageformat_parser_1.isNumberElement)(el)) {
-            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null, "N"), disabled: true }));
-        }
-        else if ((0, icu_messageformat_parser_1.isDateElement)(el)) {
-            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null,
-                    react_1.default.createElement(icons_1.Event, { fontSize: "small" })), disabled: true }));
-        }
-        else if ((0, icu_messageformat_parser_1.isTimeElement)(el)) {
-            els.push(react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null,
-                    react_1.default.createElement(icons_1.Schedule, { fontSize: "small" })), disabled: true }));
-        }
-        else if ((0, icu_messageformat_parser_1.isTagElement)(el)) {
-            els.push.apply(els, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: "<".concat(el.value, ">"), disabled: true })], formatAst(el.children), false), [react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: "</".concat(el.value, ">"), disabled: true })], false));
-        }
-        else {
-            els.push.apply(els, (0, tslib_1.__spreadArray)([react_1.default.createElement(core_1.Chip, { variant: "outlined", size: "small", label: el.value, avatar: react_1.default.createElement(core_1.Avatar, null,
-                        react_1.default.createElement(icons_1.CallSplit, { fontSize: "small" })), disabled: true })], formatAst(el.options.other.value), false));
-        }
-    }
-    return els;
-}
-var Message = function (_a) {
-    var message = _a.message;
-    var ast = (0, icu_messageformat_parser_1.parse)(message);
-    return react_1.default.createElement(react_1.default.Fragment, null, formatAst(ast));
-};
-exports.default = Message;

package/messages.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { TranslatedMessage } from './types';
-export interface Props {
-    messages: TranslatedMessage[];
-    isLoading?: boolean;
-    count: number;
-}
-declare const Messages: React.FC<Props>;
-export default Messages;
-//# sourceMappingURL=messages.d.ts.map

package/messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/messages.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,iBAAiB,EAAE,CAAA;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwB7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/messages.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var core_1 = require("@material-ui/core");
-var icons_1 = require("@material-ui/icons");
-var lab_1 = require("@material-ui/lab");
-var react_1 = (0, tslib_1.__importDefault)(require("react"));
-var message_1 = (0, tslib_1.__importDefault)(require("./message"));
-var Messages = function (_a) {
-    var messages = _a.messages, isLoading = _a.isLoading, count = _a.count;
-    if (isLoading) {
-        var placeholders = [];
-        for (var i = 0; i < count; i++) {
-            placeholders.push(react_1.default.createElement(core_1.ListItem, { key: i, dense: true, divider: true },
-                react_1.default.createElement(lab_1.Skeleton, { width: "100%", height: 60 })));
-        }
-        return react_1.default.createElement(core_1.List, { dense: true }, placeholders);
-    }
-    return (react_1.default.createElement(core_1.List, { dense: true }, messages.map(function (m) { return (react_1.default.createElement(core_1.ListItem, { key: m.id, dense: true, divider: true, alignItems: "flex-start" },
-        react_1.default.createElement(icons_1.CheckCircle, null),
-        react_1.default.createElement(core_1.Box, { component: "span", paddingLeft: 1 },
-            react_1.default.createElement(message_1.default, { message: m.defaultMessage })))); })));
-};
-exports.default = Messages;

package/types.d.ts

@@ -1,6 +0,0 @@
-export interface TranslatedMessage {
-    id: string;
-    defaultMessage: string;
-    translatedMessage: string;
-}
-//# sourceMappingURL=types.d.ts.map

package/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../packages/editor/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;CAC1B"}

package/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });