feat:code field

www/package.json

@@ -25,6 +25,7 @@
     "@types/react-div-100vh": "^0.3.0",
     "@types/react-dom": "16.9.0",
     "@types/react-router-dom": "^4.3.5",
+    "ace-builds": "^1.4.11",
     "algoliasearch": "^4.1.0",
     "chroma-js": "^2.1.0",
     "csv-parse": "^4.4.6",
@@ -43,6 +44,7 @@
     "query-string": "^6.8.3",
     "ramda": "^0.26.1",
     "react": "^16.9.0",
+    "react-ace": "^9.1.1",
     "react-color": "^2.17.3",
     "react-data-grid": "^7.0.0-alpha.29",
     "react-data-grid-addons": "^7.0.0-alpha.24",

www/src/components/SideDrawer/Form/Fields/Code.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { FieldProps } from "formik";
+
+import AceEditor from "react-ace";
+
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/theme-monokai";
+import ErrorMessage from "../ErrorMessage";
+
+export default function Code({ form, field }: FieldProps) {
+  const handleChange = value => form.setFieldValue(field.name, value);
+
+  return (
+    <>
+      <AceEditor
+        key={`${form.initialValues.id}-${field.name}`}
+        placeholder="insert code"
+        mode="javascript"
+        theme="monokai"
+        //name="blah2"
+        //onLoad={this.onLoad}
+        onChange={handleChange}
+        fontSize={14}
+        showPrintMargin={true}
+        height={"150px"}
+        //showGutter={true}
+        highlightActiveLine={true}
+        value={field.value}
+        setOptions={{
+          enableBasicAutocompletion: false,
+          enableLiveAutocompletion: false,
+          enableSnippets: false,
+          showLineNumbers: true,
+          tabSize: 2,
+        }}
+      />
+      <ErrorMessage name={field.name} />
+    </>
+  );
+}

www/src/components/SideDrawer/Form/index.tsx

@@ -72,6 +72,9 @@ const ConnectTable = lazy(() =>
     "./Fields/ConnectTable" /* webpackChunkName: "SideDrawer-ConnectTable" */
   )
 );
+const Code = lazy(() =>
+  import("./Fields/Code" /* webpackChunkName: "SideDrawer-Code" */)
+);
 const SubTable = lazy(() =>
   import("./Fields/SubTable" /* webpackChunkName: "SideDrawer-SubTable" */)
 );
@@ -125,6 +128,7 @@ const getInitialValues = (fields: Fields): Values =>
       case FieldType.email:
       case FieldType.phone:
       case FieldType.url:
+      case FieldType.code:
       case FieldType.richText:
       default:
         break;
@@ -319,7 +323,9 @@ export default function Form({ fields, values }: IFormProps) {
                       <Field {...fieldProps} component={JsonEditor} />
                     );
                     break;
-
+                  case FieldType.code:
+                    renderedField = <Field {...fieldProps} component={Code} />;
+                    break;
                   case undefined:
                     return null;
 

www/src/components/Table/formatters/Code.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { CustomCellProps } from "./withCustomCell";
+
+import { makeStyles, createStyles, Tooltip, Fade } from "@material-ui/core";
+
+import { useFiretableContext } from "contexts/firetableContext";
+
+type StylesProps = { width: number; rowHeight: number };
+
+const useStyles = makeStyles(theme =>
+  createStyles({
+    root: {
+      whiteSpace: "pre-line",
+      padding: theme.spacing(0.5, 0),
+
+      display: "flex",
+      alignItems: "center",
+
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      right: theme.spacing(1.5),
+      left: theme.spacing(1.5),
+    },
+    text: { maxHeight: "100%" },
+
+    tooltip: ({ width, rowHeight }: StylesProps) => ({
+      margin: `-${rowHeight - 1}px 0 0 -${theme.spacing(1.5)}px`,
+      padding: theme.spacing(0.5, 1.5),
+
+      width: width - 1,
+      maxWidth: "none",
+      minHeight: rowHeight - 1,
+      overflowX: "hidden",
+
+      background: theme.palette.background.paper,
+      borderRadius: 0,
+      boxShadow: theme.shadows[4],
+
+      ...theme.typography.body2,
+      fontSize: "0.75rem",
+      color: theme.palette.text.primary,
+      whiteSpace: "pre-line",
+
+      display: "flex",
+      alignItems: "center",
+    }),
+  })
+);
+
+export default function LongText({ column, value }: CustomCellProps) {
+  const { tableState } = useFiretableContext();
+  const classes = useStyles({
+    width: column.width,
+    rowHeight: tableState?.config?.rowHeight ?? 44,
+  });
+
+  if (!value || value === "") return <div />;
+
+  return (
+    <Tooltip
+      title={value}
+      enterDelay={1000}
+      interactive
+      placement="bottom-start"
+      PopperProps={{
+        modifiers: {
+          flip: { enabled: false },
+          preventOverflow: {
+            enabled: false,
+            boundariesElement: "scrollParent",
+          },
+          hide: { enabled: false },
+        },
+      }}
+      TransitionComponent={Fade}
+      classes={{ tooltip: classes.tooltip }}
+    >
+      <div className={classes.root}>
+        <span className={classes.text}>{value}</span>
+      </div>
+    </Tooltip>
+  );
+}

www/src/components/Table/formatters/index.tsx

@@ -19,6 +19,7 @@ const LongText = lazy(() =>
 );
 const Json = lazy(() => import("./Json" /* webpackChunkName: "Json" */));
 const User = lazy(() => import("./User" /* webpackChunkName: "User" */));
+const Code = lazy(() => import("./Code" /* webpackChunkName: "Code" */));
 const RichText = lazy(() =>
   import("./RichText" /* webpackChunkName: "RichText" */)
 );
@@ -86,6 +87,8 @@ export const getFormatter = (column: any) => {
 
     case FieldType.user:
       return withCustomCell(User);
+    case FieldType.code:
+      return withCustomCell(Code);
     case FieldType.richText:
       return withCustomCell(RichText);
 

www/src/constants/fields.tsx

@@ -33,7 +33,7 @@ import JsonIcon from "assets/icons/Json";
 import RichTextIcon from "@material-ui/icons/TextFormat";
 import ColorIcon from "@material-ui/icons/Colorize";
 import SliderIcon from "assets/icons/Slider";
-
+import CodeIcon from "@material-ui/icons/Code";
 import UserIcon from "@material-ui/icons/Person";
 
 export {
@@ -60,6 +60,7 @@ export {
 };
 
 export enum FieldType {
+  code = "CODE",
   shortText = "SIMPLE_TEXT",
   longText = "LONG_TEXT",
   email = "EMAIL",
@@ -145,6 +146,7 @@ export const FIELDS = [
   { icon: <SliderIcon />, name: "Slider", type: FieldType.slider },
   { icon: <JsonIcon />, name: "JSON", type: FieldType.json },
   { icon: <UserIcon />, name: "User", type: FieldType.user },
+  { icon: <CodeIcon />, name: "Code", type: FieldType.code },
 ];
 
 /**

www/yarn.lock

@@ -116,9 +116,9 @@
     lodash-es "^4.17.15"
 
 "@antlerengineering/multiselect@^0.3.9":
-  version "0.3.9"
-  resolved "https://registry.yarnpkg.com/@antlerengineering/multiselect/-/multiselect-0.3.9.tgz#a368c8b26227c37c80ac225d0007a999b0242997"
-  integrity sha512-lSWjuiESiM4GgjSVF0eqWvVrSxQcFMB9dlO5stM21NtAH4UNnoTtEolKdfGataA3CPCEM3lFxSagiC3is2bK+Q==
+  version "0.3.14"
+  resolved "https://registry.yarnpkg.com/@antlerengineering/multiselect/-/multiselect-0.3.14.tgz#d24c983913ba1a2272bfe4dd5afbb081aedc95dc"
+  integrity sha512-1AsBicZlna3hEG+J1tOgQEhgx/WNbuc7z9khDtkISjWs7hZxevMoLlTPuNZFafHikuGhk/Lr56KihBvz51+mxA==
 
 "@babel/code-frame@7.8.3", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
   version "7.8.3"
@@ -2454,6 +2454,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+ace-builds@^1.4.11, ace-builds@^1.4.6:
+  version "1.4.11"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.11.tgz#b1f19a891afcef1d26522473082baf80067e855f"
+  integrity sha512-keACH1d7MvAh72fE/us36WQzOFQPJbHphNpj33pXwVZOM84pTWcdFzIAvngxOGIGLTm7gtUP2eJ4Ku6VaPo8bw==
+
 acorn-globals@^4.1.0, acorn-globals@^4.3.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -4939,6 +4944,11 @@ didyoumean@^1.2.1:
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
   integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=
 
+diff-match-patch@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
 diff-sequences@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
@@ -9123,6 +9133,11 @@ lodash.isboolean@^3.0.3:
   resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
   integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.isinteger@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
@@ -11769,6 +11784,17 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-9.1.1.tgz#fe27e1c668b0186dc1609c422198d1c2df34d2bf"
+  integrity sha512-dL0w6GwtnS1opsOoWhJaF7rF7xCM+NOEOfePmDfiaeU+EyZQ6nRWDBgyzKsuiB3hyXH3G9D6FX37ur/LKUdKjA==
+  dependencies:
+    ace-builds "^1.4.6"
+    diff-match-patch "^1.0.4"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.5.0"
+    prop-types "^15.7.2"
+
 react-app-polyfill@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"