diff --git a/package.json b/package.json index c93abbc5..d46406ad 100644 --- 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": { diff --git a/src/components/Fields/ColorPicker.tsx b/src/components/Fields/ColorPicker.tsx new file mode 100644 index 00000000..d9e52e5c --- /dev/null +++ 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(null); + const classes = useStyles(); + + const handleClick = ( + event: React.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 ( +
+ +
+ + + + {text} + + + +
+ +
+ ); +}; +export default Rating; diff --git a/src/components/Fields/index.tsx b/src/components/Fields/index.tsx index 358f3f16..b55834bd 100644 --- 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: , name: "Single Select", type: FieldType.singleSelect }, { icon: , name: "Multi Select", type: FieldType.multiSelect }, { icon: , name: "Doc Select", type: FieldType.documentSelect }, + { icon: , name: "Color", type: FieldType.color }, ]; export const getFieldIcon = (type: FieldType) => { diff --git a/src/components/Table/grid-fns.tsx b/src/components/Table/grid-fns.tsx index 23603c9f..e674dbe4 100644 --- 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) => { ); }; + case FieldType.color: + return (props: any) => { + return ( + }> + + + ); + }; case FieldType.checkBox: return (props: any) => { return ( diff --git a/yarn.lock b/yarn.lock index 2a7f90f9..c43e9ac0 100644 --- 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"