@applica-software-guru/react-admin 1.3.149 → 1.3.151

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './time';
 export * from './lang';
+export * from './localizedValue';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC"}

package/dist/utils/localizedValue.d.ts

@@ -0,0 +1,11 @@
+type ILocalizedValue<T> = {
+    [key: string]: T;
+};
+declare function localizedValueHasAllLocales<T>(value?: ILocalizedValue<T>, locales?: Array<{
+    name: string;
+    locale: string;
+}>, options?: {
+    isEmpty?: (v: T) => boolean;
+}): boolean;
+export { localizedValueHasAllLocales };
+//# sourceMappingURL=localizedValue.d.ts.map

package/dist/utils/localizedValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localizedValue.d.ts","sourceRoot":"","sources":["../../../src/utils/localizedValue.ts"],"names":[],"mappings":"AACA,KAAK,eAAe,CAAC,CAAC,IAAI;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;CAAE,CAAC;AAE/C,iBAAS,2BAA2B,CAAC,CAAC,EACpC,KAAK,GAAE,eAAe,CAAC,CAAC,CAAM,EAC9B,OAAO,GAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAM,EACrD,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;CAAO,GAC5C,OAAO,CAIT;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.149",
+  "version": "1.3.151",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/ra-fields/LocalizedTextField.tsx

@@ -0,0 +1,46 @@
+import _ from 'lodash';
+import { TextFieldProps } from 'ra-ui-materialui';
+import { Stack, Typography, useTheme } from '@mui/material';
+import { useLocaleState, useLocales, useRecordContext } from 'ra-core';
+import TextField from './TextField';
+import { FlagOutlined, FlagFilled } from '@ant-design/icons';
+import { useSx } from '../../hooks';
+import { localizedValueHasAllLocales } from '../../utils';
+import { ReactElement, useMemo } from 'react';
+import { Tooltip } from '../@extended';
+
+type ILocalizedTextFieldProps = TextFieldProps;
+
+function LocalizedTextField(props: ILocalizedTextFieldProps) {
+  const theme = useTheme(),
+    locales = useLocales(),
+    { source = '' } = props,
+    record = useRecordContext(props),
+    value = record[source],
+    isMissingLocalizations = !localizedValueHasAllLocales(value, locales),
+    sx = useSx(props, { flex: 1 }),
+    [currentLocale] = useLocaleState(),
+    IconElement: ReactElement = useMemo(() => {
+      return isMissingLocalizations ? <FlagFilled style={{ color: theme.palette.warning.main }} /> : <FlagOutlined />;
+    }, [isMissingLocalizations]),
+    tooltipTitle = useMemo(() => {
+      return (
+        <Stack>
+          {_.map(locales, (l, index) => {
+            return <Typography key={index}>{`${l.locale.toUpperCase()}: ${(value ?? {})[l.locale] ?? ''}`}</Typography>;
+          })}
+        </Stack>
+      );
+    }, [value, locales]);
+
+  return (
+    <Tooltip title={tooltipTitle} arrow={false}>
+      <Stack alignItems="center" direction="row" gap={1}>
+        {IconElement}
+        <TextField {...props} source={`${source}.${currentLocale}`} sx={sx} />
+      </Stack>
+    </Tooltip>
+  );
+}
+
+export default LocalizedTextField;

package/src/components/ra-fields/index.jsx

@@ -7,6 +7,7 @@ import EmailField from './EmailField';
 import FileField from './FileField';
 import FunctionField from './FunctionField';
 import ImageField from './ImageField';
+import LocalizedTextField from './LocalizedTextField';
 import ReadonlyField from './ReadonlyField';
 import ReferenceManyField from './ReferenceManyField';
 import SizeField from './SizeField';
@@ -21,6 +22,7 @@ export {
   FileField,
   FunctionField,
   ImageField,
+  LocalizedTextField,
   ReadonlyField,
   ReferenceManyField,
   SizeField,

package/src/components/ra-inputs/LocalizedTextInput.tsx

@@ -0,0 +1,77 @@
+import _ from 'lodash';
+import { ReactElement, useCallback, useMemo, useState } from 'react';
+import { Box, Chip, ListItemText, Menu, MenuItem, PopoverOrigin, Typography } from '@mui/material';
+import { useInput, useLocaleState, useLocales } from 'ra-core';
+import { TextInputProps } from 'ra-ui-materialui';
+import TextInput from './TextInput';
+import { localizedValueHasAllLocales } from '../../utils';
+import { useWatch } from 'react-hook-form';
+import LabeledInput, { LabeledInputProps } from './LabeledInput';
+
+type ILocalizedTextInputProps = TextInputProps & LabeledInputProps;
+
+const ANCHOR_ORIGIN: PopoverOrigin = { vertical: 'bottom', horizontal: 'right' },
+  TRANSFORM_ORIGIN: PopoverOrigin = { vertical: 'top', horizontal: 'right' };
+
+function LocalizedTextInput(props: ILocalizedTextInputProps) {
+  const { source } = props,
+    { fieldState } = useInput(props),
+    value = useWatch({ name: source }),
+    { error } = fieldState,
+    locales = useLocales(),
+    isMissingLocalizations = !localizedValueHasAllLocales(value, locales),
+    [currentLocale] = useLocaleState(),
+    [locale, setLocale] = useState(currentLocale),
+    [anchorEl, setAnchorEl] = useState<null | HTMLDivElement>(null),
+    open = Boolean(anchorEl),
+    toggle = useCallback((e: React.MouseEvent<HTMLDivElement>) => setAnchorEl(open ? null : e.currentTarget), [open, setAnchorEl]),
+    handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]),
+    MenuItems: Array<ReactElement> = useMemo(() => {
+      return _.map(locales, (l, index) => {
+        return (
+          <MenuItem
+            key={index}
+            onClick={() => {
+              setLocale(l.locale);
+              handleClose();
+            }}
+          >
+            <ListItemText primary={`${l.locale.toUpperCase()}: ${(value ?? {})[l.locale] ?? ''}`} />
+          </MenuItem>
+        );
+      });
+    }, [locales, setLocale, handleClose, value]);
+
+  return (
+    <LabeledInput {...props} helperText={error?.message}>
+      <Box flex={1}>
+        {_.map(locales, (l, index) => {
+          return (
+            <TextInput
+              key={index}
+              {...props}
+              source={`${source}.${l.locale}`}
+              sx={{ width: '100%', display: l.locale === locale ? 'inline-flex' : 'none' }}
+              label={false}
+              InputProps={{
+                endAdornment: (
+                  <Chip
+                    label={<Typography variant="button">{locale}</Typography>}
+                    size="small"
+                    onClick={toggle}
+                    color={isMissingLocalizations ? 'warning' : undefined}
+                  />
+                )
+              }}
+            />
+          );
+        })}
+        <Menu anchorEl={anchorEl} open={open} anchorOrigin={ANCHOR_ORIGIN} transformOrigin={TRANSFORM_ORIGIN} onClose={handleClose}>
+          {MenuItems}
+        </Menu>
+      </Box>
+    </LabeledInput>
+  );
+}
+
+export default LocalizedTextInput;

package/src/components/ra-inputs/index.jsx

@@ -9,6 +9,7 @@ import FileInput from './FileInput';
 import ImageInput from './ImageInput';
 import LabeledArrayInput from './LabeledArrayInput';
 import LabeledInput from './LabeledInput';
+import LocalizedTextInput from './LocalizedTextInput';
 import NumberInput from './NumberInput';
 import RecordInput from './RecordInput';
 import ReferenceArrayInput from './ReferenceArrayInput';
@@ -32,6 +33,7 @@ export {
   ImageInput,
   LabeledArrayInput,
   LabeledInput,
+  LocalizedTextInput,
   NumberInput,
   RecordInput,
   ReferenceArrayInput,

package/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './time';
 export * from './lang';
+export * from './localizedValue';

package/src/utils/localizedValue.ts

@@ -0,0 +1,14 @@
+import _ from 'lodash';
+type ILocalizedValue<T> = { [key: string]: T };
+
+function localizedValueHasAllLocales<T>(
+  value: ILocalizedValue<T> = {},
+  locales: Array<{ name: string; locale: string }> = [],
+  options: { isEmpty?: (v: T) => boolean } = {}
+): boolean {
+  const { isEmpty = _.isEmpty } = options;
+
+  return !_.some(locales, (l) => isEmpty((value ?? {})[l.locale]));
+}
+
+export { localizedValueHasAllLocales };