-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
avniproject/avni-security#15, #1037 | Multiple changes
Replace material-ui-rc-color-picker because it uses google fonts Use icons in place of icon strings. Specify the icons to be used by MaterialTable
- Loading branch information
Showing
28 changed files
with
207 additions
and
162 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React, { forwardRef } from "react"; | ||
| import AddBox from "@material-ui/icons/AddBox"; | ||
| import Check from "@material-ui/icons/Check"; | ||
| import Clear from "@material-ui/icons/Clear"; | ||
| import DeleteOutline from "@material-ui/icons/DeleteOutline"; | ||
| import ChevronRight from "@material-ui/icons/ChevronRight"; | ||
| import Edit from "@material-ui/icons/Edit"; | ||
| import SaveAlt from "@material-ui/icons/SaveAlt"; | ||
| import FilterList from "@material-ui/icons/FilterList"; | ||
| import FirstPage from "@material-ui/icons/FirstPage"; | ||
| import LastPage from "@material-ui/icons/LastPage"; | ||
| import ChevronLeft from "@material-ui/icons/ChevronLeft"; | ||
| import Search from "@material-ui/icons/Search"; | ||
| import ArrowDownward from "@material-ui/icons/ArrowDownward"; | ||
| import Remove from "@material-ui/icons/Remove"; | ||
| import ViewColumn from "@material-ui/icons/ViewColumn"; | ||
|
|
||
| export default { | ||
| Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), | ||
| Check: forwardRef((props, ref) => <Check {...props} ref={ref} />), | ||
| Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />), | ||
| Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />), | ||
| DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />), | ||
| Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />), | ||
| Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />), | ||
| Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />), | ||
| FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />), | ||
| LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />), | ||
| NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />), | ||
| PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />), | ||
| ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />), | ||
| Search: forwardRef((props, ref) => <Search {...props} ref={ref} />), | ||
| SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />), | ||
| ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />), | ||
| ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />) | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React, { useEffect, useCallback, useRef, useState } from "react"; | ||
| import { HexColorPicker } from "react-colorful"; | ||
| import { makeStyles } from "@material-ui/core"; | ||
|
|
||
| // Source: https://codesandbox.io/s/opmco | ||
| const useClickOutside = (ref, handler) => { | ||
| useEffect(() => { | ||
| let startedInside = false; | ||
| let startedWhenMounted = false; | ||
|
|
||
| const listener = event => { | ||
| // Do nothing if `mousedown` or `touchstart` started inside ref element | ||
| if (startedInside || !startedWhenMounted) return; | ||
| // Do nothing if clicking ref's element or descendent elements | ||
| if (!ref.current || ref.current.contains(event.target)) return; | ||
|
|
||
| handler(event); | ||
| }; | ||
|
|
||
| const validateEventStart = event => { | ||
| startedWhenMounted = ref.current; | ||
| startedInside = ref.current && ref.current.contains(event.target); | ||
| }; | ||
|
|
||
| document.addEventListener("mousedown", validateEventStart); | ||
| document.addEventListener("touchstart", validateEventStart); | ||
| document.addEventListener("click", listener); | ||
|
|
||
| return () => { | ||
| document.removeEventListener("mousedown", validateEventStart); | ||
| document.removeEventListener("touchstart", validateEventStart); | ||
| document.removeEventListener("click", listener); | ||
| }; | ||
| }, [ref, handler]); | ||
| }; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| picker: { | ||
| position: "relative" | ||
| }, | ||
|
|
||
| swatch: { | ||
| width: "28px", | ||
| height: "28px", | ||
| borderRadius: "8px", | ||
| border: "3px solid #fff", | ||
| boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1)", | ||
| cursor: "pointer" | ||
| }, | ||
|
|
||
| popOver: { | ||
| position: "absolute", | ||
| top: "calc(100% + 2px)", | ||
| left: "0", | ||
| borderRadius: "9px", | ||
| boxShadow: "0 6px 12px rgba(0, 0, 0, 0.15)", | ||
| zIndex: 100 | ||
| } | ||
| })); | ||
|
|
||
| export const PopoverColorPicker = ({ color, onChange }) => { | ||
| const popover = useRef(); | ||
| const [isOpen, toggle] = useState(false); | ||
| const classes = useStyles(); | ||
|
|
||
| const close = useCallback(() => toggle(false), []); | ||
| useClickOutside(popover, close); | ||
|
|
||
| return ( | ||
| <div className={classes.picker}> | ||
| <div | ||
| className={classes.swatch} | ||
| style={{ backgroundColor: color }} | ||
| onClick={() => toggle(true)} | ||
| /> | ||
|
|
||
| {isOpen && ( | ||
| <div className={classes.popOver} ref={popover}> | ||
| <HexColorPicker color={color} onChange={onChange} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.