feat(codeinput): Add auto focus to code input (#515)

* feat(code-input): make code input accept all code mirror props * build
logicalclocks · Sep 20, 2023 · 37c1569 · 37c1569
1 parent d702bae
commit 37c1569
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/dist/components/code-input/index.d.ts b/dist/components/code-input/index.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { BoxProps } from '../box';
 import { Intents } from '../intents';
 import { LabelProps } from '../label';
@@ -16,6 +17,7 @@ export interface CodeInputProps extends Omit<BoxProps, 'children' | 'onChange'>
     readOnly: boolean;
     info?: string;
     intent?: Intents;
+    codeMirrorProps?: ReactCodeMirrorProps;
 }
 declare const CodeInput: import("react").ForwardRefExoticComponent<Omit<CodeInputProps, "ref"> & import("react").RefAttributes<unknown>>;
 export default CodeInput;
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -50949,18 +50949,19 @@ const pfe = ({
     readOnly: c = !1,
     info: u,
     intent: d = "default",
-    ...h
+    codeMirrorProps: h,
+    ...$
   }) => {
-    const $ = (O || o || a) && /* @__PURE__ */ f.jsxs(G, { children: [
+    const g = (O || o || a) && /* @__PURE__ */ f.jsxs(G, { children: [
       O,
       a && /* @__PURE__ */ f.jsx(be, { ml: "8px", bold: !0, gray: !0, children: "optional" }),
       o && /* @__PURE__ */ f.jsx(Dt, { mainText: o, children: /* @__PURE__ */ f.jsx(je, { mt: "3px", ml: "3px", size: "xs", icon: Ze.info_block }) })
     ] });
-    return /* @__PURE__ */ f.jsxs(Y, { width: i, tx: "inputs", ...h, children: [
+    return /* @__PURE__ */ f.jsxs(Y, { width: i, tx: "inputs", ...$, children: [
       /* @__PURE__ */ f.jsx(
         rn,
         {
-          action: $,
+          action: g,
           text: t,
           width: i,
           ...s,
@@ -50984,7 +50985,8 @@ const pfe = ({
                   theme: MT,
                   onChange: l,
                   readOnly: c,
-                  height: r
+                  height: r,
+                  ...h
                 }
               )
             }

diff --git a/src/components/code-input/index.tsx b/src/components/code-input/index.tsx
@@ -3,7 +3,7 @@ import { Box, Flex } from 'rebass';
 
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
 import { darcula } from '@uiw/codemirror-theme-darcula';
-import CodeMirror from '@uiw/react-codemirror';
+import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 // Components
 import { BoxProps } from '../box';
@@ -29,6 +29,7 @@ export interface CodeInputProps
   readOnly: boolean;
   info?: string;
   intent?: Intents;
+  codeMirrorProps?: ReactCodeMirrorProps;
 }
 
 const CodeInput = forwardRef(
@@ -46,6 +47,7 @@ const CodeInput = forwardRef(
     readOnly = false,
     info,
     intent = 'default',
+    codeMirrorProps,
     ...props
   }: CodeInputProps) => {
     const actions = (labelAction || tooltipInfo || optional) && (
@@ -90,6 +92,7 @@ const CodeInput = forwardRef(
               onChange={onChange}
               readOnly={readOnly}
               height={height}
+              {...codeMirrorProps}
             />
           </Box>
         </Label>