From 0ce432fef0b70988e8b77f8761822e115f43a2ce Mon Sep 17 00:00:00 2001 From: Geoff Cox Date: Thu, 23 Sep 2021 06:30:34 -0700 Subject: [PATCH] feat(alert): component with icon (#295) --- package.json | 3 ++- src/alert.js | 16 ++++++++++++++++ src/components.js | 4 ++++ src/container.js | 12 ++++++++++++ yarn.lock | 11 +++++++++++ 5 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/alert.js create mode 100644 src/container.js diff --git a/package.json b/package.json index 28f8f5b1..0de2ee0c 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@date-io/date-fns": "^1.3.13", "@material-ui/core": "^4.11.0", + "@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/pickers": "^3.2.10", "classnames": "^2.2.6", "date-fns": "^2.15.0", @@ -47,8 +48,8 @@ "prettier": "^2.2.1", "prop-types": "^15.6.2", "react": "^17.0.1", - "react-dom": "^17.0.1", "react-beautiful-dnd-test-utils": "^3.2.1", + "react-dom": "^17.0.1", "react-scripts": "^4.0.1", "semantic-release": "^17.3.0", "style-loader": "^2.0.0", diff --git a/src/alert.js b/src/alert.js new file mode 100644 index 00000000..e394f2df --- /dev/null +++ b/src/alert.js @@ -0,0 +1,16 @@ +import React from 'react'; +import useComponent from './use-component'; +import Component from './component'; +import MuiAlert from '@material-ui/lab/Alert'; + +export default function Alert(props) { + const { severity, content } = useComponent(props.component, [ + 'severity', + 'content', + ]); + return ( + + {content && } + + ); +} diff --git a/src/components.js b/src/components.js index 1d261714..a8f544f9 100644 --- a/src/components.js +++ b/src/components.js @@ -1,5 +1,6 @@ // NOTE: this file should only contain the component registrations +import Alert from './alert'; import ButtonField from './fields/button-field'; import BooleanField from './fields/boolean-field'; import Card from './card'; @@ -13,6 +14,7 @@ import Fragment from './fragment'; import Grid from './grid'; import GridItem from './grid-item'; import CollectionField from './fields/collection-field'; +import Container from './container'; import ListField from './fields/list-field'; import ReCAPTCHAField from './fields/re-captcha-field'; import SelectField from './fields/select-field'; @@ -23,6 +25,7 @@ import TextField from './fields/text-field'; import URLField from './fields/url-field'; const components = { + Alert, ButtonField, BooleanField, Card, @@ -38,6 +41,7 @@ const components = { Grid, GridItem, CollectionField, + Container, IdField: TextField, IntegerField: TextField, ListField, diff --git a/src/container.js b/src/container.js new file mode 100644 index 00000000..a8870308 --- /dev/null +++ b/src/container.js @@ -0,0 +1,12 @@ +import React from 'react'; +import useComponent from './use-component'; +import Component from './component'; + +export default function Container(props) { + const { content } = useComponent(props.component, ['content']); + if (content) { + return ; + } else { + return null; + } +} diff --git a/yarn.lock b/yarn.lock index 4b14dcd6..56da77e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1747,6 +1747,17 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" +"@material-ui/lab@^4.0.0-alpha.60": + version "4.0.0-alpha.60" + resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2" + integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.11.2" + clsx "^1.0.4" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + "@material-ui/pickers@^3.2.10": version "3.3.10" resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.10.tgz#f1b0f963348cc191645ef0bdeff7a67c6aa25485"