forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Framer X wrapper components (mui#17797)
- Loading branch information
Showing
76 changed files
with
11,372 additions
and
24 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| Material-UI.framerfx/design/* | ||
| Material-UI.framerfx/build/* | ||
| canvas.tsx |
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,9 @@ | ||
| build | ||
| .backups | ||
| .cache | ||
| .project.log | ||
| yarn-error.log | ||
| .yarnrc | ||
| .framer-lock | ||
| canvas.tsx | ||
| dist |
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,3 @@ | ||
| @framer:registry=https://registry.framer.com/ | ||
| always-auth=true | ||
| //registry.framer.com/:_authToken=f326029a-e8b0-43b7-a65d-9cb1ff2de882 |
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,58 @@ | ||
| # Material-UI | ||
|
|
||
| This is the official resource for Material-UI React components in Framer. | ||
|
|
||
| ## Supported components | ||
|
|
||
| The following components are currently supported: | ||
|
|
||
| - App bar | ||
| - Avatar | ||
| - Badge | ||
| - Bottom navigation | ||
| - Button | ||
| - Checkbox | ||
| - Chip | ||
| - Circular progress | ||
| - Floating action button (Fab) | ||
| - Icon (all 1100+ Material Icons in 5 themes, plus social icons) | ||
| - Icon button (with optional badge) | ||
| - Linear progress | ||
| - List | ||
| - List item | ||
| - Media card | ||
| - Paper | ||
| - Radio | ||
| - Radio group | ||
| - Slider | ||
| - Snackbar content | ||
| - Switch | ||
| - Tabs | ||
| - Text field | ||
| - Theme (to globally set primary, secondary and error colors) | ||
| - Typography | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Icons | ||
|
|
||
| Icons can be specified using either snake_case (as documented on material.io), | ||
| or PascalCase, as used in [the Material-UI documentation](https://material-ui.com/components/material-icons/). | ||
| Simply type the icon name in the appropriate property control. | ||
|
|
||
| The icon theme can be chosen from the related select field. | ||
|
|
||
| ### Children | ||
|
|
||
| Where a component (such as Avatar) accepts a variety of child types, these can be configured through Framer property controls. | ||
| If multiple options are supplied, they take the following priority: | ||
|
|
||
| - Local image | ||
| - Image URL | ||
| - Icon | ||
| - Text | ||
|
|
||
| ## Resources | ||
|
|
||
| - [Material-UI documentation](https://material-ui.com/) | ||
| - [GitHub repo](https://github.com/mui-org/material-ui/tree/master/framer) |
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,114 @@ | ||
| import * as React from 'react'; | ||
| import { PropertyControls, ControlType } from 'framer'; | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| import MuiAppBar from '@material-ui/core/AppBar'; | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| import Toolbar from '@material-ui/core/Toolbar'; | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| import Typography from '@material-ui/core/Typography'; | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| import Button from '@material-ui/core/Button'; | ||
| import { IconButton } from './IconButton'; | ||
|
|
||
| // Define type of property | ||
| interface Props { | ||
| title?: string; | ||
| leftIcon?: string; | ||
| icon1?: string; | ||
| icon1Badge?: string; | ||
| icon2?: string; | ||
| icon2Badge?: string; | ||
| action1?: string; | ||
| action2?: string; | ||
| } | ||
|
|
||
| export class AppBar extends React.Component<Props> { | ||
| // Set default properties | ||
| static defaultProps = { | ||
| width: 300, | ||
| height: 56, | ||
| leftIcon: 'menu', | ||
| title: 'Material-UI', | ||
| action1: 'Login', | ||
| action2: '', | ||
| icon1: 'notifications', | ||
| icon1Badge: '8', | ||
| icon2: 'account_circle', | ||
| icon2Badge: '', | ||
| }; | ||
|
|
||
| // Items shown in property panel | ||
| static propertyControls: PropertyControls = { | ||
| leftIcon: { type: ControlType.String, title: 'Left icon' }, | ||
| title: { type: ControlType.String, title: 'Title' }, | ||
| action1: { type: ControlType.String, title: 'Action 1' }, | ||
| action2: { | ||
| type: ControlType.String, | ||
| title: 'Action 2', | ||
| hidden(props) { | ||
| return props.action1 === '' && props.action2 !== ''; | ||
| }, | ||
| }, | ||
| icon1: { type: ControlType.String, title: 'Icon 1' }, | ||
| icon1Badge: { type: ControlType.String, title: 'Icon 1 badge' }, | ||
| icon2: { | ||
| type: ControlType.String, | ||
| title: 'Icon 2', | ||
| hidden(props) { | ||
| return props.icon1 === '' && props.icon2 !== ''; | ||
| }, | ||
| }, | ||
| icon2Badge: { type: ControlType.String, title: 'Icon 2 badge' }, | ||
| }; | ||
|
|
||
| render() { | ||
| const { action1, action2, icon1, icon1Badge, icon2, icon2Badge, leftIcon, title } = this.props; | ||
| return ( | ||
| <div style={{ flexGrow: 1 }}> | ||
| <MuiAppBar position="static"> | ||
| <Toolbar> | ||
| {leftIcon && ( | ||
| <IconButton | ||
| icon={leftIcon} | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| style={{ marginLeft: -12, marginRight: 20 }} | ||
| color="inherit" | ||
| /> | ||
| )} | ||
| <Typography variant="h6" color="inherit" style={{ flexGrow: 1 }}> | ||
| {title} | ||
| </Typography> | ||
| {action1 && <Button color="inherit">{action1}</Button>} | ||
| {action2 && <Button color="inherit">{action2}</Button>} | ||
| {icon1 && ( | ||
| <IconButton | ||
| icon={icon1} | ||
| badgeColor="secondary" | ||
| badgeContent={icon1Badge} | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| style={{ marginRight: 8 }} | ||
| color="inherit" | ||
| /> | ||
| )} | ||
| {icon2 && ( | ||
| <IconButton | ||
| icon={icon2} | ||
| badgeContent={icon2Badge} | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| style={{ marginRight: 8 }} | ||
| color="inherit" | ||
| /> | ||
| )} | ||
| </Toolbar> | ||
| </MuiAppBar> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import * as React from 'react'; | ||
| import { addPropertyControls, ControlType } from 'framer'; | ||
| // tslint:disable-next-line: ban-ts-ignore | ||
| // @ts-ignore | ||
| import MuiAvatar from '@material-ui/core/Avatar'; | ||
| import { Icon } from './Icon'; | ||
|
|
||
| interface Props { | ||
| backgroundColor?: string; | ||
| textColor?: string; | ||
| icon?: string; | ||
| imageFile?: string; | ||
| imageUrl?: string; | ||
| label?: string; | ||
| width?: number; | ||
| height?: number; | ||
| } | ||
|
|
||
| const defaultProps: Props = { | ||
| backgroundColor: '#4154af', | ||
| textColor: undefined, | ||
| icon: 'face', | ||
| imageFile: '', | ||
| imageUrl: 'https://i.pravatar.cc/300', | ||
| label: 'MB', | ||
| width: 40, | ||
| height: 40, | ||
| }; | ||
|
|
||
| export const Avatar: React.SFC<Props> = (props: Props) => { | ||
| const { | ||
| backgroundColor, | ||
| height, | ||
| icon, | ||
| imageFile, | ||
| imageUrl, | ||
| label, | ||
| textColor, | ||
| width, | ||
| ...other | ||
| } = props; | ||
|
|
||
| return imageFile || imageUrl ? ( | ||
| <MuiAvatar src={imageFile || imageUrl} style={{ height, width }} {...other} /> | ||
| ) : ( | ||
| <MuiAvatar style={{ color: textColor, backgroundColor, height, width }} {...other}> | ||
| {icon === '' ? label : <Icon icon={icon} />} | ||
| </MuiAvatar> | ||
| ); | ||
| }; | ||
|
|
||
| Avatar.defaultProps = defaultProps; | ||
|
|
||
| addPropertyControls(Avatar, { | ||
| backgroundColor: { | ||
| type: ControlType.Color, | ||
| title: 'Background color', | ||
| }, | ||
| textColor: { | ||
| type: ControlType.Color, | ||
| title: 'Text color', | ||
| }, | ||
| icon: { | ||
| type: ControlType.String, | ||
| title: 'Icon', | ||
| }, | ||
| imageFile: { | ||
| type: ControlType.Image, | ||
| title: 'Image File', | ||
| hidden: function hidden(props) { | ||
| return props.primaryAction && props.primaryAction !== 'avatar'; | ||
| }, | ||
| }, | ||
| imageUrl: { | ||
| type: ControlType.String, | ||
| title: 'Image URL', | ||
| hidden: function hidden(props) { | ||
| return props.imageFile !== '' || (props.primaryAction && props.primaryAction !== 'avatar'); | ||
| }, | ||
| }, | ||
| label: { | ||
| type: ControlType.String, | ||
| title: 'Label', | ||
| }, | ||
| }); |
Oops, something went wrong.