rewrite RichTextInput to TypeScript

marmelab · Feb 3, 2020 · 5430e6e · 5430e6e
1 parent 4de9af2
commit 5430e6e
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 49 deletions.
diff --git a/packages/ra-input-rich-text/package.json b/packages/ra-input-rich-text/package.json
@@ -45,12 +45,13 @@
         "react-dom": "^16.9.0"
     },
     "dependencies": {
+        "@types/quill": "~1.3.0",
         "lodash": "~4.17.5",
-        "prop-types": "^15.6.1",
+        "prop-types": "^15.6.0",
         "quill": "~1.3.6"
     },
     "devDependencies": {
-        "cross-env": "^5.2.0",
+        "@types/prop-types": "^15.6.0",
         "rimraf": "^2.6.3"
     }
 }
diff --git a/...ut-rich-text/src/QuillBubbleStylesheet.js → ...ut-rich-text/src/QuillBubbleStylesheet.ts b/...ut-rich-text/src/QuillBubbleStylesheet.js → ...ut-rich-text/src/QuillBubbleStylesheet.ts
@@ -1,3 +1,5 @@
+import { StyleRules } from '@material-ui/core/styles';
+
 // converted from vendor (node_modules/quill/dist/quill.bubble.css) using the jss cli
 export default {
     '@global': {
@@ -452,7 +454,7 @@ export default {
         '.ql-bubble .ql-stroke-miter': {
             fill: 'none',
             stroke: '#ccc',
-            strokeMiterlimit: '10',
+            strokeMiterlimit: 10,
             strokeWidth: '2',
         },
         '.ql-bubble .ql-fill, .ql-bubble .ql-stroke.ql-fill': {
@@ -468,7 +470,7 @@ export default {
             strokeWidth: '1',
         },
         '.ql-bubble .ql-transparent': {
-            opacity: '0.4',
+            opacity: 0.4,
         },
         '.ql-bubble .ql-direction svg:last-child': {
             display: 'none',
@@ -533,7 +535,7 @@ export default {
             display: 'inline-block',
             float: 'left',
             fontSize: 14,
-            fontWeight: '500',
+            fontWeight: 500,
             height: 24,
             position: 'relative',
             verticalAlign: 'middle',
@@ -567,7 +569,7 @@ export default {
         },
         '.ql-bubble .ql-picker.ql-expanded .ql-picker-label': {
             color: '#777',
-            zIndex: '2',
+            zIndex: 2,
         },
         '.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill': {
             fill: '#777',
@@ -579,7 +581,7 @@ export default {
             display: 'block',
             marginTop: -1,
             top: '100%',
-            zIndex: '1',
+            zIndex: 1,
         },
         '.ql-bubble .ql-color-picker, .ql-bubble .ql-icon-picker': {
             width: 28,
@@ -785,7 +787,7 @@ export default {
             overflow: 'hidden',
             padding: '5px 15px',
             textDecoration: 'none',
-            zIndex: '1',
+            zIndex: 1,
         },
         '.ql-container.ql-bubble:not(.ql-disabled) a::after': {
             borderTop: '6px solid #444',
@@ -808,4 +810,4 @@ export default {
             visibility: 'visible',
         },
     },
-};
+} as StyleRules;
diff --git a/...nput-rich-text/src/QuillSnowStylesheet.js → ...nput-rich-text/src/QuillSnowStylesheet.ts b/...nput-rich-text/src/QuillSnowStylesheet.js → ...nput-rich-text/src/QuillSnowStylesheet.ts
@@ -1,3 +1,5 @@
+import { StyleRules } from '@material-ui/core/styles';
+
 // converted from vendor (node_modules/quill/dist/quill.snow.css) using the jss cli
 export default {
     '.ql-container': {
@@ -454,7 +456,7 @@ export default {
     '.ql-snow .ql-stroke-miter': {
         fill: 'none',
         stroke: '#444',
-        strokeMiterlimit: '10',
+        strokeMiterlimit: 10,
         strokeWidth: '2',
     },
     '.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill': {
@@ -470,7 +472,7 @@ export default {
         strokeWidth: '1',
     },
     '.ql-snow .ql-transparent': {
-        opacity: '0.4',
+        opacity: 0.4,
     },
     '.ql-snow .ql-direction svg:last-child': {
         display: 'none',
@@ -535,7 +537,7 @@ export default {
         display: 'inline-block',
         float: 'left',
         fontSize: 14,
-        fontWeight: '500',
+        fontWeight: 500,
         height: 24,
         position: 'relative',
         verticalAlign: 'middle',
@@ -569,7 +571,7 @@ export default {
     },
     '.ql-snow .ql-picker.ql-expanded .ql-picker-label': {
         color: '#ccc',
-        zIndex: '2',
+        zIndex: 2,
     },
     '.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill': {
         fill: '#ccc',
@@ -581,7 +583,7 @@ export default {
         display: 'block',
         marginTop: -1,
         top: '100%',
-        zIndex: '1',
+        zIndex: 1,
     },
     '.ql-snow .ql-color-picker, .ql-snow .ql-icon-picker': {
         width: 28,
@@ -797,4 +799,4 @@ export default {
     '.ql-container.ql-snow': {
         border: '1px solid #ccc',
     },
-};
+} as StyleRules;
diff --git a/packages/ra-input-rich-text/src/index.js → packages/ra-input-rich-text/src/index.tsx b/packages/ra-input-rich-text/src/index.js → packages/ra-input-rich-text/src/index.tsx
@@ -1,34 +1,69 @@
 import debounce from 'lodash/debounce';
-import React, { useRef, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import Quill from 'quill';
+import React, {
+    useRef,
+    useEffect,
+    useCallback,
+    FunctionComponent,
+    ComponentProps,
+} from 'react';
+import Quill, { QuillOptionsStatic } from 'quill';
 import { useInput, FieldTitle } from 'ra-core';
 import { InputHelperText } from 'ra-ui-materialui';
-import { FormHelperText, FormControl, InputLabel } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import {
+    FormHelperText,
+    FormControl,
+    InputLabel,
+    PropTypes as MuiPropTypes,
+    makeStyles,
+} from '@material-ui/core';
+import PropTypes from 'prop-types';
 
 import styles from './styles';
 
 const useStyles = makeStyles(styles, { name: 'RaRichTextInput' });
 
-const RichTextInput = ({
-    options = {}, // Quill editor options
-    record = {},
-    toolbar = true,
-    fullWidth = true,
-    configureQuill,
-    helperText = false,
-    label,
-    source,
-    resource,
-    variant,
-    margin = 'dense',
-    ...rest
-}) => {
-    const classes = useStyles();
-    const quillInstance = useRef();
-    const divRef = useRef();
-    const editor = useRef();
+interface Props {
+    label?: string | false;
+    options?: QuillOptionsStatic;
+    source: string;
+    toolbar?:
+        | boolean
+        | string[]
+        | Array<any>[]
+        | string
+        | {
+              container: string | string[] | Array<any>[];
+              handlers?: Record<string, Function>;
+          };
+    fullWidth?: boolean;
+    configureQuill?: (instance: Quill) => void;
+    helperText?: ComponentProps<typeof InputHelperText>['helperText'];
+    record?: Record<any, any>;
+    resource?: string;
+    variant?: string;
+    margin?: MuiPropTypes.Margin;
+    [key: string]: any;
+}
+
+const RichTextInput: FunctionComponent<Props> = props => {
+    const {
+        options = {}, // Quill editor options
+        record = {},
+        toolbar = true,
+        fullWidth = true,
+        configureQuill,
+        helperText = false,
+        label,
+        source,
+        resource,
+        variant,
+        margin = 'dense',
+        ...rest
+    } = props;
+    const classes = useStyles(props);
+    const quillInstance = useRef<Quill>();
+    const divRef = useRef<HTMLDivElement>();
+    const editor = useRef<HTMLElement>();
 
     const {
         id,
@@ -127,14 +162,6 @@ RichTextInput.propTypes = {
     label: PropTypes.string,
     options: PropTypes.object,
     source: PropTypes.string,
-    toolbar: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.bool,
-        PropTypes.shape({
-            container: PropTypes.array,
-            handlers: PropTypes.object,
-        }),
-    ]),
     fullWidth: PropTypes.bool,
     configureQuill: PropTypes.func,
 };

diff --git a/packages/ra-input-rich-text/src/styles.js → packages/ra-input-rich-text/src/styles.ts b/packages/ra-input-rich-text/src/styles.js → packages/ra-input-rich-text/src/styles.ts
@@ -1,10 +1,13 @@
+import { Theme, StyleRules } from '@material-ui/core/styles';
+
 import QuillSnowStylesheet from './QuillSnowStylesheet';
 
-export default theme => ({
+export default (theme: Theme): StyleRules<string, any> => ({
     label: {
         position: 'relative',
     },
-    '@global': Object.assign({}, QuillSnowStylesheet, {
+    '@global': {
+        ...QuillSnowStylesheet,
         '.ra-rich-text-input': {
             '& .ql-editor': {
                 fontSize: '1rem',
@@ -138,5 +141,5 @@ export default theme => ({
                 },
             },
         },
-    }),
+    },
 });