setup

2025-12-28 16:06:41 +01:00 · 2019-10-08 08:37:32 +11:00
parent ef74c41145
commit be37012101
5 changed files with 134 additions and 1 deletions
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "@types/node": "12.7.4",
    "@types/ramda": "^0.26.21",
    "@types/react": "^16.9.2",
+    "@types/react-color": "^3.0.1",
    "@types/react-data-grid": "^4.0.3",
    "@types/react-dom": "16.9.0",
    "@types/react-router-dom": "^4.3.5",
@@ -25,13 +26,16 @@
    "lodash": "^4.17.15",
    "ramda": "^0.26.1",
    "react": "^16.9.0",
+    "react-color": "^2.17.3",
    "react-data-grid": "^6.1.0",
    "react-data-grid-addons": "^6.1.0",
    "react-dom": "^16.9.0",
    "react-dropzone": "^10.1.8",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
+    "start": "^5.1.0",
    "typescript": "3.6.2",
+    "yarn": "^1.19.0",
    "yup": "^0.27.0"
  },
  "scripts": {
--- a/src/components/Fields/ColorPicker.tsx
+++ b/src/components/Fields/ColorPicker.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import { SketchPicker } from "react-color";
+import Popper from "@material-ui/core/Popper";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
+import ExpandIcon from "@material-ui/icons/AspectRatio";
+import IconButton from "@material-ui/core/IconButton";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      position: "relative",
+      display: "flex",
+      flexWrap: "wrap",
+    },
+  })
+);
+// TODO: Create an interface for props
+
+interface Props {
+  value: number;
+  row: { id: string };
+  onSubmit: Function;
+  isScrolling: boolean;
+}
+const Rating = (props: Props) => {
+  const { value, onSubmit } = props;
+  const [text, setText] = useState(value ? value : "");
+  useEffect(() => {
+    if (text !== value) setText(value);
+  }, [value]);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const classes = useStyles();
+
+  const handleClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "no-transition-popper" : undefined;
+  const onClickAway = (event: any) => {
+    if (event.target.id !== id && open) {
+      onSubmit(text);
+      setAnchorEl(null);
+    }
+  };
+  return (
+    <div className={classes.root}>
+      <ClickAwayListener onClickAway={onClickAway}>
+        <div>
+          <IconButton onClick={handleClick}>
+            <ExpandIcon />
+          </IconButton>
+          {text}
+          <Popper id={id} open={open} anchorEl={anchorEl}>
+            <SketchPicker />
+          </Popper>
+        </div>
+      </ClickAwayListener>
+    </div>
+  );
+};
+export default Rating;
--- a/src/components/Fields/index.tsx
+++ b/src/components/Fields/index.tsx
@@ -7,6 +7,7 @@ import PhoneIcon from "@material-ui/icons/Phone";
 import ImageIcon from "@material-ui/icons/Photo";
 import FileIcon from "@material-ui/icons/InsertDriveFileOutlined";
 import AttachmentIcon from "@material-ui/icons/AttachFile";
+import PalleteIcon from "@material-ui/icons/Palette";
 import DateIcon from "@material-ui/icons/CalendarToday";
 import TimeIcon from "@material-ui/icons/AccessTime";
 import RatingIcon from "@material-ui/icons/StarHalf";
@@ -26,6 +27,7 @@ export enum FieldType {
  dateTime = "DATE_TIME",
  number = "NUMBER",
  url = "URL",
+  color = "COLOR",
  rating = "RATING",
  image = "IMAGE",
  file = "FILE",
@@ -50,6 +52,7 @@ export const FIELDS = [
  { icon: <FileIcon />, name: "Single Select", type: FieldType.singleSelect },
  { icon: <FileIcon />, name: "Multi Select", type: FieldType.multiSelect },
  { icon: <FileIcon />, name: "Doc Select", type: FieldType.documentSelect },
+  { icon: <PalleteIcon />, name: "Color", type: FieldType.color },
 ];

 export const getFieldIcon = (type: FieldType) => {
--- a/src/components/Table/grid-fns.tsx
+++ b/src/components/Table/grid-fns.tsx
@@ -13,6 +13,7 @@ const UrlLink = lazy(() => import("../Fields/UrlLink"));
 const Image = lazy(() => import("../Fields/Image"));
 const File = lazy(() => import("../Fields/File"));
 const LongText = lazy(() => import("../Fields/LongText"));
+const ColorPicker = lazy(() => import("../Fields/ColorPicker"));

 export const editable = (fieldType: FieldType) => {
  switch (fieldType) {
@@ -25,6 +26,7 @@ export const editable = (fieldType: FieldType) => {
    case FieldType.file:
    case FieldType.longText:
    case FieldType.documentSelect:
+    case FieldType.color:
      return false;
    default:
      return true;
@@ -75,6 +77,14 @@ export const cellFormatter = (column: any) => {
          </Suspense>
        );
      };
+    case FieldType.color:
+      return (props: any) => {
+        return (
+          <Suspense fallback={<div />}>
+            <ColorPicker {...props} onSubmit={onSubmit(key, props.row)} />
+          </Suspense>
+        );
+      };
    case FieldType.checkBox:
      return (props: any) => {
        return (
--- a/yarn.lock
+++ b/yarn.lock
@@ -1158,6 +1158,11 @@
  dependencies:
    "@hapi/hoek" "8.x.x"

+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
  version "24.9.0"
  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -1721,6 +1726,13 @@
  dependencies:
    ts-toolbelt "^3.8.4"

+"@types/react-color@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
+  integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-data-grid@^4.0.3":
  version "4.0.3"
  resolved "https://registry.yarnpkg.com/@types/react-data-grid/-/react-data-grid-4.0.3.tgz#be8eb886575d39955c97ac2a53e4cd164e553aaa"
@@ -7471,7 +7483,7 @@ lodash.uniq@^4.5.0:
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=

-"lodash@>=3.5 <5", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1:
+"lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1:
  version "4.17.15"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -7557,6 +7569,11 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 md5.js@^1.3.4:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9796,6 +9813,18 @@ react-app-polyfill@^1.0.2:
    regenerator-runtime "0.13.3"
    whatwg-fetch "3.0.0"

+react-color@^2.17.3:
+  version "2.17.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.3.tgz#b8556d744f95193468c7061d2aa19180118d4a48"
+  integrity sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.11"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-contextmenu@^2.10.0:
  version "2.11.0"
  resolved "https://registry.yarnpkg.com/react-contextmenu/-/react-contextmenu-2.11.0.tgz#ec57614e6d687ceaec5c0ba97d56a302c9551d17"
@@ -10034,6 +10063,13 @@ react@^16.9.0:
    object-assign "^4.1.1"
    prop-types "^15.6.2"

+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-pkg-up@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -11145,6 +11181,11 @@ stack-utils@^1.0.1:
  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==

+start@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/start/-/start-5.1.0.tgz#1c171f0ef9487f56d0ab9a755ace860169208763"
+  integrity sha1-HBcfDvlIf1bQq5p1Ws6GAWkgh2M=
+
 static-extend@^0.1.1:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -11550,6 +11591,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2:
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@^0.0.33:
  version "0.0.33"
  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -12618,6 +12664,11 @@ yargs@^3.10.0:
    window-size "^0.1.4"
    y18n "^3.2.0"

+yarn@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.19.0.tgz#e4fb83762849a9545f95eb077fd0905f7ddae2f0"
+  integrity sha512-QLiMoj+ZHo2kT17x1t7erO6gzR+9xSa5z7Lmei1qYM1Sj37wiIFv67kQcH+nkshsO0f03ImXClfkEKUgnsMreQ==
+
 yeast@0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"