@applica-software-guru/react-admin 1.3.159 → 1.3.161

package/package.json

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

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

@@ -0,0 +1,106 @@
+import { FieldTitle, useRecordContext, useResourceContext } from 'react-admin';
+import { InputLabel, Tooltip, Typography } from '@mui/material';
+import React, { Fragment, useMemo } from 'react';
+
+import { get } from 'lodash';
+import { styled } from '@mui/material/styles';
+import { useAppConfig, useSx } from '../../hooks';
+
+const StyledField = styled('div')(({ theme, fullWidth }: { theme: any; fullWidth: boolean }) => ({
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  paddingTop: theme.spacing(1),
+  paddingBottom: theme.spacing(1),
+  marginBottom: theme.spacing(1),
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  width: fullWidth ? '100%' : 'auto',
+  [theme.breakpoints.down('sm')]: {
+    whiteSpace: 'normal',
+    overflow: 'visible',
+    textOverflow: 'inherit'
+  }
+}));
+
+export type BasicFieldProps = {
+  source: string;
+  defaultValue: any;
+  record: any;
+};
+
+const BasicField = ({ source, defaultValue = ' ', ...props }: BasicFieldProps) => {
+  const record = useRecordContext(props);
+  const value = get(record, source, defaultValue);
+  return <Typography {...props} dangerouslySetInnerHTML={{ __html: value && value !== null ? value : defaultValue }} />;
+};
+
+export type ContentWrapperProps = {
+  title: string | boolean;
+  children: React.ReactNode;
+};
+
+const ContentWrapper = ({ title, children }: ContentWrapperProps) => {
+  if (children === null || children === undefined) return null;
+  if (typeof title === 'string' || title === true) {
+    return (
+      <Tooltip title={title} placement="top">
+        {children as React.ReactElement<any, any>}
+      </Tooltip>
+    );
+  }
+  return children as React.ReactElement<any, any>;
+};
+
+export type ReadonlyFieldProps = {
+  defaultValue: any;
+  tooltip: string | boolean | ((record: any) => string);
+  source: string;
+  label: string;
+  name: string;
+  children: React.ReactElement<any, any>;
+  fullWidth?: boolean;
+};
+
+const ReadonlyField = ({
+  label,
+  source,
+  defaultValue = '&nbsp;',
+  children = <BasicField source={''} defaultValue={undefined} record={undefined} />,
+  tooltip: _tooltip,
+  ...props
+}: ReadonlyFieldProps) => {
+  const { getCurrentDialog } = useAppConfig();
+  const record = useRecordContext(props);
+  const resource = useResourceContext(props as any);
+  const dialogResource = getCurrentDialog();
+
+  const tooltip = useMemo(() => {
+    if (_tooltip === false) return false;
+    if (typeof _tooltip === 'function') return _tooltip(record);
+    if (typeof _tooltip === 'string') {
+      return get(record, _tooltip, _tooltip);
+    }
+    return _tooltip;
+  }, [record, _tooltip]);
+
+  const sx = useSx(props, { width: props?.fullWidth ? '100%' : 'auto' });
+  return (
+    <ContentWrapper title={tooltip}>
+      <Fragment>
+        <InputLabel sx={{ pt: 1 }}>
+          <FieldTitle label={label} source={source} resource={dialogResource || resource} />
+        </InputLabel>
+        <StyledField {...props}>
+          {React.cloneElement(children, {
+            source,
+            record,
+            defaultValue,
+            resource: dialogResource || resource,
+            sx
+          })}
+        </StyledField>
+      </Fragment>
+    </ContentWrapper>
+  );
+};
+export default ReadonlyField;

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

@@ -1,105 +0,0 @@
-import { FieldTitle, useRecordContext, useResourceContext } from 'react-admin';
-import { InputLabel, Tooltip } from '@mui/material';
-import React, { Fragment, useMemo } from 'react';
-
-import PropTypes from 'prop-types';
-import { get } from 'lodash';
-import { styled } from '@mui/material/styles';
-import { useAppConfig } from '../../hooks';
-
-const StyledField = styled('div')(({ theme }) => ({
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  paddingTop: theme.spacing(1),
-  paddingBottom: theme.spacing(1),
-  marginBottom: theme.spacing(1),
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  [theme.breakpoints.down('sm')]: {
-    whiteSpace: 'normal',
-    overflow: 'visible',
-    textOverflow: 'inherit'
-  }
-}));
-
-const BasicField = ({ source, defaultValue, ...props }) => {
-  const record = useRecordContext(props);
-  const value = get(record, source, defaultValue);
-  return <span dangerouslySetInnerHTML={{ __html: value && value !== null ? value : defaultValue }} />;
-};
-
-BasicField.propTypes = {
-  defaultValue: PropTypes.any,
-  source: PropTypes.string,
-  record: PropTypes.object
-};
-
-BasicField.defaultProps = {
-  defaultValue: '&nbsp;'
-};
-
-const ContentWrapper = ({ title, children }) => {
-  if (title && title !== false) {
-    return (
-      <Tooltip title={title} placement="top">
-        {children}
-      </Tooltip>
-    );
-  }
-  return children;
-};
-
-ContentWrapper.propTypes = {
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-};
-
-const ReadonlyField = ({ label, source, defaultValue, children, tooltip: _tooltip, ...props }) => {
-  const { getCurrentDialog } = useAppConfig();
-  const record = useRecordContext(props);
-  const resource = useResourceContext(props);
-  const dialogResource = getCurrentDialog();
-
-  const tooltip = useMemo(() => {
-    if (!_tooltip || _tooltip === false) return false;
-    if (typeof _tooltip === 'function') return _tooltip(record);
-    if (typeof _tooltip === 'string') {
-      return get(record, _tooltip, _tooltip);
-    }
-    return _tooltip;
-  }, [record, _tooltip]);
-
-  return (
-    <ContentWrapper title={tooltip}>
-      <Fragment>
-        <InputLabel>
-          <FieldTitle label={label} source={source} resource={dialogResource || resource} />
-        </InputLabel>
-        <StyledField {...props}>
-          {React.cloneElement(children, {
-            source,
-            record,
-            defaultValue,
-            resource: dialogResource || resource
-          })}
-        </StyledField>
-      </Fragment>
-    </ContentWrapper>
-  );
-};
-
-ReadonlyField.propTypes = {
-  defaultValue: PropTypes.any,
-  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.func]),
-  source: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  children: PropTypes.element
-};
-
-ReadonlyField.defaultProps = {
-  defaultValue: '&nbsp;',
-  children: <BasicField />
-};
-
-export default ReadonlyField;