refactor!: Match PrismInput API to HighlightInput

Author: zane

src/PrismInput.jsx

@@ -79,23 +79,21 @@ Prism.languages.iql = {
 };
 
 const PrismInput = React.forwardRef(
-  ({ code, disabled, setCode, ...props }, forwardedRef) => {
+  ({ disabled, indentation, onChange, onKeyDown, value }, forwardedRef) => {
     const ref = forwardedRef ?? useRef();
-    const onChange = useCallback(
+
+    const handleChange = useCallback(
       (newCode) => {
         // https://github.com/FormidableLabs/use-editable/issues/8#issuecomment-817390829
-        setCode(newCode.slice(0, -1));
+        onChange(newCode.slice(0, -1));
       },
-      [setCode]
+      [onChange]
     );
 
-    useEditable(ref, onChange, {
-      disabled,
-      indentation: 2,
-    });
+    useEditable(ref, handleChange, { disabled, indentation });
 
-    const onKeyDown = (event, ...params) => {
-      if (props.onKeyDown) props.onKeyDown(event, ...params);
+    const handleKeyDown = (event, ...params) => {
+      if (onKeyDown) onKeyDown(event, ...params);
       if (event.key === 'Backspace' && event.altKey) {
         // Without this only one character is deleted.
         event.stopPropagation();
@@ -110,13 +108,13 @@ const PrismInput = React.forwardRef(
         {...defaultProps}
         Prism={Prism}
         theme={theme}
-        code={code}
+        code={value}
         language="iql"
       >
         {({ className, style, tokens, getTokenProps }) => (
           <Code
             className={className}
-            onKeyDown={onKeyDown}
+            onKeyDown={handleKeyDown}
             ref={ref}
             style={{
               display: 'block',
@@ -151,14 +149,17 @@ PrismInput.displayName = 'PrismInput';
 export default PrismInput;
 
 PrismInput.propTypes = {
-  code: PropTypes.string,
   disabled: PropTypes.bool,
+  indentation: PropTypes.number,
+  onChange: PropTypes.func,
   onKeyDown: PropTypes.func,
-  setCode: PropTypes.func.isRequired,
+  value: PropTypes.string,
 };
 
 PrismInput.defaultProps = {
-  code: '',
   disabled: false,
+  indentation: 2,
+  onChange: undefined,
   onKeyDown: undefined,
+  value: '',
 };

src/Query.jsx

@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ArrowBackUp, Database } from 'tabler-icons-react';
 import { Button, Paper, Space } from '@mantine/core';
-import PrismInput from './PrismInput';
+/* eslint-disable import/no-named-default */
+import { default as Input } from './HighlightInput';
+// import { default as Input } from './PrismInput';
 import DataTable from './DataTable';
 
 const usePrevious = (value) => {
@@ -45,12 +47,12 @@ export default function Query({ execute, initialQuery }) {
 
   return (
     <Paper p="sm" radius="sm" shadow="md" withBorder>
-      <PrismInput
-        code={queryValue}
+      <Input
         disabled={Boolean(queryResult)}
+        onChange={setQueryValue}
         onKeyDown={onKeyDown}
         ref={editorRef}
-        setCode={setQueryValue}
+        value={queryValue}
       />
       {queryResult ? (
         <Button

stories/PrismInput.stories.jsx

@@ -7,14 +7,14 @@ export default {
   argTypes: {},
 };
 
-function Template({ code, disabled, onKeyDown }) {
-  const [codeValue, setCode] = useState(code);
+function Template({ value, disabled, onKeyDown }) {
+  const [valueState, setValue] = useState(value);
   return (
     <PrismInput
-      code={codeValue}
       disabled={disabled}
+      onChange={setValue}
       onKeyDown={onKeyDown}
-      setCode={setCode}
+      value={valueState}
     />
   );
 }
@@ -24,15 +24,15 @@ Template.defaultProps = PrismInput.defaultProps;
 
 export const Empty = Template.bind({});
 Empty.args = {
-  code: '',
+  value: '',
 };
 
 export const SingleLine = Template.bind({});
 SingleLine.args = {
-  code: 'SELECT * FROM data;',
+  value: 'SELECT * FROM data;',
 };
 
 export const MultiLine = Template.bind({});
 MultiLine.args = {
-  code: 'SELECT *\nFROM data\nWHERE x > 0;',
+  value: 'SELECT *\nFROM data\nWHERE x > 0;',
 };