From adf69e5f6fced5906c1d8615c1953ecfcbfb0ac4 Mon Sep 17 00:00:00 2001 From: Sriram Balakrishnan Date: Mon, 10 Dec 2018 18:18:05 -0500 Subject: [PATCH] New build for material-ui version 0.20.2 --- AppBar/AppBar.js | 384 ++ AppBar/index.js | 14 + AutoComplete/AutoComplete.js | 707 +++ AutoComplete/index.js | 14 + Avatar/Avatar.js | 170 + Avatar/index.js | 14 + Badge/Badge.js | 174 + Badge/index.js | 14 + BottomNavigation/BottomNavigation.js | 97 + BottomNavigation/BottomNavigationItem.js | 114 + BottomNavigation/index.js | 20 + CODE_OF_CONDUCT.md | 12 - CONTRIBUTING.md | 101 - Card/Card.js | 219 + Card/CardActions.js | 126 + Card/CardExpandable.js | 107 + Card/CardHeader.js | 230 + Card/CardMedia.js | 215 + Card/CardText.js | 121 + Card/CardTitle.js | 178 + Card/index.js | 45 + Checkbox/Checkbox.js | 294 + Checkbox/index.js | 14 + Chip/Chip.js | 352 ++ Chip/index.js | 14 + CircularProgress/CircularProgress.js | 271 + CircularProgress/index.js | 14 + DatePicker/Calendar.js | 496 ++ DatePicker/CalendarActionButtons.js | 120 + DatePicker/CalendarMonth.js | 171 + DatePicker/CalendarToolbar.js | 180 + DatePicker/CalendarYear.js | 192 + DatePicker/DateDisplay.js | 241 + DatePicker/DatePicker.js | 441 ++ DatePicker/DatePickerDialog.js | 255 + DatePicker/DayButton.js | 199 + DatePicker/YearButton.js | 162 + DatePicker/dateUtils.js | 204 + DatePicker/index.js | 14 + Dialog/Dialog.js | 607 +++ Dialog/index.js | 14 + Divider/Divider.js | 73 + Divider/index.js | 14 + Drawer/Drawer.js | 489 ++ Drawer/index.js | 14 + DropDownMenu/DropDownMenu.js | 592 ++ DropDownMenu/index.js | 20 + FlatButton/FlatButton.js | 346 ++ FlatButton/FlatButtonLabel.js | 90 + FlatButton/index.js | 14 + FloatingActionButton/FloatingActionButton.js | 392 ++ FloatingActionButton/index.js | 14 + FontIcon/FontIcon.js | 158 + FontIcon/index.js | 14 + GOVERNANCE.md | 94 - GridList/GridList.js | 145 + GridList/GridTile.js | 307 ++ GridList/index.js | 20 + IconButton/IconButton.js | 384 ++ IconButton/index.js | 14 + IconMenu/IconMenu.js | 415 ++ IconMenu/index.js | 20 + LinearProgress/LinearProgress.js | 232 + LinearProgress/index.js | 14 + List/List.js | 108 + List/ListItem.js | 775 +++ List/NestedList.js | 53 + List/index.js | 25 + List/makeSelectable.js | 172 + Menu/Menu.js | 709 +++ Menu/index.js | 20 + Menu/menuUtils.js | 39 + MenuItem/MenuItem.js | 406 ++ MenuItem/index.js | 14 + Paper/Paper.js | 151 + Paper/index.js | 14 + Popover/Popover.js | 526 ++ Popover/PopoverAnimationDefault.js | 172 + Popover/PopoverAnimationVertical.js | 147 + Popover/index.js | 20 + ROADMAP.md | 128 - RadioButton/RadioButton.js | 275 + RadioButton/RadioButtonGroup.js | 239 + RadioButton/index.js | 20 + RaisedButton/RaisedButton.js | 489 ++ RaisedButton/index.js | 14 + RefreshIndicator/RefreshIndicator.js | 417 ++ RefreshIndicator/index.js | 14 + SelectField/SelectField.js | 321 ++ SelectField/index.js | 14 + Slider/Slider.js | 883 +++ Slider/index.js | 14 + Snackbar/Snackbar.js | 317 ++ Snackbar/SnackbarBody.js | 170 + Snackbar/index.js | 14 + Stepper/Step.js | 162 + Stepper/StepButton.js | 217 + Stepper/StepConnector.js | 77 + Stepper/StepContent.js | 168 + Stepper/StepLabel.js | 196 + Stepper/Stepper.js | 158 + Stepper/index.js | 34 + Subheader/Subheader.js | 83 + Subheader/index.js | 14 + SvgIcon/SvgIcon.js | 165 + SvgIcon/index.js | 14 + Table/Table.js | 376 ++ Table/TableBody.js | 541 ++ Table/TableFooter.js | 154 + Table/TableHeader.js | 258 + Table/TableHeaderColumn.js | 202 + Table/TableRow.js | 283 + Table/TableRowColumn.js | 183 + Table/index.js | 45 + Tabs/InkBar.js | 100 + Tabs/Tab.js | 210 + Tabs/TabTemplate.js | 51 + Tabs/Tabs.js | 326 ++ Tabs/index.js | 20 + TextField/EnhancedTextarea.js | 257 + TextField/TextField.js | 591 ++ TextField/TextFieldHint.js | 80 + TextField/TextFieldLabel.js | 117 + TextField/TextFieldUnderline.js | 139 + TextField/index.js | 14 + TimePicker/Clock.js | 244 + TimePicker/ClockHours.js | 242 + TimePicker/ClockMinutes.js | 217 + TimePicker/ClockNumber.js | 142 + TimePicker/ClockPointer.js | 150 + TimePicker/TimeDisplay.js | 247 + TimePicker/TimePicker.js | 304 ++ TimePicker/TimePickerDialog.js | 210 + TimePicker/index.js | 14 + TimePicker/timeUtils.js | 95 + Toggle/Toggle.js | 333 ++ Toggle/index.js | 14 + Toolbar/Toolbar.js | 124 + Toolbar/ToolbarGroup.js | 212 + Toolbar/ToolbarSeparator.js | 105 + Toolbar/ToolbarTitle.js | 118 + Toolbar/index.js | 30 + docs/.babelrc | 1 - docs/.gitignore | 34 - docs/README.md | 59 - docs/android/app/build.gradle | 78 - docs/android/app/proguard-rules.pro | 60 - docs/android/app/react.gradle | 87 - docs/android/app/src/main/AndroidManifest.xml | 22 - .../src/main/java/com/app/MainActivity.java | 78 - .../src/main/res/mipmap-hdpi/ic_launcher.png | Bin 3418 -> 0 bytes .../src/main/res/mipmap-mdpi/ic_launcher.png | Bin 2206 -> 0 bytes .../src/main/res/mipmap-xhdpi/ic_launcher.png | Bin 4842 -> 0 bytes .../main/res/mipmap-xxhdpi/ic_launcher.png | Bin 7718 -> 0 bytes .../app/src/main/res/values/strings.xml | 3 - .../app/src/main/res/values/styles.xml | 8 - docs/android/build.gradle | 23 - docs/android/gradle.properties | 20 - .../android/gradle/wrapper/gradle-wrapper.jar | Bin 52266 -> 0 bytes .../gradle/wrapper/gradle-wrapper.properties | 5 - docs/android/gradlew | 164 - docs/android/gradlew.bat | 90 - docs/android/settings.gradle | 3 - docs/gh-pages-build.js | 147 - docs/ios/App.xcodeproj/project.pbxproj | 751 --- .../xcshareddata/xcschemes/App.xcscheme | 112 - docs/ios/App/AppDelegate.h | 16 - docs/ios/App/AppDelegate.m | 61 - docs/ios/App/Base.lproj/LaunchScreen.xib | 42 - .../AppIcon.appiconset/Contents.json | 38 - docs/ios/App/Info.plist | 46 - docs/ios/App/main.m | 18 - docs/ios/AppTests/AppTests.m | 70 - docs/ios/AppTests/Info.plist | 24 - docs/ios/main.jsbundle | 8 - docs/package.json | 50 - docs/src/.babelrc | 16 - docs/src/app/AppRoutes.js | 149 - docs/src/app/app.android.js | 7 - docs/src/app/app.ios.js | 7 - docs/src/app/app.js | 22 - docs/src/app/app.native.js | 69 - docs/src/app/components/AppNavDrawer.js | 436 -- docs/src/app/components/Carbon.css | 70 - docs/src/app/components/Carbon.js | 27 - .../app/components/CodeExample/CodeBlock.js | 77 - .../components/CodeExample/CodeBlockTitle.js | 25 - docs/src/app/components/CodeExample/index.js | 69 - docs/src/app/components/FullWidthSection.js | 85 - docs/src/app/components/MarkdownElement.js | 59 - docs/src/app/components/Master.js | 288 - docs/src/app/components/MobileTearSheet.js | 56 - .../src/app/components/PropTypeDescription.js | 181 - .../app/components/mui-github-markdown.css | 655 --- docs/src/app/components/pages/Home.js | 222 - docs/src/app/components/pages/HomeFeature.js | 121 - .../components/AppBar/ExampleComposition.js | 71 - .../pages/components/AppBar/ExampleIcon.js | 15 - .../components/AppBar/ExampleIconButton.js | 30 - .../pages/components/AppBar/Page.js | 41 - .../pages/components/AppBar/README.md | 6 - .../AutoComplete/ExampleControlled.js | 52 - .../AutoComplete/ExampleDataSources.js | 65 - .../components/AutoComplete/ExampleFilters.js | 63 - .../AutoComplete/ExampleMenuProps.js | 35 - .../components/AutoComplete/ExampleSimple.js | 40 - .../pages/components/AutoComplete/Page.js | 59 - .../pages/components/AutoComplete/README.md | 6 - .../pages/components/Avatar/ExampleSimple.js | 113 - .../pages/components/Avatar/Page.js | 27 - .../pages/components/Avatar/README.md | 5 - .../pages/components/Badge/ExampleContent.js | 23 - .../pages/components/Badge/ExampleSimple.js | 26 - .../components/pages/components/Badge/Page.js | 46 - .../pages/components/Badge/README.md | 5 - .../BottomNavigation/ExampleSimple.js | 48 - .../pages/components/BottomNavigation/Page.js | 29 - .../components/BottomNavigation/README.md | 5 - .../components/Card/ExampleControlled.js | 69 - .../components/Card/ExampleExpandable.js | 26 - .../components/Card/ExampleWithAvatar.js | 31 - .../components/pages/components/Card/Page.js | 66 - .../pages/components/Card/README.md | 19 - .../components/Checkbox/ExampleSimple.js | 76 - .../pages/components/Checkbox/Page.js | 33 - .../pages/components/Checkbox/README.md | 6 - .../pages/components/Chip/ExampleArray.js | 61 - .../pages/components/Chip/ExampleSimple.js | 105 - .../components/pages/components/Chip/Page.js | 35 - .../pages/components/Chip/README.md | 10 - .../CircularProgress/ExampleDeterminate.js | 54 - .../CircularProgress/ExampleSimple.js | 12 - .../pages/components/CircularProgress/Page.js | 43 - .../components/CircularProgress/README.md | 5 - .../DatePicker/ExampleControlled.js | 33 - .../DatePicker/ExampleDisableDates.js | 21 - .../components/DatePicker/ExampleInline.js | 14 - .../DatePicker/ExampleInternational.js | 65 - .../components/DatePicker/ExampleSimple.js | 18 - .../components/DatePicker/ExampleToggle.js | 93 - .../pages/components/DatePicker/Page.js | 67 - .../pages/components/DatePicker/README.md | 3 - .../pages/components/Dialog/ExampleAlert.js | 50 - .../components/Dialog/ExampleCustomWidth.js | 56 - .../Dialog/ExampleDialogDatePicker.js | 49 - .../pages/components/Dialog/ExampleModal.js | 51 - .../components/Dialog/ExampleScrollable.js | 74 - .../pages/components/Dialog/ExampleSimple.js | 55 - .../pages/components/Dialog/Page.js | 67 - .../pages/components/Dialog/README.md | 10 - .../pages/components/Divider/ExampleForm.js | 23 - .../pages/components/Divider/ExampleList.js | 20 - .../pages/components/Divider/ExampleMenu.js | 19 - .../pages/components/Divider/Page.js | 56 - .../pages/components/Divider/README.md | 5 - .../components/Drawer/ExampleOpenSecondary.js | 28 - .../pages/components/Drawer/ExampleSimple.js | 29 - .../components/Drawer/ExampleUndocked.js | 36 - .../pages/components/Drawer/Page.js | 55 - .../pages/components/Drawer/README.md | 9 - .../components/DropDownMenu/ExampleLabeled.js | 24 - .../DropDownMenu/ExampleLongMenu.js | 26 - .../DropDownMenu/ExampleOpenImmediate.js | 25 - .../components/DropDownMenu/ExampleSimple.js | 46 - .../pages/components/DropDownMenu/Page.js | 65 - .../pages/components/DropDownMenu/README.md | 6 - .../components/FlatButton/ExampleComplex.js | 48 - .../components/FlatButton/ExampleIcon.js | 33 - .../components/FlatButton/ExampleSimple.js | 16 - .../pages/components/FlatButton/Page.js | 57 - .../pages/components/FlatButton/README.md | 7 - .../FloatingActionButton/ExampleSimple.js | 35 - .../components/FloatingActionButton/Page.js | 24 - .../components/FloatingActionButton/README.md | 6 - .../pages/components/FontIcon/ExampleIcons.js | 18 - .../components/FontIcon/ExampleSimple.js | 32 - .../pages/components/FontIcon/Page.js | 45 - .../pages/components/FontIcon/README.md | 15 - .../components/GridList/ExampleComplex.js | 94 - .../components/GridList/ExampleSimple.js | 87 - .../components/GridList/ExampleSingleLine.js | 86 - .../pages/components/GridList/Page.js | 45 - .../pages/components/GridList/README.md | 3 - .../components/IconButton/ExampleComplex.js | 25 - .../components/IconButton/ExampleSimple.js | 11 - .../components/IconButton/ExampleSize.js | 64 - .../components/IconButton/ExampleTooltip.js | 33 - .../components/IconButton/ExampleTouch.js | 28 - .../pages/components/IconButton/Page.js | 73 - .../pages/components/IconButton/README.md | 11 - .../components/IconMenu/ExampleControlled.js | 85 - .../components/IconMenu/ExampleNested.js | 48 - .../components/IconMenu/ExampleScrollable.js | 71 - .../components/IconMenu/ExampleSimple.js | 60 - .../pages/components/IconMenu/Page.js | 51 - .../pages/components/IconMenu/README.md | 7 - .../LinearProgress/ExampleDeterminate.js | 37 - .../LinearProgress/ExampleSimple.js | 8 - .../pages/components/LinearProgress/Page.js | 43 - .../pages/components/LinearProgress/README.md | 6 - .../pages/components/List/ExampleChat.js | 54 - .../pages/components/List/ExampleContacts.js | 66 - .../pages/components/List/ExampleFolders.js | 55 - .../pages/components/List/ExampleMessages.js | 171 - .../pages/components/List/ExampleNested.js | 81 - .../pages/components/List/ExamplePhone.js | 42 - .../components/List/ExampleSelectable.js | 79 - .../pages/components/List/ExampleSettings.js | 75 - .../pages/components/List/ExampleSimple.js | 30 - .../components/pages/components/List/Page.js | 117 - .../pages/components/List/README.md | 6 - .../pages/components/Menu/ExampleDisable.js | 37 - .../pages/components/Menu/ExampleIcons.js | 58 - .../pages/components/Menu/ExampleNested.js | 50 - .../pages/components/Menu/ExampleSecondary.js | 51 - .../pages/components/Menu/ExampleSimple.js | 32 - .../components/pages/components/Menu/Page.js | 76 - .../pages/components/Menu/README.md | 8 - .../pages/components/Paper/ExampleCircle.js | 22 - .../pages/components/Paper/ExampleRounded.js | 22 - .../pages/components/Paper/ExampleSimple.js | 22 - .../components/pages/components/Paper/Page.js | 52 - .../pages/components/Paper/README.md | 5 - .../components/Popover/ExampleAnimation.js | 58 - .../components/Popover/ExampleConfigurable.js | 172 - .../pages/components/Popover/ExampleSimple.js | 57 - .../pages/components/Popover/NOTE.md | 3 - .../pages/components/Popover/Page.js | 56 - .../pages/components/Popover/README.md | 7 - .../components/RadioButton/ExampleSimple.js | 60 - .../pages/components/RadioButton/Page.js | 34 - .../pages/components/RadioButton/README.md | 6 - .../components/RaisedButton/ExampleComplex.js | 50 - .../components/RaisedButton/ExampleIcon.js | 32 - .../components/RaisedButton/ExampleSimple.js | 20 - .../pages/components/RaisedButton/Page.js | 57 - .../pages/components/RaisedButton/README.md | 5 - .../RefreshIndicator/ExampleLoading.js | 34 - .../RefreshIndicator/ExampleReady.js | 53 - .../pages/components/RefreshIndicator/Page.js | 46 - .../components/RefreshIndicator/README.md | 6 - .../SelectField/ExampleCustomLabel.js | 26 - .../components/SelectField/ExampleError.js | 49 - .../SelectField/ExampleFloatingLabel.js | 57 - .../components/SelectField/ExampleLongMenu.js | 34 - .../SelectField/ExampleMultiSelect.js | 53 - .../components/SelectField/ExampleNullable.js | 31 - .../SelectField/ExampleSelectionRenderer.js | 64 - .../components/SelectField/ExampleSimple.js | 71 - .../pages/components/SelectField/Page.js | 83 - .../pages/components/SelectField/README.md | 6 - .../pages/components/Slider/ExampleAxis.js | 24 - .../components/Slider/ExampleControlled.js | 46 - .../components/Slider/ExampleCustomScale.js | 46 - .../components/Slider/ExampleDisabled.js | 12 - .../pages/components/Slider/ExampleSimple.js | 16 - .../pages/components/Slider/ExampleStep.js | 12 - .../pages/components/Slider/Page.js | 67 - .../pages/components/Slider/README.md | 5 - .../components/Snackbar/ExampleAction.js | 67 - .../components/Snackbar/ExampleSimple.js | 42 - .../pages/components/Snackbar/ExampleTwice.js | 55 - .../pages/components/Snackbar/Page.js | 58 - .../pages/components/Snackbar/README.md | 3 - .../pages/components/Stepper/Advanced.md | 8 - .../pages/components/Stepper/CustomIcon.js | 74 - .../components/Stepper/CustomStepConnector.js | 112 - .../Stepper/GranularControlStepper.js | 141 - .../Stepper/HorizontalLinearStepper.js | 105 - .../Stepper/HorizontalNonLinearStepper.js | 96 - .../Stepper/HorizontalTransition.js | 151 - .../pages/components/Stepper/Page.js | 124 - .../pages/components/Stepper/README.md | 12 - .../Stepper/VerticalLinearStepper.js | 122 - .../Stepper/VerticalNonLinearStepper.js | 109 - .../pages/components/Subheader/Page.js | 52 - .../pages/components/Subheader/README.md | 7 - .../pages/components/SvgIcon/ExampleIcons.js | 21 - .../pages/components/SvgIcon/ExampleSimple.js | 23 - .../pages/components/SvgIcon/Page.js | 42 - .../pages/components/SvgIcon/README.md | 19 - .../pages/components/Table/ExampleComplex.js | 206 - .../components/Table/ExampleControlled.js | 61 - .../pages/components/Table/ExampleSimple.js | 53 - .../components/pages/components/Table/Page.js | 56 - .../pages/components/Table/README.md | 6 - .../components/Tabs/ExampleControlled.js | 57 - .../pages/components/Tabs/ExampleIcon.js | 14 - .../pages/components/Tabs/ExampleIconText.js | 23 - .../pages/components/Tabs/ExampleSimple.js | 55 - .../pages/components/Tabs/ExampleSwipeable.js | 62 - .../components/pages/components/Tabs/Page.js | 77 - .../pages/components/Tabs/README.md | 9 - .../components/TextField/ExampleControlled.js | 31 - .../components/TextField/ExampleCustomize.js | 47 - .../components/TextField/ExampleDisabled.js | 29 - .../components/TextField/ExampleError.js | 29 - .../components/TextField/ExampleSimple.js | 54 - .../pages/components/TextField/Page.js | 71 - .../pages/components/TextField/README.md | 6 - .../components/TimePicker/ExampleComplex.js | 37 - .../TimePicker/ExampleInternational.js | 14 - .../components/TimePicker/ExampleSimple.js | 25 - .../components/TimePicker/ExampleStep.js | 17 - .../pages/components/TimePicker/Page.js | 63 - .../pages/components/TimePicker/README.md | 6 - .../pages/components/Toggle/ExampleSimple.js | 60 - .../pages/components/Toggle/Page.js | 32 - .../pages/components/Toggle/README.md | 6 - .../pages/components/Toolbar/ExampleSimple.js | 55 - .../pages/components/Toolbar/Page.js | 39 - .../pages/components/Toolbar/README.md | 7 - .../pages/components/Toolbar/Toolbar.md | 1 - .../pages/components/Toolbar/ToolbarGroup.md | 4 - .../components/Toolbar/ToolbarSeparator.md | 4 - .../pages/components/Toolbar/ToolbarTitle.md | 3 - .../components/pages/customization/Colors.js | 178 - .../components/pages/customization/Styles.js | 49 - .../StylesOverridingCssExample.js | 12 - .../StylesOverridingInlineExample.js | 17 - .../components/pages/customization/Themes.js | 374 -- .../customization/styles-overriding-css.md | 8 - .../customization/styles-overriding-inline.md | 12 - .../components/pages/customization/styles.md | 16 - .../components/pages/customization/themes.md | 163 - .../pages/discover-more/Community.js | 13 - .../pages/discover-more/Contributing.js | 13 - .../pages/discover-more/RelatedProjects.js | 13 - .../pages/discover-more/Showcase.js | 214 - .../pages/discover-more/community.md | 8 - .../pages/discover-more/related-projects.md | 29 - .../pages/discover-more/showcase.md | 5 - .../components/pages/get-started/Examples.js | 14 - .../pages/get-started/Installation.js | 14 - .../pages/get-started/RequiredKnowledge.js | 13 - .../pages/get-started/ServerRendering.js | 13 - .../app/components/pages/get-started/Usage.js | 14 - .../components/pages/get-started/examples.md | 15 - .../pages/get-started/installation.md | 15 - .../pages/get-started/required-knowledge.md | 91 - .../pages/get-started/server-rendering.md | 56 - .../app/components/pages/get-started/usage.md | 61 - .../app/components/prop-type-description.css | 42 - .../font-icons/fonts/material-ui-icons.eot | Bin 2328 -> 0 bytes .../font-icons/fonts/material-ui-icons.svg | 21 - .../font-icons/fonts/material-ui-icons.ttf | Bin 2124 -> 0 bytes .../font-icons/fonts/material-ui-icons.woff | Bin 2200 -> 0 bytes docs/src/www/css/font-icons/style.css | 70 - docs/src/www/css/github.css | 125 - docs/src/www/css/main.css | 36 - docs/src/www/images/adellecharles-128.jpg | Bin 4167 -> 0 bytes docs/src/www/images/adhamdannaway-128.jpg | Bin 10118 -> 0 bytes docs/src/www/images/allisongrayce-128.jpg | Bin 5567 -> 0 bytes docs/src/www/images/angelceballos-128.jpg | Bin 3215 -> 0 bytes docs/src/www/images/baseline-20px-grid.gif | Bin 1110 -> 0 bytes docs/src/www/images/bottom-tear.svg | 12 - docs/src/www/images/chexee-128.jpg | Bin 5096 -> 0 bytes docs/src/www/images/components.svg | 77 - docs/src/www/images/css-framework.svg | 41 - docs/src/www/images/favicon.ico | Bin 15086 -> 0 bytes docs/src/www/images/get-started.svg | 141 - .../www/images/grid-list/00-52-29-429_640.jpg | Bin 72927 -> 0 bytes .../images/grid-list/burger-827309_640.jpg | Bin 32598 -> 0 bytes .../images/grid-list/camera-813814_640.jpg | Bin 80030 -> 0 bytes .../www/images/grid-list/hats-829509_640.jpg | Bin 73129 -> 0 bytes .../www/images/grid-list/honey-823614_640.jpg | Bin 49857 -> 0 bytes .../images/grid-list/morning-819362_640.jpg | Bin 51337 -> 0 bytes .../grid-list/vegetables-790022_640.jpg | Bin 112431 -> 0 bytes .../grid-list/water-plant-821293_640.jpg | Bin 52956 -> 0 bytes docs/src/www/images/jsa-128.jpg | Bin 2908 -> 0 bytes docs/src/www/images/kerem-128.jpg | Bin 4173 -> 0 bytes docs/src/www/images/kolage-128.jpg | Bin 5101 -> 0 bytes docs/src/www/images/material-ui-logo.svg | 42 - docs/src/www/images/nature-600-337.jpg | Bin 39808 -> 0 bytes docs/src/www/images/ok-128.jpg | Bin 3980 -> 0 bytes docs/src/www/images/raquelromanp-128.jpg | Bin 4788 -> 0 bytes docs/src/www/images/showcase/alarmdj.png | Bin 45876 -> 0 bytes .../showcase/apirequest-capture-by-moesif.png | Bin 83102 -> 0 bytes docs/src/www/images/showcase/arcchat.png | Bin 10662 -> 0 bytes .../brainbok-for-pmp-capm-certification.png | Bin 126163 -> 0 bytes docs/src/www/images/showcase/callemall.png | Bin 1927 -> 0 bytes docs/src/www/images/showcase/casalova.png | Bin 2337 -> 0 bytes docs/src/www/images/showcase/cloudcraft.png | Bin 7427 -> 0 bytes docs/src/www/images/showcase/crypticker.png | Bin 90662 -> 0 bytes .../www/images/showcase/dearborn-denim.png | Bin 4244 -> 0 bytes docs/src/www/images/showcase/devsketch.png | Bin 112771 -> 0 bytes docs/src/www/images/showcase/flow.png | Bin 69472 -> 0 bytes docs/src/www/images/showcase/flyweekend.png | Bin 258479 -> 0 bytes .../images/showcase/gh-invoice-builder.png | Bin 433859 -> 0 bytes .../hoophubs-basketball-stats-tool.png | Bin 154140 -> 0 bytes docs/src/www/images/showcase/itsquiz.png | Bin 73107 -> 0 bytes docs/src/www/images/showcase/lirelactu.png | Bin 199612 -> 0 bytes .../www/images/showcase/react-most-wanted.png | Bin 11349 -> 0 bytes .../images/showcase/realty-advisors-elite.png | Bin 96758 -> 0 bytes docs/src/www/images/showcase/serif-nu.png | Bin 335567 -> 0 bytes docs/src/www/images/showcase/slimchess.png | Bin 368165 -> 0 bytes docs/src/www/images/showcase/smaftv.png | Bin 67910 -> 0 bytes docs/src/www/images/showcase/smpl.png | Bin 653858 -> 0 bytes docs/src/www/images/showcase/splitme.png | Bin 5892 -> 0 bytes docs/src/www/images/showcase/syncano.png | Bin 11961 -> 0 bytes .../src/www/images/showcase/wv-order-form.png | Bin 74907 -> 0 bytes docs/src/www/images/uxceo-128.jpg | Bin 4467 -> 0 bytes docs/src/www/index.html | 48 - docs/src/www/versions.json | 73 - docs/webpack-dev-server.config.js | 85 - docs/webpack-production.config.js | 92 - examples/razzle-styled-example | 1 - examples/webpack-example | 1 - index.es.js | 132 + index.js | 339 ++ internal/AppCanvas.js | 98 + internal/AutoLockScrolling.js | 124 + internal/BeforeAfterWrapper.js | 154 + internal/CircleRipple.js | 172 + internal/ClearFix.js | 66 + internal/ClickAwayListener.js | 129 + internal/EnhancedButton.js | 389 ++ internal/EnhancedSwitch.js | 464 ++ internal/ExpandTransition.js | 145 + internal/ExpandTransitionChild.js | 195 + internal/FocusRipple.js | 199 + internal/Overlay.js | 144 + internal/RenderToLayer.js | 179 + internal/ScaleIn.js | 128 + internal/ScaleInChild.js | 170 + internal/SlideIn.js | 138 + internal/SlideInChild.js | 152 + internal/Tooltip.js | 228 + internal/TouchRipple.js | 311 ++ package.json | 86 +- packages/icon-builder/.gitignore | 2 - packages/icon-builder/Gruntfile.js | 39 - packages/icon-builder/README.md | 34 - packages/icon-builder/build.js | 187 - .../icon-builder/filters/rename/default.js | 32 - .../filters/rename/material-design-icons.js | 21 - packages/icon-builder/package.json | 42 - .../test/fixtures/game-icons/README.md | 12 - .../transparent/dice-six-faces-five.svg | 1 - .../transparent/dice-six-faces-four.svg | 1 - .../perspective-dice-six-faces-random.svg | 1 - .../perspective-dice-six-faces-six.svg | 1 - .../svg/000000/transparent/pistol-gun.svg | 1 - .../originals/svg/000000/transparent/ace.svg | 1 - .../svg/000000/transparent/acid-blob.svg | 1 - .../svg/000000/transparent/acorn.svg | 1 - .../svg/000000/transparent/alien-skull.svg | 1 - .../svg/production/ic_3d_rotation_24px.svg | 1 - .../svg/production/ic_3d_rotation_48px.svg | 1 - .../svg/production/ic_accessibility_24px.svg | 1 - .../svg/production/ic_accessibility_48px.svg | 1 - .../production/ic_account_balance_24px.svg | 1 - .../production/ic_account_balance_48px.svg | 1 - .../ic_account_balance_wallet_24px.svg | 1 - .../ic_account_balance_wallet_48px.svg | 1 - .../svg/production/ic_account_box_18px.svg | 1 - .../svg/production/ic_account_box_24px.svg | 1 - .../svg/production/ic_account_box_48px.svg | 1 - .../svg/production/ic_account_circle_18px.svg | 1 - .../svg/production/ic_account_circle_24px.svg | 1 - .../svg/production/ic_account_circle_48px.svg | 1 - .../production/ic_add_shopping_cart_24px.svg | 1 - .../production/ic_add_shopping_cart_48px.svg | 1 - .../action/svg/production/ic_alarm_24px.svg | 1 - .../action/svg/production/ic_alarm_48px.svg | 1 - .../svg/social/svg/design/ic_cake_24px.svg | 4 - .../svg/social/svg/design/ic_cake_48px.svg | 4 - .../svg/social/svg/design/ic_domain_18px.svg | 4 - .../svg/social/svg/design/ic_domain_24px.svg | 4 - .../svg/social/svg/design/ic_domain_48px.svg | 4 - .../social/svg/production/ic_cake_24px.svg | 1 - .../social/svg/production/ic_cake_48px.svg | 1 - .../social/svg/production/ic_domain_18px.svg | 1 - .../social/svg/production/ic_domain_24px.svg | 1 - .../social/svg/production/ic_domain_48px.svg | 1 - .../social/svg/production/ic_group_18px.svg | 1 - .../social/svg/production/ic_group_24px.svg | 1 - .../social/svg/production/ic_group_48px.svg | 1 - .../svg/production/ic_group_add_18px.svg | 1 - packages/icon-builder/test/index.js | 233 - packages/icon-builder/tpl/SvgIcon.js | 14 - packages/material-ui-codemod/.babelrc | 4 - packages/material-ui-codemod/.gitignore | 1 - packages/material-ui-codemod/README.md | 51 - .../modules/v0.15.0/import-path.js | 107 - .../modules/v0.15.0/import-path.spec.js | 37 - .../v0.15.0/import-path.spec/actual.js | 5 - .../v0.15.0/import-path.spec/expected.js | 5 - packages/material-ui-codemod/package.json | 32 - packages/material-ui-codemod/test.js | 38 - scripts/copy-files.js | 87 - scripts/icon-index-generator.js | 28 - scripts/prefixGenerator.js | 25 - scripts/run-travis-tests.sh | 9 - src/AppBar/AppBar.js | 330 -- src/AppBar/AppBar.spec.js | 263 - src/AppBar/index.js | 1 - src/AutoComplete/AutoComplete.js | 621 --- src/AutoComplete/AutoComplete.spec.js | 224 - src/AutoComplete/index.js | 1 - src/Avatar/Avatar.js | 124 - src/Avatar/Avatar.spec.js | 45 - src/Avatar/index.js | 1 - src/Badge/Badge.js | 118 - src/Badge/Badge.spec.js | 89 - src/Badge/index.js | 1 - src/BottomNavigation/BottomNavigation.js | 75 - src/BottomNavigation/BottomNavigation.spec.js | 71 - src/BottomNavigation/BottomNavigationItem.js | 93 - .../BottomNavigationItem.spec.js | 24 - src/BottomNavigation/index.js | 4 - src/Card/Card.js | 153 - src/Card/CardActions.js | 73 - src/Card/CardExpandable.js | 53 - src/Card/CardHeader.js | 169 - src/Card/CardMedia.js | 154 - src/Card/CardText.js | 68 - src/Card/CardTitle.js | 121 - src/Card/index.js | 9 - src/Checkbox/Checkbox.js | 239 - src/Checkbox/Checkbox.spec.js | 101 - src/Checkbox/index.js | 1 - src/Chip/Chip.js | 312 -- src/Chip/Chip.spec.js | 190 - src/Chip/index.js | 1 - src/CircularProgress/CircularProgress.js | 197 - src/CircularProgress/index.js | 1 - src/DatePicker/Calendar.js | 416 -- src/DatePicker/Calendar.spec.js | 253 - src/DatePicker/CalendarActionButtons.js | 73 - src/DatePicker/CalendarMonth.js | 111 - src/DatePicker/CalendarToolbar.js | 112 - src/DatePicker/CalendarYear.js | 130 - src/DatePicker/CalendarYear.spec.js | 36 - src/DatePicker/DateDisplay.js | 173 - src/DatePicker/DateDisplay.spec.js | 30 - src/DatePicker/DatePicker.js | 371 -- src/DatePicker/DatePicker.spec.js | 25 - src/DatePicker/DatePickerDialog.js | 204 - src/DatePicker/DayButton.js | 141 - src/DatePicker/DayButton.spec.js | 29 - src/DatePicker/YearButton.js | 104 - src/DatePicker/dateUtils.js | 180 - src/DatePicker/index.js | 1 - src/Dialog/Dialog.js | 493 -- src/Dialog/Dialog.spec.js | 106 - src/Dialog/index.js | 1 - src/Divider/Divider.js | 53 - src/Divider/Divider.spec.js | 45 - src/Divider/index.js | 1 - src/Drawer/Drawer.js | 424 -- src/Drawer/Drawer.spec.js | 68 - src/Drawer/index.js | 1 - src/DropDownMenu/DropDownMenu.js | 494 -- src/DropDownMenu/DropDownMenu.spec.js | 333 -- src/DropDownMenu/index.js | 4 - src/FlatButton/FlatButton.js | 309 -- src/FlatButton/FlatButton.spec.js | 204 - src/FlatButton/FlatButtonLabel.js | 42 - src/FlatButton/index.js | 1 - .../FloatingActionButton.js | 339 -- .../FloatingActionButton.spec.js | 80 - src/FloatingActionButton/index.js | 1 - src/FontIcon/FontIcon.js | 106 - src/FontIcon/FontIcon.spec.js | 96 - src/FontIcon/index.js | 1 - src/GridList/GridList.js | 92 - src/GridList/GridList.spec.js | 142 - src/GridList/GridTile.js | 250 - src/GridList/GridTile.spec.js | 65 - src/GridList/index.js | 4 - src/IconButton/IconButton.js | 320 -- src/IconButton/IconButton.spec.js | 95 - src/IconButton/index.js | 1 - src/IconMenu/IconMenu.js | 337 -- src/IconMenu/IconMenu.spec.js | 20 - src/IconMenu/index.js | 4 - src/LinearProgress/LinearProgress.js | 172 - src/LinearProgress/LinearProgress.spec.js | 55 - src/LinearProgress/index.js | 1 - src/List/List.js | 52 - src/List/ListItem.js | 753 --- src/List/ListItem.spec.js | 251 - src/List/NestedList.js | 40 - src/List/NestedList.spec.js | 30 - src/List/index.js | 5 - src/List/makeSelectable.js | 101 - src/Menu/Menu.js | 596 -- src/Menu/Menu.spec.js | 283 - src/Menu/index.js | 4 - src/Menu/menuUtils.js | 11 - src/Menu/menuUtils.spec.js | 42 - src/MenuItem/MenuItem.js | 335 -- src/MenuItem/MenuItem.spec.js | 48 - src/MenuItem/index.js | 1 - src/Paper/Paper.js | 96 - src/Paper/Paper.spec.js | 90 - src/Paper/index.js | 1 - src/Popover/Popover.js | 434 -- src/Popover/Popover.spec.js | 132 - src/Popover/PopoverAnimationDefault.js | 105 - src/Popover/PopoverAnimationVertical.js | 83 - src/Popover/index.js | 4 - src/RadioButton/RadioButton.js | 205 - src/RadioButton/RadioButtonGroup.js | 165 - src/RadioButton/RadioButtonGroup.spec.js | 39 - src/RadioButton/index.js | 4 - src/RaisedButton/RaisedButton.js | 452 -- src/RaisedButton/RaisedButton.spec.js | 159 - src/RaisedButton/index.js | 1 - src/RefreshIndicator/RefreshIndicator.js | 329 -- src/RefreshIndicator/index.js | 1 - src/SelectField/SelectField.js | 262 - src/SelectField/SelectField.spec.js | 126 - src/SelectField/index.js | 1 - src/Slider/Slider.js | 873 --- src/Slider/Slider.spec.js | 620 --- src/Slider/index.js | 1 - src/Snackbar/Snackbar.js | 243 - src/Snackbar/Snackbar.spec.js | 92 - src/Snackbar/SnackbarBody.js | 142 - src/Snackbar/SnackbarBody.spec.js | 38 - src/Snackbar/index.js | 1 - src/Stepper/Step.js | 102 - src/Stepper/Step.spec.js | 80 - src/Stepper/StepButton.js | 149 - src/Stepper/StepButton.spec.js | 162 - src/Stepper/StepConnector.js | 57 - src/Stepper/StepConnector.spec.js | 39 - src/Stepper/StepContent.js | 103 - src/Stepper/StepContent.spec.js | 53 - src/Stepper/StepLabel.js | 162 - src/Stepper/StepLabel.spec.js | 224 - src/Stepper/Stepper.js | 113 - src/Stepper/Stepper.spec.js | 156 - src/Stepper/index.js | 5 - src/Subheader/Subheader.js | 61 - src/Subheader/index.js | 1 - src/SvgIcon/SvgIcon.js | 110 - src/SvgIcon/SvgIcon.spec.js | 111 - src/SvgIcon/index.js | 1 - src/Table/Table.js | 327 -- src/Table/TableBody.js | 461 -- src/Table/TableFooter.js | 98 - src/Table/TableHeader.js | 204 - src/Table/TableHeaderColumn.js | 148 - src/Table/TableRow.js | 225 - src/Table/TableRowColumn.js | 132 - src/Table/index.js | 9 - src/Tabs/InkBar.js | 49 - src/Tabs/Tab.js | 146 - src/Tabs/TabTemplate.js | 30 - src/Tabs/TabTemplate.spec.js | 23 - src/Tabs/Tabs.js | 255 - src/Tabs/Tabs.spec.js | 82 - src/Tabs/index.js | 4 - src/TextField/EnhancedTextarea.js | 197 - src/TextField/EnhancedTextarea.spec.js | 43 - src/TextField/TextField.js | 533 -- src/TextField/TextField.spec.js | 211 - src/TextField/TextFieldHint.js | 68 - src/TextField/TextFieldLabel.js | 99 - src/TextField/TextFieldLabel.spec.js | 25 - src/TextField/TextFieldUnderline.js | 127 - src/TextField/index.js | 1 - src/TimePicker/Clock.js | 192 - src/TimePicker/ClockHours.js | 183 - src/TimePicker/ClockMinutes.js | 162 - src/TimePicker/ClockMinutes.spec.js | 50 - src/TimePicker/ClockNumber.js | 115 - src/TimePicker/ClockPointer.js | 95 - src/TimePicker/TimeDisplay.js | 160 - src/TimePicker/TimePicker.js | 235 - src/TimePicker/TimePicker.spec.js | 56 - src/TimePicker/TimePickerDialog.js | 149 - src/TimePicker/TimePickerDialog.spec.js | 30 - src/TimePicker/index.js | 1 - src/TimePicker/timeUtils.js | 80 - src/Toggle/Toggle.js | 280 - src/Toggle/index.js | 1 - src/Toolbar/Toolbar.js | 73 - src/Toolbar/ToolbarGroup.js | 160 - src/Toolbar/ToolbarSeparator.js | 55 - src/Toolbar/ToolbarTitle.js | 67 - src/Toolbar/index.js | 6 - src/index.js | 66 - src/index.spec.js | 10 - src/internal/AppCanvas.js | 51 - src/internal/AutoLockScrolling.js | 69 - src/internal/BeforeAfterWrapper.js | 108 - src/internal/CircleRipple.js | 102 - src/internal/ClearFix.js | 38 - src/internal/ClickAwayListener.js | 64 - src/internal/EnhancedButton.js | 331 -- src/internal/EnhancedButton.spec.js | 309 -- src/internal/EnhancedSwitch.js | 400 -- src/internal/ExpandTransition.js | 82 - src/internal/ExpandTransitionChild.js | 113 - src/internal/FocusRipple.js | 128 - src/internal/Overlay.js | 87 - src/internal/RenderToLayer.js | 121 - src/internal/ScaleIn.js | 71 - src/internal/ScaleInChild.js | 101 - src/internal/SlideIn.js | 72 - src/internal/SlideInChild.js | 91 - src/internal/Tooltip.js | 182 - src/internal/TouchRipple.js | 233 - src/styles/MuiThemeProvider.js | 27 - src/styles/baseThemes/darkBaseTheme.js | 30 - src/styles/baseThemes/lightBaseTheme.js | 40 - src/styles/colors.js | 285 - src/styles/getMuiTheme.js | 344 -- src/styles/getMuiTheme.spec.js | 81 - src/styles/index.js | 12 - src/styles/muiThemeable.js | 28 - src/styles/spacing.js | 14 - src/styles/transitions.js | 30 - src/styles/typography.js | 32 - src/styles/zIndex.js | 12 - src/svg-icons/action/accessibility.js | 14 - src/svg-icons/action/accessible.js | 14 - .../action/account-balance-wallet.js | 14 - src/svg-icons/action/account-balance.js | 14 - src/svg-icons/action/account-box.js | 14 - src/svg-icons/action/account-circle.js | 14 - src/svg-icons/action/add-shopping-cart.js | 14 - src/svg-icons/action/alarm-add.js | 14 - src/svg-icons/action/alarm-off.js | 14 - src/svg-icons/action/alarm-on.js | 14 - src/svg-icons/action/alarm.js | 14 - src/svg-icons/action/all-out.js | 14 - src/svg-icons/action/android.js | 14 - src/svg-icons/action/announcement.js | 14 - src/svg-icons/action/aspect-ratio.js | 14 - src/svg-icons/action/assessment.js | 14 - src/svg-icons/action/assignment-ind.js | 14 - src/svg-icons/action/assignment-late.js | 14 - src/svg-icons/action/assignment-return.js | 14 - src/svg-icons/action/assignment-returned.js | 14 - src/svg-icons/action/assignment-turned-in.js | 14 - src/svg-icons/action/assignment.js | 14 - src/svg-icons/action/autorenew.js | 14 - src/svg-icons/action/backup.js | 14 - src/svg-icons/action/book.js | 14 - src/svg-icons/action/bookmark-border.js | 14 - src/svg-icons/action/bookmark.js | 14 - src/svg-icons/action/bug-report.js | 14 - src/svg-icons/action/build.js | 14 - src/svg-icons/action/cached.js | 14 - src/svg-icons/action/camera-enhance.js | 14 - src/svg-icons/action/card-giftcard.js | 14 - src/svg-icons/action/card-membership.js | 14 - src/svg-icons/action/card-travel.js | 14 - src/svg-icons/action/change-history.js | 14 - src/svg-icons/action/check-circle.js | 14 - src/svg-icons/action/chrome-reader-mode.js | 14 - src/svg-icons/action/class.js | 14 - src/svg-icons/action/code.js | 14 - src/svg-icons/action/compare-arrows.js | 14 - src/svg-icons/action/copyright.js | 14 - src/svg-icons/action/credit-card.js | 14 - src/svg-icons/action/dashboard.js | 14 - src/svg-icons/action/date-range.js | 14 - src/svg-icons/action/delete-forever.js | 14 - src/svg-icons/action/delete.js | 14 - src/svg-icons/action/description.js | 14 - src/svg-icons/action/dns.js | 14 - src/svg-icons/action/done-all.js | 14 - src/svg-icons/action/done.js | 14 - src/svg-icons/action/donut-large.js | 14 - src/svg-icons/action/donut-small.js | 14 - src/svg-icons/action/eject.js | 14 - src/svg-icons/action/euro-symbol.js | 14 - src/svg-icons/action/event-seat.js | 14 - src/svg-icons/action/event.js | 14 - src/svg-icons/action/exit-to-app.js | 14 - src/svg-icons/action/explore.js | 14 - src/svg-icons/action/extension.js | 14 - src/svg-icons/action/face.js | 14 - src/svg-icons/action/favorite-border.js | 14 - src/svg-icons/action/favorite.js | 14 - src/svg-icons/action/feedback.js | 14 - src/svg-icons/action/find-in-page.js | 14 - src/svg-icons/action/find-replace.js | 14 - src/svg-icons/action/fingerprint.js | 14 - src/svg-icons/action/flight-land.js | 14 - src/svg-icons/action/flight-takeoff.js | 14 - src/svg-icons/action/flip-to-back.js | 14 - src/svg-icons/action/flip-to-front.js | 14 - src/svg-icons/action/g-translate.js | 14 - src/svg-icons/action/gavel.js | 14 - src/svg-icons/action/get-app.js | 14 - src/svg-icons/action/gif.js | 14 - src/svg-icons/action/grade.js | 14 - src/svg-icons/action/group-work.js | 14 - src/svg-icons/action/help-outline.js | 14 - src/svg-icons/action/help.js | 14 - src/svg-icons/action/highlight-off.js | 14 - src/svg-icons/action/history.js | 14 - src/svg-icons/action/home.js | 14 - src/svg-icons/action/hourglass-empty.js | 14 - src/svg-icons/action/hourglass-full.js | 14 - src/svg-icons/action/http.js | 14 - src/svg-icons/action/https.js | 14 - src/svg-icons/action/important-devices.js | 14 - src/svg-icons/action/info-outline.js | 14 - src/svg-icons/action/info.js | 14 - src/svg-icons/action/input.js | 14 - src/svg-icons/action/invert-colors.js | 14 - src/svg-icons/action/label-outline.js | 14 - src/svg-icons/action/label.js | 14 - src/svg-icons/action/language.js | 14 - src/svg-icons/action/launch.js | 14 - src/svg-icons/action/lightbulb-outline.js | 14 - src/svg-icons/action/line-style.js | 14 - src/svg-icons/action/line-weight.js | 14 - src/svg-icons/action/list.js | 14 - src/svg-icons/action/lock-open.js | 14 - src/svg-icons/action/lock-outline.js | 14 - src/svg-icons/action/lock.js | 14 - src/svg-icons/action/loyalty.js | 14 - src/svg-icons/action/markunread-mailbox.js | 14 - src/svg-icons/action/motorcycle.js | 14 - src/svg-icons/action/note-add.js | 14 - src/svg-icons/action/offline-pin.js | 14 - src/svg-icons/action/opacity.js | 14 - src/svg-icons/action/open-in-browser.js | 14 - src/svg-icons/action/open-in-new.js | 14 - src/svg-icons/action/open-with.js | 14 - src/svg-icons/action/pageview.js | 14 - src/svg-icons/action/pan-tool.js | 14 - src/svg-icons/action/payment.js | 14 - src/svg-icons/action/perm-camera-mic.js | 14 - src/svg-icons/action/perm-contact-calendar.js | 14 - src/svg-icons/action/perm-data-setting.js | 14 - .../action/perm-device-information.js | 14 - src/svg-icons/action/perm-identity.js | 14 - src/svg-icons/action/perm-media.js | 14 - src/svg-icons/action/perm-phone-msg.js | 14 - src/svg-icons/action/perm-scan-wifi.js | 14 - src/svg-icons/action/pets.js | 14 - .../action/picture-in-picture-alt.js | 14 - src/svg-icons/action/picture-in-picture.js | 14 - src/svg-icons/action/play-for-work.js | 14 - src/svg-icons/action/polymer.js | 14 - src/svg-icons/action/power-settings-new.js | 14 - src/svg-icons/action/pregnant-woman.js | 14 - src/svg-icons/action/print.js | 14 - src/svg-icons/action/query-builder.js | 14 - src/svg-icons/action/question-answer.js | 14 - src/svg-icons/action/receipt.js | 14 - src/svg-icons/action/record-voice-over.js | 14 - src/svg-icons/action/redeem.js | 14 - src/svg-icons/action/remove-shopping-cart.js | 14 - src/svg-icons/action/reorder.js | 14 - src/svg-icons/action/report-problem.js | 14 - src/svg-icons/action/restore-page.js | 14 - src/svg-icons/action/restore.js | 14 - src/svg-icons/action/room.js | 14 - src/svg-icons/action/rounded-corner.js | 14 - src/svg-icons/action/rowing.js | 14 - src/svg-icons/action/schedule.js | 14 - src/svg-icons/action/search.js | 14 - src/svg-icons/action/settings-applications.js | 14 - .../action/settings-backup-restore.js | 14 - src/svg-icons/action/settings-bluetooth.js | 14 - src/svg-icons/action/settings-brightness.js | 14 - src/svg-icons/action/settings-cell.js | 14 - src/svg-icons/action/settings-ethernet.js | 14 - .../action/settings-input-antenna.js | 14 - .../action/settings-input-component.js | 14 - .../action/settings-input-composite.js | 14 - src/svg-icons/action/settings-input-hdmi.js | 14 - src/svg-icons/action/settings-input-svideo.js | 14 - src/svg-icons/action/settings-overscan.js | 14 - src/svg-icons/action/settings-phone.js | 14 - src/svg-icons/action/settings-power.js | 14 - src/svg-icons/action/settings-remote.js | 14 - src/svg-icons/action/settings-voice.js | 14 - src/svg-icons/action/settings.js | 14 - src/svg-icons/action/shop-two.js | 14 - src/svg-icons/action/shop.js | 14 - src/svg-icons/action/shopping-basket.js | 14 - src/svg-icons/action/shopping-cart.js | 14 - src/svg-icons/action/speaker-notes-off.js | 14 - src/svg-icons/action/speaker-notes.js | 14 - src/svg-icons/action/spellcheck.js | 14 - src/svg-icons/action/stars.js | 14 - src/svg-icons/action/store.js | 14 - src/svg-icons/action/subject.js | 14 - src/svg-icons/action/supervisor-account.js | 14 - src/svg-icons/action/swap-horiz.js | 14 - src/svg-icons/action/swap-vert.js | 14 - src/svg-icons/action/swap-vertical-circle.js | 14 - src/svg-icons/action/system-update-alt.js | 14 - src/svg-icons/action/tab-unselected.js | 14 - src/svg-icons/action/tab.js | 14 - src/svg-icons/action/theaters.js | 14 - src/svg-icons/action/three-d-rotation.js | 14 - src/svg-icons/action/thumb-down.js | 14 - src/svg-icons/action/thumb-up.js | 14 - src/svg-icons/action/thumbs-up-down.js | 14 - src/svg-icons/action/timeline.js | 14 - src/svg-icons/action/toc.js | 14 - src/svg-icons/action/today.js | 14 - src/svg-icons/action/toll.js | 14 - src/svg-icons/action/touch-app.js | 14 - src/svg-icons/action/track-changes.js | 14 - src/svg-icons/action/translate.js | 14 - src/svg-icons/action/trending-down.js | 14 - src/svg-icons/action/trending-flat.js | 14 - src/svg-icons/action/trending-up.js | 14 - src/svg-icons/action/turned-in-not.js | 14 - src/svg-icons/action/turned-in.js | 14 - src/svg-icons/action/update.js | 14 - src/svg-icons/action/verified-user.js | 14 - src/svg-icons/action/view-agenda.js | 14 - src/svg-icons/action/view-array.js | 14 - src/svg-icons/action/view-carousel.js | 14 - src/svg-icons/action/view-column.js | 14 - src/svg-icons/action/view-day.js | 14 - src/svg-icons/action/view-headline.js | 14 - src/svg-icons/action/view-list.js | 14 - src/svg-icons/action/view-module.js | 14 - src/svg-icons/action/view-quilt.js | 14 - src/svg-icons/action/view-stream.js | 14 - src/svg-icons/action/view-week.js | 14 - src/svg-icons/action/visibility-off.js | 14 - src/svg-icons/action/visibility.js | 14 - src/svg-icons/action/watch-later.js | 14 - src/svg-icons/action/work.js | 14 - src/svg-icons/action/youtube-searched-for.js | 14 - src/svg-icons/action/zoom-in.js | 14 - src/svg-icons/action/zoom-out.js | 14 - src/svg-icons/alert/add-alert.js | 14 - src/svg-icons/alert/error-outline.js | 14 - src/svg-icons/alert/error.js | 14 - src/svg-icons/alert/warning.js | 14 - src/svg-icons/av/add-to-queue.js | 14 - src/svg-icons/av/airplay.js | 14 - src/svg-icons/av/album.js | 14 - src/svg-icons/av/art-track.js | 14 - src/svg-icons/av/av-timer.js | 14 - src/svg-icons/av/branding-watermark.js | 14 - src/svg-icons/av/call-to-action.js | 14 - src/svg-icons/av/closed-caption.js | 14 - src/svg-icons/av/equalizer.js | 14 - src/svg-icons/av/explicit.js | 14 - src/svg-icons/av/fast-forward.js | 14 - src/svg-icons/av/fast-rewind.js | 14 - src/svg-icons/av/featured-play-list.js | 14 - src/svg-icons/av/featured-video.js | 14 - src/svg-icons/av/fiber-dvr.js | 14 - src/svg-icons/av/fiber-manual-record.js | 14 - src/svg-icons/av/fiber-new.js | 14 - src/svg-icons/av/fiber-pin.js | 14 - src/svg-icons/av/fiber-smart-record.js | 14 - src/svg-icons/av/forward-10.js | 14 - src/svg-icons/av/forward-30.js | 14 - src/svg-icons/av/forward-5.js | 14 - src/svg-icons/av/games.js | 14 - src/svg-icons/av/hd.js | 14 - src/svg-icons/av/hearing.js | 14 - src/svg-icons/av/high-quality.js | 14 - src/svg-icons/av/library-add.js | 14 - src/svg-icons/av/library-books.js | 14 - src/svg-icons/av/library-music.js | 14 - src/svg-icons/av/loop.js | 14 - src/svg-icons/av/mic-none.js | 14 - src/svg-icons/av/mic-off.js | 14 - src/svg-icons/av/mic.js | 14 - src/svg-icons/av/movie.js | 14 - src/svg-icons/av/music-video.js | 14 - src/svg-icons/av/new-releases.js | 14 - src/svg-icons/av/not-interested.js | 14 - src/svg-icons/av/note.js | 14 - src/svg-icons/av/pause-circle-filled.js | 14 - src/svg-icons/av/pause-circle-outline.js | 14 - src/svg-icons/av/pause.js | 14 - src/svg-icons/av/play-arrow.js | 14 - src/svg-icons/av/play-circle-filled.js | 14 - src/svg-icons/av/play-circle-outline.js | 14 - src/svg-icons/av/playlist-add-check.js | 14 - src/svg-icons/av/playlist-add.js | 14 - src/svg-icons/av/playlist-play.js | 14 - src/svg-icons/av/queue-music.js | 14 - src/svg-icons/av/queue-play-next.js | 14 - src/svg-icons/av/queue.js | 14 - src/svg-icons/av/radio.js | 14 - src/svg-icons/av/recent-actors.js | 14 - src/svg-icons/av/remove-from-queue.js | 14 - src/svg-icons/av/repeat-one.js | 14 - src/svg-icons/av/repeat.js | 14 - src/svg-icons/av/replay-10.js | 14 - src/svg-icons/av/replay-30.js | 14 - src/svg-icons/av/replay-5.js | 14 - src/svg-icons/av/replay.js | 14 - src/svg-icons/av/shuffle.js | 14 - src/svg-icons/av/skip-next.js | 14 - src/svg-icons/av/skip-previous.js | 14 - src/svg-icons/av/slow-motion-video.js | 14 - src/svg-icons/av/snooze.js | 14 - src/svg-icons/av/sort-by-alpha.js | 14 - src/svg-icons/av/stop.js | 14 - src/svg-icons/av/subscriptions.js | 14 - src/svg-icons/av/subtitles.js | 14 - src/svg-icons/av/surround-sound.js | 14 - src/svg-icons/av/video-call.js | 14 - src/svg-icons/av/video-label.js | 14 - src/svg-icons/av/video-library.js | 14 - src/svg-icons/av/videocam-off.js | 14 - src/svg-icons/av/videocam.js | 14 - src/svg-icons/av/volume-down.js | 14 - src/svg-icons/av/volume-mute.js | 14 - src/svg-icons/av/volume-off.js | 14 - src/svg-icons/av/volume-up.js | 14 - src/svg-icons/av/web-asset.js | 14 - src/svg-icons/av/web.js | 14 - src/svg-icons/communication/business.js | 14 - src/svg-icons/communication/call-end.js | 14 - src/svg-icons/communication/call-made.js | 14 - src/svg-icons/communication/call-merge.js | 14 - .../communication/call-missed-outgoing.js | 14 - src/svg-icons/communication/call-missed.js | 14 - src/svg-icons/communication/call-received.js | 14 - src/svg-icons/communication/call-split.js | 14 - src/svg-icons/communication/call.js | 14 - .../communication/chat-bubble-outline.js | 14 - src/svg-icons/communication/chat-bubble.js | 14 - src/svg-icons/communication/chat.js | 14 - src/svg-icons/communication/clear-all.js | 14 - src/svg-icons/communication/comment.js | 14 - src/svg-icons/communication/contact-mail.js | 14 - src/svg-icons/communication/contact-phone.js | 14 - src/svg-icons/communication/contacts.js | 14 - src/svg-icons/communication/dialer-sip.js | 14 - src/svg-icons/communication/dialpad.js | 14 - src/svg-icons/communication/email.js | 14 - src/svg-icons/communication/forum.js | 14 - .../communication/import-contacts.js | 14 - src/svg-icons/communication/import-export.js | 14 - .../communication/invert-colors-off.js | 14 - src/svg-icons/communication/live-help.js | 14 - src/svg-icons/communication/location-off.js | 14 - src/svg-icons/communication/location-on.js | 14 - src/svg-icons/communication/mail-outline.js | 14 - src/svg-icons/communication/message.js | 14 - src/svg-icons/communication/no-sim.js | 14 - src/svg-icons/communication/phone.js | 14 - .../communication/phonelink-erase.js | 14 - src/svg-icons/communication/phonelink-lock.js | 14 - src/svg-icons/communication/phonelink-ring.js | 14 - .../communication/phonelink-setup.js | 14 - .../communication/portable-wifi-off.js | 14 - src/svg-icons/communication/present-to-all.js | 14 - src/svg-icons/communication/ring-volume.js | 14 - src/svg-icons/communication/rss-feed.js | 14 - src/svg-icons/communication/screen-share.js | 14 - src/svg-icons/communication/speaker-phone.js | 14 - .../communication/stay-current-landscape.js | 14 - .../communication/stay-current-portrait.js | 14 - .../communication/stay-primary-landscape.js | 14 - .../communication/stay-primary-portrait.js | 14 - .../communication/stop-screen-share.js | 14 - src/svg-icons/communication/swap-calls.js | 14 - src/svg-icons/communication/textsms.js | 14 - src/svg-icons/communication/voicemail.js | 14 - src/svg-icons/communication/vpn-key.js | 14 - src/svg-icons/content/add-box.js | 14 - src/svg-icons/content/add-circle-outline.js | 14 - src/svg-icons/content/add-circle.js | 14 - src/svg-icons/content/add.js | 14 - src/svg-icons/content/archive.js | 14 - src/svg-icons/content/backspace.js | 14 - src/svg-icons/content/block.js | 14 - src/svg-icons/content/clear.js | 14 - src/svg-icons/content/content-copy.js | 14 - src/svg-icons/content/content-cut.js | 14 - src/svg-icons/content/content-paste.js | 14 - src/svg-icons/content/create.js | 14 - src/svg-icons/content/delete-sweep.js | 14 - src/svg-icons/content/drafts.js | 14 - src/svg-icons/content/filter-list.js | 14 - src/svg-icons/content/flag.js | 14 - src/svg-icons/content/font-download.js | 14 - src/svg-icons/content/forward.js | 14 - src/svg-icons/content/gesture.js | 14 - src/svg-icons/content/inbox.js | 14 - src/svg-icons/content/link.js | 14 - src/svg-icons/content/low-priority.js | 14 - src/svg-icons/content/mail.js | 14 - src/svg-icons/content/markunread.js | 14 - src/svg-icons/content/move-to-inbox.js | 14 - src/svg-icons/content/next-week.js | 14 - src/svg-icons/content/redo.js | 14 - .../content/remove-circle-outline.js | 14 - src/svg-icons/content/remove-circle.js | 14 - src/svg-icons/content/remove.js | 14 - src/svg-icons/content/reply-all.js | 14 - src/svg-icons/content/reply.js | 14 - src/svg-icons/content/report.js | 14 - src/svg-icons/content/save.js | 14 - src/svg-icons/content/select-all.js | 14 - src/svg-icons/content/send.js | 14 - src/svg-icons/content/sort.js | 14 - src/svg-icons/content/text-format.js | 14 - src/svg-icons/content/unarchive.js | 14 - src/svg-icons/content/undo.js | 14 - src/svg-icons/content/weekend.js | 14 - src/svg-icons/device/access-alarm.js | 14 - src/svg-icons/device/access-alarms.js | 14 - src/svg-icons/device/access-time.js | 14 - src/svg-icons/device/add-alarm.js | 14 - src/svg-icons/device/airplanemode-active.js | 14 - src/svg-icons/device/airplanemode-inactive.js | 14 - src/svg-icons/device/battery-20.js | 14 - src/svg-icons/device/battery-30.js | 14 - src/svg-icons/device/battery-50.js | 14 - src/svg-icons/device/battery-60.js | 14 - src/svg-icons/device/battery-80.js | 14 - src/svg-icons/device/battery-90.js | 14 - src/svg-icons/device/battery-alert.js | 14 - src/svg-icons/device/battery-charging-20.js | 14 - src/svg-icons/device/battery-charging-30.js | 14 - src/svg-icons/device/battery-charging-50.js | 14 - src/svg-icons/device/battery-charging-60.js | 14 - src/svg-icons/device/battery-charging-80.js | 14 - src/svg-icons/device/battery-charging-90.js | 14 - src/svg-icons/device/battery-charging-full.js | 14 - src/svg-icons/device/battery-full.js | 14 - src/svg-icons/device/battery-std.js | 14 - src/svg-icons/device/battery-unknown.js | 14 - src/svg-icons/device/bluetooth-connected.js | 14 - src/svg-icons/device/bluetooth-disabled.js | 14 - src/svg-icons/device/bluetooth-searching.js | 14 - src/svg-icons/device/bluetooth.js | 14 - src/svg-icons/device/brightness-auto.js | 14 - src/svg-icons/device/brightness-high.js | 14 - src/svg-icons/device/brightness-low.js | 14 - src/svg-icons/device/brightness-medium.js | 14 - src/svg-icons/device/data-usage.js | 14 - src/svg-icons/device/developer-mode.js | 14 - src/svg-icons/device/devices.js | 14 - src/svg-icons/device/dvr.js | 14 - src/svg-icons/device/gps-fixed.js | 14 - src/svg-icons/device/gps-not-fixed.js | 14 - src/svg-icons/device/gps-off.js | 14 - src/svg-icons/device/graphic-eq.js | 14 - src/svg-icons/device/location-disabled.js | 14 - src/svg-icons/device/location-searching.js | 14 - src/svg-icons/device/network-cell.js | 14 - src/svg-icons/device/network-wifi.js | 14 - src/svg-icons/device/nfc.js | 14 - src/svg-icons/device/screen-lock-landscape.js | 14 - src/svg-icons/device/screen-lock-portrait.js | 14 - src/svg-icons/device/screen-lock-rotation.js | 14 - src/svg-icons/device/screen-rotation.js | 14 - src/svg-icons/device/sd-storage.js | 14 - .../device/settings-system-daydream.js | 14 - src/svg-icons/device/signal-cellular-0-bar.js | 14 - src/svg-icons/device/signal-cellular-1-bar.js | 14 - src/svg-icons/device/signal-cellular-2-bar.js | 14 - src/svg-icons/device/signal-cellular-3-bar.js | 14 - src/svg-icons/device/signal-cellular-4-bar.js | 14 - ...al-cellular-connected-no-internet-0-bar.js | 14 - ...al-cellular-connected-no-internet-1-bar.js | 14 - ...al-cellular-connected-no-internet-2-bar.js | 14 - ...al-cellular-connected-no-internet-3-bar.js | 14 - ...al-cellular-connected-no-internet-4-bar.js | 14 - .../device/signal-cellular-no-sim.js | 14 - src/svg-icons/device/signal-cellular-null.js | 14 - src/svg-icons/device/signal-cellular-off.js | 14 - src/svg-icons/device/signal-wifi-0-bar.js | 14 - .../device/signal-wifi-1-bar-lock.js | 14 - src/svg-icons/device/signal-wifi-1-bar.js | 14 - .../device/signal-wifi-2-bar-lock.js | 14 - src/svg-icons/device/signal-wifi-2-bar.js | 14 - .../device/signal-wifi-3-bar-lock.js | 14 - src/svg-icons/device/signal-wifi-3-bar.js | 14 - .../device/signal-wifi-4-bar-lock.js | 14 - src/svg-icons/device/signal-wifi-4-bar.js | 14 - src/svg-icons/device/signal-wifi-off.js | 14 - src/svg-icons/device/storage.js | 14 - src/svg-icons/device/usb.js | 14 - src/svg-icons/device/wallpaper.js | 14 - src/svg-icons/device/widgets.js | 14 - src/svg-icons/device/wifi-lock.js | 14 - src/svg-icons/device/wifi-tethering.js | 14 - src/svg-icons/editor/attach-file.js | 14 - src/svg-icons/editor/attach-money.js | 14 - src/svg-icons/editor/border-all.js | 14 - src/svg-icons/editor/border-bottom.js | 14 - src/svg-icons/editor/border-clear.js | 14 - src/svg-icons/editor/border-color.js | 14 - src/svg-icons/editor/border-horizontal.js | 14 - src/svg-icons/editor/border-inner.js | 14 - src/svg-icons/editor/border-left.js | 14 - src/svg-icons/editor/border-outer.js | 14 - src/svg-icons/editor/border-right.js | 14 - src/svg-icons/editor/border-style.js | 14 - src/svg-icons/editor/border-top.js | 14 - src/svg-icons/editor/border-vertical.js | 14 - src/svg-icons/editor/bubble-chart.js | 14 - src/svg-icons/editor/drag-handle.js | 14 - src/svg-icons/editor/format-align-center.js | 14 - src/svg-icons/editor/format-align-justify.js | 14 - src/svg-icons/editor/format-align-left.js | 14 - src/svg-icons/editor/format-align-right.js | 14 - src/svg-icons/editor/format-bold.js | 14 - src/svg-icons/editor/format-clear.js | 14 - src/svg-icons/editor/format-color-fill.js | 14 - src/svg-icons/editor/format-color-reset.js | 14 - src/svg-icons/editor/format-color-text.js | 14 - .../editor/format-indent-decrease.js | 14 - .../editor/format-indent-increase.js | 14 - src/svg-icons/editor/format-italic.js | 14 - src/svg-icons/editor/format-line-spacing.js | 14 - src/svg-icons/editor/format-list-bulleted.js | 14 - src/svg-icons/editor/format-list-numbered.js | 14 - src/svg-icons/editor/format-paint.js | 14 - src/svg-icons/editor/format-quote.js | 14 - src/svg-icons/editor/format-shapes.js | 14 - src/svg-icons/editor/format-size.js | 14 - src/svg-icons/editor/format-strikethrough.js | 14 - .../editor/format-textdirection-l-to-r.js | 14 - .../editor/format-textdirection-r-to-l.js | 14 - src/svg-icons/editor/format-underlined.js | 14 - src/svg-icons/editor/functions.js | 14 - src/svg-icons/editor/highlight.js | 14 - src/svg-icons/editor/insert-chart.js | 14 - src/svg-icons/editor/insert-comment.js | 14 - src/svg-icons/editor/insert-drive-file.js | 14 - src/svg-icons/editor/insert-emoticon.js | 14 - src/svg-icons/editor/insert-invitation.js | 14 - src/svg-icons/editor/insert-link.js | 14 - src/svg-icons/editor/insert-photo.js | 14 - src/svg-icons/editor/linear-scale.js | 14 - src/svg-icons/editor/merge-type.js | 14 - src/svg-icons/editor/mode-comment.js | 14 - src/svg-icons/editor/mode-edit.js | 14 - src/svg-icons/editor/monetization-on.js | 14 - src/svg-icons/editor/money-off.js | 14 - src/svg-icons/editor/multiline-chart.js | 14 - src/svg-icons/editor/pie-chart-outlined.js | 14 - src/svg-icons/editor/pie-chart.js | 14 - src/svg-icons/editor/publish.js | 14 - src/svg-icons/editor/short-text.js | 14 - src/svg-icons/editor/show-chart.js | 14 - src/svg-icons/editor/space-bar.js | 14 - src/svg-icons/editor/strikethrough-s.js | 14 - src/svg-icons/editor/text-fields.js | 14 - src/svg-icons/editor/title.js | 14 - src/svg-icons/editor/vertical-align-bottom.js | 14 - src/svg-icons/editor/vertical-align-center.js | 14 - src/svg-icons/editor/vertical-align-top.js | 14 - src/svg-icons/editor/wrap-text.js | 14 - src/svg-icons/file/attachment.js | 14 - src/svg-icons/file/cloud-circle.js | 14 - src/svg-icons/file/cloud-done.js | 14 - src/svg-icons/file/cloud-download.js | 14 - src/svg-icons/file/cloud-off.js | 14 - src/svg-icons/file/cloud-queue.js | 14 - src/svg-icons/file/cloud-upload.js | 14 - src/svg-icons/file/cloud.js | 14 - src/svg-icons/file/create-new-folder.js | 14 - src/svg-icons/file/file-download.js | 14 - src/svg-icons/file/file-upload.js | 14 - src/svg-icons/file/folder-open.js | 14 - src/svg-icons/file/folder-shared.js | 14 - src/svg-icons/file/folder.js | 14 - src/svg-icons/hardware/cast-connected.js | 14 - src/svg-icons/hardware/cast.js | 14 - src/svg-icons/hardware/computer.js | 14 - src/svg-icons/hardware/desktop-mac.js | 14 - src/svg-icons/hardware/desktop-windows.js | 14 - src/svg-icons/hardware/developer-board.js | 14 - src/svg-icons/hardware/device-hub.js | 14 - src/svg-icons/hardware/devices-other.js | 14 - src/svg-icons/hardware/dock.js | 14 - src/svg-icons/hardware/gamepad.js | 14 - src/svg-icons/hardware/headset-mic.js | 14 - src/svg-icons/hardware/headset.js | 14 - src/svg-icons/hardware/keyboard-arrow-down.js | 14 - src/svg-icons/hardware/keyboard-arrow-left.js | 14 - .../hardware/keyboard-arrow-right.js | 14 - src/svg-icons/hardware/keyboard-arrow-up.js | 14 - src/svg-icons/hardware/keyboard-backspace.js | 14 - src/svg-icons/hardware/keyboard-capslock.js | 14 - src/svg-icons/hardware/keyboard-hide.js | 14 - src/svg-icons/hardware/keyboard-return.js | 14 - src/svg-icons/hardware/keyboard-tab.js | 14 - src/svg-icons/hardware/keyboard-voice.js | 14 - src/svg-icons/hardware/keyboard.js | 14 - src/svg-icons/hardware/laptop-chromebook.js | 14 - src/svg-icons/hardware/laptop-mac.js | 14 - src/svg-icons/hardware/laptop-windows.js | 14 - src/svg-icons/hardware/laptop.js | 14 - src/svg-icons/hardware/memory.js | 14 - src/svg-icons/hardware/mouse.js | 14 - src/svg-icons/hardware/phone-android.js | 14 - src/svg-icons/hardware/phone-iphone.js | 14 - src/svg-icons/hardware/phonelink-off.js | 14 - src/svg-icons/hardware/phonelink.js | 14 - src/svg-icons/hardware/power-input.js | 14 - src/svg-icons/hardware/router.js | 14 - src/svg-icons/hardware/scanner.js | 14 - src/svg-icons/hardware/security.js | 14 - src/svg-icons/hardware/sim-card.js | 14 - src/svg-icons/hardware/smartphone.js | 14 - src/svg-icons/hardware/speaker-group.js | 14 - src/svg-icons/hardware/speaker.js | 14 - src/svg-icons/hardware/tablet-android.js | 14 - src/svg-icons/hardware/tablet-mac.js | 14 - src/svg-icons/hardware/tablet.js | 14 - src/svg-icons/hardware/toys.js | 14 - src/svg-icons/hardware/tv.js | 14 - src/svg-icons/hardware/videogame-asset.js | 14 - src/svg-icons/hardware/watch.js | 14 - src/svg-icons/image/add-a-photo.js | 14 - src/svg-icons/image/add-to-photos.js | 14 - src/svg-icons/image/adjust.js | 14 - src/svg-icons/image/assistant-photo.js | 14 - src/svg-icons/image/assistant.js | 14 - src/svg-icons/image/audiotrack.js | 14 - src/svg-icons/image/blur-circular.js | 14 - src/svg-icons/image/blur-linear.js | 14 - src/svg-icons/image/blur-off.js | 14 - src/svg-icons/image/blur-on.js | 14 - src/svg-icons/image/brightness-1.js | 14 - src/svg-icons/image/brightness-2.js | 14 - src/svg-icons/image/brightness-3.js | 14 - src/svg-icons/image/brightness-4.js | 14 - src/svg-icons/image/brightness-5.js | 14 - src/svg-icons/image/brightness-6.js | 14 - src/svg-icons/image/brightness-7.js | 14 - src/svg-icons/image/broken-image.js | 14 - src/svg-icons/image/brush.js | 14 - src/svg-icons/image/burst-mode.js | 14 - src/svg-icons/image/camera-alt.js | 14 - src/svg-icons/image/camera-front.js | 14 - src/svg-icons/image/camera-rear.js | 14 - src/svg-icons/image/camera-roll.js | 14 - src/svg-icons/image/camera.js | 14 - src/svg-icons/image/center-focus-strong.js | 14 - src/svg-icons/image/center-focus-weak.js | 14 - src/svg-icons/image/collections-bookmark.js | 14 - src/svg-icons/image/collections.js | 14 - src/svg-icons/image/color-lens.js | 14 - src/svg-icons/image/colorize.js | 14 - src/svg-icons/image/compare.js | 14 - .../image/control-point-duplicate.js | 14 - src/svg-icons/image/control-point.js | 14 - src/svg-icons/image/crop-16-9.js | 14 - src/svg-icons/image/crop-3-2.js | 14 - src/svg-icons/image/crop-5-4.js | 14 - src/svg-icons/image/crop-7-5.js | 14 - src/svg-icons/image/crop-din.js | 14 - src/svg-icons/image/crop-free.js | 14 - src/svg-icons/image/crop-landscape.js | 14 - src/svg-icons/image/crop-original.js | 14 - src/svg-icons/image/crop-portrait.js | 14 - src/svg-icons/image/crop-rotate.js | 14 - src/svg-icons/image/crop-square.js | 14 - src/svg-icons/image/crop.js | 14 - src/svg-icons/image/dehaze.js | 14 - src/svg-icons/image/details.js | 14 - src/svg-icons/image/edit.js | 14 - src/svg-icons/image/exposure-neg-1.js | 14 - src/svg-icons/image/exposure-neg-2.js | 14 - src/svg-icons/image/exposure-plus-1.js | 14 - src/svg-icons/image/exposure-plus-2.js | 14 - src/svg-icons/image/exposure-zero.js | 14 - src/svg-icons/image/exposure.js | 14 - src/svg-icons/image/filter-1.js | 14 - src/svg-icons/image/filter-2.js | 14 - src/svg-icons/image/filter-3.js | 14 - src/svg-icons/image/filter-4.js | 14 - src/svg-icons/image/filter-5.js | 14 - src/svg-icons/image/filter-6.js | 14 - src/svg-icons/image/filter-7.js | 14 - src/svg-icons/image/filter-8.js | 14 - src/svg-icons/image/filter-9-plus.js | 14 - src/svg-icons/image/filter-9.js | 14 - src/svg-icons/image/filter-b-and-w.js | 14 - src/svg-icons/image/filter-center-focus.js | 14 - src/svg-icons/image/filter-drama.js | 14 - src/svg-icons/image/filter-frames.js | 14 - src/svg-icons/image/filter-hdr.js | 14 - src/svg-icons/image/filter-none.js | 14 - src/svg-icons/image/filter-tilt-shift.js | 14 - src/svg-icons/image/filter-vintage.js | 14 - src/svg-icons/image/filter.js | 14 - src/svg-icons/image/flare.js | 14 - src/svg-icons/image/flash-auto.js | 14 - src/svg-icons/image/flash-off.js | 14 - src/svg-icons/image/flash-on.js | 14 - src/svg-icons/image/flip.js | 14 - src/svg-icons/image/gradient.js | 14 - src/svg-icons/image/grain.js | 14 - src/svg-icons/image/grid-off.js | 14 - src/svg-icons/image/grid-on.js | 14 - src/svg-icons/image/hdr-off.js | 14 - src/svg-icons/image/hdr-on.js | 14 - src/svg-icons/image/hdr-strong.js | 14 - src/svg-icons/image/hdr-weak.js | 14 - src/svg-icons/image/healing.js | 14 - src/svg-icons/image/image-aspect-ratio.js | 14 - src/svg-icons/image/image.js | 14 - src/svg-icons/image/iso.js | 14 - src/svg-icons/image/landscape.js | 14 - src/svg-icons/image/leak-add.js | 14 - src/svg-icons/image/leak-remove.js | 14 - src/svg-icons/image/lens.js | 14 - src/svg-icons/image/linked-camera.js | 14 - src/svg-icons/image/looks-3.js | 14 - src/svg-icons/image/looks-4.js | 14 - src/svg-icons/image/looks-5.js | 14 - src/svg-icons/image/looks-6.js | 14 - src/svg-icons/image/looks-one.js | 14 - src/svg-icons/image/looks-two.js | 14 - src/svg-icons/image/looks.js | 14 - src/svg-icons/image/loupe.js | 14 - src/svg-icons/image/monochrome-photos.js | 14 - src/svg-icons/image/movie-creation.js | 14 - src/svg-icons/image/movie-filter.js | 14 - src/svg-icons/image/music-note.js | 14 - src/svg-icons/image/nature-people.js | 14 - src/svg-icons/image/nature.js | 14 - src/svg-icons/image/navigate-before.js | 14 - src/svg-icons/image/navigate-next.js | 14 - src/svg-icons/image/palette.js | 14 - src/svg-icons/image/panorama-fish-eye.js | 14 - src/svg-icons/image/panorama-horizontal.js | 14 - src/svg-icons/image/panorama-vertical.js | 14 - src/svg-icons/image/panorama-wide-angle.js | 14 - src/svg-icons/image/panorama.js | 14 - src/svg-icons/image/photo-album.js | 14 - src/svg-icons/image/photo-camera.js | 14 - src/svg-icons/image/photo-filter.js | 14 - src/svg-icons/image/photo-library.js | 14 - .../image/photo-size-select-actual.js | 14 - .../image/photo-size-select-large.js | 14 - .../image/photo-size-select-small.js | 14 - src/svg-icons/image/photo.js | 14 - src/svg-icons/image/picture-as-pdf.js | 14 - src/svg-icons/image/portrait.js | 14 - src/svg-icons/image/remove-red-eye.js | 14 - src/svg-icons/image/rotate-90-degrees-ccw.js | 14 - src/svg-icons/image/rotate-left.js | 14 - src/svg-icons/image/rotate-right.js | 14 - src/svg-icons/image/slideshow.js | 14 - src/svg-icons/image/straighten.js | 14 - src/svg-icons/image/style.js | 14 - src/svg-icons/image/switch-camera.js | 14 - src/svg-icons/image/switch-video.js | 14 - src/svg-icons/image/tag-faces.js | 14 - src/svg-icons/image/texture.js | 14 - src/svg-icons/image/timelapse.js | 14 - src/svg-icons/image/timer-10.js | 14 - src/svg-icons/image/timer-3.js | 14 - src/svg-icons/image/timer-off.js | 14 - src/svg-icons/image/timer.js | 14 - src/svg-icons/image/tonality.js | 14 - src/svg-icons/image/transform.js | 14 - src/svg-icons/image/tune.js | 14 - src/svg-icons/image/view-comfy.js | 14 - src/svg-icons/image/view-compact.js | 14 - src/svg-icons/image/vignette.js | 14 - src/svg-icons/image/wb-auto.js | 14 - src/svg-icons/image/wb-cloudy.js | 14 - src/svg-icons/image/wb-incandescent.js | 14 - src/svg-icons/image/wb-iridescent.js | 14 - src/svg-icons/image/wb-sunny.js | 14 - src/svg-icons/index.js | 961 ---- src/svg-icons/maps/add-location.js | 14 - src/svg-icons/maps/beenhere.js | 14 - src/svg-icons/maps/directions-bike.js | 14 - src/svg-icons/maps/directions-boat.js | 14 - src/svg-icons/maps/directions-bus.js | 14 - src/svg-icons/maps/directions-car.js | 14 - src/svg-icons/maps/directions-railway.js | 14 - src/svg-icons/maps/directions-run.js | 14 - src/svg-icons/maps/directions-subway.js | 14 - src/svg-icons/maps/directions-transit.js | 14 - src/svg-icons/maps/directions-walk.js | 14 - src/svg-icons/maps/directions.js | 14 - src/svg-icons/maps/edit-location.js | 14 - src/svg-icons/maps/ev-station.js | 14 - src/svg-icons/maps/flight.js | 14 - src/svg-icons/maps/hotel.js | 14 - src/svg-icons/maps/layers-clear.js | 14 - src/svg-icons/maps/layers.js | 14 - src/svg-icons/maps/local-activity.js | 14 - src/svg-icons/maps/local-airport.js | 14 - src/svg-icons/maps/local-atm.js | 14 - src/svg-icons/maps/local-bar.js | 14 - src/svg-icons/maps/local-cafe.js | 14 - src/svg-icons/maps/local-car-wash.js | 14 - src/svg-icons/maps/local-convenience-store.js | 14 - src/svg-icons/maps/local-dining.js | 14 - src/svg-icons/maps/local-drink.js | 14 - src/svg-icons/maps/local-florist.js | 14 - src/svg-icons/maps/local-gas-station.js | 14 - src/svg-icons/maps/local-grocery-store.js | 14 - src/svg-icons/maps/local-hospital.js | 14 - src/svg-icons/maps/local-hotel.js | 14 - src/svg-icons/maps/local-laundry-service.js | 14 - src/svg-icons/maps/local-library.js | 14 - src/svg-icons/maps/local-mall.js | 14 - src/svg-icons/maps/local-movies.js | 14 - src/svg-icons/maps/local-offer.js | 14 - src/svg-icons/maps/local-parking.js | 14 - src/svg-icons/maps/local-pharmacy.js | 14 - src/svg-icons/maps/local-phone.js | 14 - src/svg-icons/maps/local-pizza.js | 14 - src/svg-icons/maps/local-play.js | 14 - src/svg-icons/maps/local-post-office.js | 14 - src/svg-icons/maps/local-printshop.js | 14 - src/svg-icons/maps/local-see.js | 14 - src/svg-icons/maps/local-shipping.js | 14 - src/svg-icons/maps/local-taxi.js | 14 - src/svg-icons/maps/map.js | 14 - src/svg-icons/maps/my-location.js | 14 - src/svg-icons/maps/navigation.js | 14 - src/svg-icons/maps/near-me.js | 14 - src/svg-icons/maps/person-pin-circle.js | 14 - src/svg-icons/maps/person-pin.js | 14 - src/svg-icons/maps/pin-drop.js | 14 - src/svg-icons/maps/place.js | 14 - src/svg-icons/maps/rate-review.js | 14 - src/svg-icons/maps/restaurant-menu.js | 14 - src/svg-icons/maps/restaurant.js | 14 - src/svg-icons/maps/satellite.js | 14 - src/svg-icons/maps/store-mall-directory.js | 14 - src/svg-icons/maps/streetview.js | 14 - src/svg-icons/maps/subway.js | 14 - src/svg-icons/maps/terrain.js | 14 - src/svg-icons/maps/traffic.js | 14 - src/svg-icons/maps/train.js | 14 - src/svg-icons/maps/tram.js | 14 - .../maps/transfer-within-a-station.js | 14 - src/svg-icons/maps/zoom-out-map.js | 14 - src/svg-icons/navigation-arrow-drop-right.js | 15 - src/svg-icons/navigation/apps.js | 14 - src/svg-icons/navigation/arrow-back.js | 14 - src/svg-icons/navigation/arrow-downward.js | 14 - .../navigation/arrow-drop-down-circle.js | 14 - src/svg-icons/navigation/arrow-drop-down.js | 14 - src/svg-icons/navigation/arrow-drop-up.js | 14 - src/svg-icons/navigation/arrow-forward.js | 14 - src/svg-icons/navigation/arrow-upward.js | 14 - src/svg-icons/navigation/cancel.js | 14 - src/svg-icons/navigation/check.js | 14 - src/svg-icons/navigation/chevron-left.js | 14 - src/svg-icons/navigation/chevron-right.js | 14 - src/svg-icons/navigation/close.js | 14 - src/svg-icons/navigation/expand-less.js | 14 - src/svg-icons/navigation/expand-more.js | 14 - src/svg-icons/navigation/first-page.js | 14 - src/svg-icons/navigation/fullscreen-exit.js | 14 - src/svg-icons/navigation/fullscreen.js | 14 - src/svg-icons/navigation/last-page.js | 14 - src/svg-icons/navigation/menu.js | 14 - src/svg-icons/navigation/more-horiz.js | 14 - src/svg-icons/navigation/more-vert.js | 14 - src/svg-icons/navigation/refresh.js | 14 - .../navigation/subdirectory-arrow-left.js | 14 - .../navigation/subdirectory-arrow-right.js | 14 - src/svg-icons/navigation/unfold-less.js | 14 - src/svg-icons/navigation/unfold-more.js | 14 - src/svg-icons/notification/adb.js | 14 - .../notification/airline-seat-flat-angled.js | 14 - .../notification/airline-seat-flat.js | 14 - .../airline-seat-individual-suite.js | 14 - .../airline-seat-legroom-extra.js | 14 - .../airline-seat-legroom-normal.js | 14 - .../airline-seat-legroom-reduced.js | 14 - .../airline-seat-recline-extra.js | 14 - .../airline-seat-recline-normal.js | 14 - src/svg-icons/notification/bluetooth-audio.js | 14 - .../notification/confirmation-number.js | 14 - src/svg-icons/notification/disc-full.js | 14 - .../notification/do-not-disturb-alt.js | 14 - .../notification/do-not-disturb-off.js | 14 - .../notification/do-not-disturb-on.js | 14 - src/svg-icons/notification/do-not-disturb.js | 14 - src/svg-icons/notification/drive-eta.js | 14 - .../notification/enhanced-encryption.js | 14 - src/svg-icons/notification/event-available.js | 14 - src/svg-icons/notification/event-busy.js | 14 - src/svg-icons/notification/event-note.js | 14 - src/svg-icons/notification/folder-special.js | 14 - src/svg-icons/notification/live-tv.js | 14 - src/svg-icons/notification/mms.js | 14 - src/svg-icons/notification/more.js | 14 - src/svg-icons/notification/network-check.js | 14 - src/svg-icons/notification/network-locked.js | 14 - src/svg-icons/notification/no-encryption.js | 14 - src/svg-icons/notification/ondemand-video.js | 14 - src/svg-icons/notification/personal-video.js | 14 - .../notification/phone-bluetooth-speaker.js | 14 - src/svg-icons/notification/phone-forwarded.js | 14 - src/svg-icons/notification/phone-in-talk.js | 14 - src/svg-icons/notification/phone-locked.js | 14 - src/svg-icons/notification/phone-missed.js | 14 - src/svg-icons/notification/phone-paused.js | 14 - src/svg-icons/notification/power.js | 14 - src/svg-icons/notification/priority-high.js | 14 - src/svg-icons/notification/rv-hookup.js | 14 - src/svg-icons/notification/sd-card.js | 14 - src/svg-icons/notification/sim-card-alert.js | 14 - src/svg-icons/notification/sms-failed.js | 14 - src/svg-icons/notification/sms.js | 14 - src/svg-icons/notification/sync-disabled.js | 14 - src/svg-icons/notification/sync-problem.js | 14 - src/svg-icons/notification/sync.js | 14 - src/svg-icons/notification/system-update.js | 14 - src/svg-icons/notification/tap-and-play.js | 14 - src/svg-icons/notification/time-to-leave.js | 14 - src/svg-icons/notification/vibration.js | 14 - src/svg-icons/notification/voice-chat.js | 14 - src/svg-icons/notification/vpn-lock.js | 14 - src/svg-icons/notification/wc.js | 14 - src/svg-icons/notification/wifi.js | 14 - src/svg-icons/places/ac-unit.js | 14 - src/svg-icons/places/airport-shuttle.js | 14 - src/svg-icons/places/all-inclusive.js | 14 - src/svg-icons/places/beach-access.js | 14 - src/svg-icons/places/business-center.js | 14 - src/svg-icons/places/casino.js | 14 - src/svg-icons/places/child-care.js | 14 - src/svg-icons/places/child-friendly.js | 14 - src/svg-icons/places/fitness-center.js | 14 - src/svg-icons/places/free-breakfast.js | 14 - src/svg-icons/places/golf-course.js | 14 - src/svg-icons/places/hot-tub.js | 14 - src/svg-icons/places/kitchen.js | 14 - src/svg-icons/places/pool.js | 14 - src/svg-icons/places/room-service.js | 14 - src/svg-icons/places/rv-hookup.js | 14 - src/svg-icons/places/smoke-free.js | 14 - src/svg-icons/places/smoking-rooms.js | 14 - src/svg-icons/places/spa.js | 14 - src/svg-icons/social/cake.js | 14 - src/svg-icons/social/domain.js | 14 - src/svg-icons/social/group-add.js | 14 - src/svg-icons/social/group.js | 14 - src/svg-icons/social/location-city.js | 14 - src/svg-icons/social/mood-bad.js | 14 - src/svg-icons/social/mood.js | 14 - src/svg-icons/social/notifications-active.js | 14 - src/svg-icons/social/notifications-none.js | 14 - src/svg-icons/social/notifications-off.js | 14 - src/svg-icons/social/notifications-paused.js | 14 - src/svg-icons/social/notifications.js | 14 - src/svg-icons/social/pages.js | 14 - src/svg-icons/social/party-mode.js | 14 - src/svg-icons/social/people-outline.js | 14 - src/svg-icons/social/people.js | 14 - src/svg-icons/social/person-add.js | 14 - src/svg-icons/social/person-outline.js | 14 - src/svg-icons/social/person.js | 14 - src/svg-icons/social/plus-one.js | 14 - src/svg-icons/social/poll.js | 14 - src/svg-icons/social/public.js | 14 - src/svg-icons/social/school.js | 14 - .../social/sentiment-dissatisfied.js | 14 - src/svg-icons/social/sentiment-neutral.js | 14 - src/svg-icons/social/sentiment-satisfied.js | 14 - .../social/sentiment-very-dissatisfied.js | 14 - .../social/sentiment-very-satisfied.js | 14 - src/svg-icons/social/share.js | 14 - src/svg-icons/social/whatshot.js | 14 - .../toggle/check-box-outline-blank.js | 14 - src/svg-icons/toggle/check-box.js | 14 - .../toggle/indeterminate-check-box.js | 14 - src/svg-icons/toggle/radio-button-checked.js | 14 - .../toggle/radio-button-unchecked.js | 14 - src/svg-icons/toggle/star-border.js | 14 - src/svg-icons/toggle/star-half.js | 14 - src/svg-icons/toggle/star.js | 14 - src/utils/autoPrefix.js | 5 - src/utils/autoprefixer.js | 54 - src/utils/autoprefixer.spec.js | 95 - src/utils/autoprefixerDynamic.js | 14 - src/utils/autoprefixerStatic.js | 14 - src/utils/callOnce.js | 15 - src/utils/childUtils.js | 19 - src/utils/colorManipulator.js | 220 - src/utils/colorManipulator.spec.js | 420 -- src/utils/deprecatedExport.js | 13 - src/utils/deprecatedPropType.js | 32 - src/utils/dom.js | 22 - src/utils/events.js | 42 - src/utils/propTypes.js | 40 - src/utils/rtl.js | 86 - src/utils/rtl.spec.js | 20 - src/utils/withWidth.js | 83 - src/utils/withWidth.spec.js | 34 - styles/MuiThemeProvider.js | 70 + styles/baseThemes/darkBaseTheme.js | 37 + styles/baseThemes/lightBaseTheme.js | 45 + styles/colors.js | 290 + styles/getMuiTheme.js | 382 ++ styles/index.js | 63 + styles/muiThemeable.js | 52 + styles/spacing.js | 19 + styles/transitions.js | 34 + styles/typography.js | 35 + styles/zIndex.js | 17 + svg-icons/action/accessibility.js | 32 + svg-icons/action/accessible.js | 33 + svg-icons/action/account-balance-wallet.js | 32 + svg-icons/action/account-balance.js | 32 + svg-icons/action/account-box.js | 32 + svg-icons/action/account-circle.js | 32 + svg-icons/action/add-shopping-cart.js | 32 + svg-icons/action/alarm-add.js | 32 + svg-icons/action/alarm-off.js | 32 + svg-icons/action/alarm-on.js | 32 + svg-icons/action/alarm.js | 32 + svg-icons/action/all-out.js | 32 + svg-icons/action/android.js | 32 + svg-icons/action/announcement.js | 32 + svg-icons/action/aspect-ratio.js | 32 + svg-icons/action/assessment.js | 32 + svg-icons/action/assignment-ind.js | 32 + svg-icons/action/assignment-late.js | 32 + svg-icons/action/assignment-return.js | 32 + svg-icons/action/assignment-returned.js | 32 + svg-icons/action/assignment-turned-in.js | 32 + svg-icons/action/assignment.js | 32 + svg-icons/action/autorenew.js | 32 + svg-icons/action/backup.js | 32 + svg-icons/action/book.js | 32 + svg-icons/action/bookmark-border.js | 32 + svg-icons/action/bookmark.js | 32 + svg-icons/action/bug-report.js | 32 + svg-icons/action/build.js | 32 + svg-icons/action/cached.js | 32 + svg-icons/action/camera-enhance.js | 32 + svg-icons/action/card-giftcard.js | 32 + svg-icons/action/card-membership.js | 32 + svg-icons/action/card-travel.js | 32 + svg-icons/action/change-history.js | 32 + svg-icons/action/check-circle.js | 32 + svg-icons/action/chrome-reader-mode.js | 32 + svg-icons/action/class.js | 32 + svg-icons/action/code.js | 32 + svg-icons/action/compare-arrows.js | 32 + svg-icons/action/copyright.js | 32 + svg-icons/action/credit-card.js | 32 + svg-icons/action/dashboard.js | 32 + svg-icons/action/date-range.js | 32 + svg-icons/action/delete-forever.js | 32 + svg-icons/action/delete.js | 32 + svg-icons/action/description.js | 32 + svg-icons/action/dns.js | 32 + svg-icons/action/done-all.js | 32 + svg-icons/action/done.js | 32 + svg-icons/action/donut-large.js | 32 + svg-icons/action/donut-small.js | 32 + svg-icons/action/eject.js | 32 + svg-icons/action/euro-symbol.js | 32 + svg-icons/action/event-seat.js | 32 + svg-icons/action/event.js | 32 + svg-icons/action/exit-to-app.js | 32 + svg-icons/action/explore.js | 32 + svg-icons/action/extension.js | 32 + svg-icons/action/face.js | 32 + svg-icons/action/favorite-border.js | 32 + svg-icons/action/favorite.js | 32 + svg-icons/action/feedback.js | 32 + svg-icons/action/find-in-page.js | 32 + svg-icons/action/find-replace.js | 32 + svg-icons/action/fingerprint.js | 32 + svg-icons/action/flight-land.js | 32 + svg-icons/action/flight-takeoff.js | 32 + svg-icons/action/flip-to-back.js | 32 + svg-icons/action/flip-to-front.js | 32 + svg-icons/action/g-translate.js | 32 + svg-icons/action/gavel.js | 32 + svg-icons/action/get-app.js | 32 + svg-icons/action/gif.js | 32 + svg-icons/action/grade.js | 32 + svg-icons/action/group-work.js | 32 + svg-icons/action/help-outline.js | 32 + svg-icons/action/help.js | 32 + svg-icons/action/highlight-off.js | 32 + svg-icons/action/history.js | 32 + svg-icons/action/home.js | 32 + svg-icons/action/hourglass-empty.js | 32 + svg-icons/action/hourglass-full.js | 32 + svg-icons/action/http.js | 32 + svg-icons/action/https.js | 32 + svg-icons/action/important-devices.js | 32 + svg-icons/action/info-outline.js | 32 + svg-icons/action/info.js | 32 + svg-icons/action/input.js | 32 + svg-icons/action/invert-colors.js | 32 + svg-icons/action/label-outline.js | 32 + svg-icons/action/label.js | 32 + svg-icons/action/language.js | 32 + svg-icons/action/launch.js | 32 + svg-icons/action/lightbulb-outline.js | 32 + svg-icons/action/line-style.js | 32 + svg-icons/action/line-weight.js | 32 + svg-icons/action/list.js | 32 + svg-icons/action/lock-open.js | 32 + svg-icons/action/lock-outline.js | 32 + svg-icons/action/lock.js | 32 + svg-icons/action/loyalty.js | 32 + svg-icons/action/markunread-mailbox.js | 32 + svg-icons/action/motorcycle.js | 32 + svg-icons/action/note-add.js | 32 + svg-icons/action/offline-pin.js | 32 + svg-icons/action/opacity.js | 32 + svg-icons/action/open-in-browser.js | 32 + svg-icons/action/open-in-new.js | 32 + svg-icons/action/open-with.js | 32 + svg-icons/action/pageview.js | 32 + svg-icons/action/pan-tool.js | 32 + svg-icons/action/payment.js | 32 + svg-icons/action/perm-camera-mic.js | 32 + svg-icons/action/perm-contact-calendar.js | 32 + svg-icons/action/perm-data-setting.js | 32 + svg-icons/action/perm-device-information.js | 32 + svg-icons/action/perm-identity.js | 32 + svg-icons/action/perm-media.js | 32 + svg-icons/action/perm-phone-msg.js | 32 + svg-icons/action/perm-scan-wifi.js | 32 + svg-icons/action/pets.js | 36 + svg-icons/action/picture-in-picture-alt.js | 32 + svg-icons/action/picture-in-picture.js | 32 + svg-icons/action/play-for-work.js | 32 + svg-icons/action/polymer.js | 32 + svg-icons/action/power-settings-new.js | 32 + svg-icons/action/pregnant-woman.js | 32 + svg-icons/action/print.js | 32 + svg-icons/action/query-builder.js | 32 + svg-icons/action/question-answer.js | 32 + svg-icons/action/receipt.js | 32 + svg-icons/action/record-voice-over.js | 33 + svg-icons/action/redeem.js | 32 + svg-icons/action/remove-shopping-cart.js | 32 + svg-icons/action/reorder.js | 32 + svg-icons/action/report-problem.js | 32 + svg-icons/action/restore-page.js | 32 + svg-icons/action/restore.js | 32 + svg-icons/action/room.js | 32 + svg-icons/action/rounded-corner.js | 32 + svg-icons/action/rowing.js | 32 + svg-icons/action/schedule.js | 32 + svg-icons/action/search.js | 32 + svg-icons/action/settings-applications.js | 32 + svg-icons/action/settings-backup-restore.js | 32 + svg-icons/action/settings-bluetooth.js | 32 + svg-icons/action/settings-brightness.js | 32 + svg-icons/action/settings-cell.js | 32 + svg-icons/action/settings-ethernet.js | 32 + svg-icons/action/settings-input-antenna.js | 32 + svg-icons/action/settings-input-component.js | 32 + svg-icons/action/settings-input-composite.js | 32 + svg-icons/action/settings-input-hdmi.js | 32 + svg-icons/action/settings-input-svideo.js | 32 + svg-icons/action/settings-overscan.js | 32 + svg-icons/action/settings-phone.js | 32 + svg-icons/action/settings-power.js | 32 + svg-icons/action/settings-remote.js | 32 + svg-icons/action/settings-voice.js | 32 + svg-icons/action/settings.js | 32 + svg-icons/action/shop-two.js | 32 + svg-icons/action/shop.js | 32 + svg-icons/action/shopping-basket.js | 32 + svg-icons/action/shopping-cart.js | 32 + svg-icons/action/speaker-notes-off.js | 32 + svg-icons/action/speaker-notes.js | 32 + svg-icons/action/spellcheck.js | 32 + svg-icons/action/stars.js | 32 + svg-icons/action/store.js | 32 + svg-icons/action/subject.js | 32 + svg-icons/action/supervisor-account.js | 32 + svg-icons/action/swap-horiz.js | 32 + svg-icons/action/swap-vert.js | 32 + svg-icons/action/swap-vertical-circle.js | 32 + svg-icons/action/system-update-alt.js | 32 + svg-icons/action/tab-unselected.js | 32 + svg-icons/action/tab.js | 32 + svg-icons/action/theaters.js | 32 + svg-icons/action/three-d-rotation.js | 32 + svg-icons/action/thumb-down.js | 32 + svg-icons/action/thumb-up.js | 32 + svg-icons/action/thumbs-up-down.js | 32 + svg-icons/action/timeline.js | 32 + svg-icons/action/toc.js | 32 + svg-icons/action/today.js | 32 + svg-icons/action/toll.js | 32 + svg-icons/action/touch-app.js | 32 + svg-icons/action/track-changes.js | 32 + svg-icons/action/translate.js | 32 + svg-icons/action/trending-down.js | 32 + svg-icons/action/trending-flat.js | 32 + svg-icons/action/trending-up.js | 32 + svg-icons/action/turned-in-not.js | 32 + svg-icons/action/turned-in.js | 32 + svg-icons/action/update.js | 32 + svg-icons/action/verified-user.js | 32 + svg-icons/action/view-agenda.js | 32 + svg-icons/action/view-array.js | 32 + svg-icons/action/view-carousel.js | 32 + svg-icons/action/view-column.js | 32 + svg-icons/action/view-day.js | 32 + svg-icons/action/view-headline.js | 32 + svg-icons/action/view-list.js | 32 + svg-icons/action/view-module.js | 32 + svg-icons/action/view-quilt.js | 32 + svg-icons/action/view-stream.js | 32 + svg-icons/action/view-week.js | 32 + svg-icons/action/visibility-off.js | 32 + svg-icons/action/visibility.js | 32 + svg-icons/action/watch-later.js | 32 + svg-icons/action/work.js | 32 + svg-icons/action/youtube-searched-for.js | 32 + svg-icons/action/zoom-in.js | 32 + svg-icons/action/zoom-out.js | 32 + svg-icons/alert/add-alert.js | 32 + svg-icons/alert/error-outline.js | 32 + svg-icons/alert/error.js | 32 + svg-icons/alert/warning.js | 32 + svg-icons/av/add-to-queue.js | 32 + svg-icons/av/airplay.js | 32 + svg-icons/av/album.js | 32 + svg-icons/av/art-track.js | 32 + svg-icons/av/av-timer.js | 32 + svg-icons/av/branding-watermark.js | 32 + svg-icons/av/call-to-action.js | 32 + svg-icons/av/closed-caption.js | 32 + svg-icons/av/equalizer.js | 32 + svg-icons/av/explicit.js | 32 + svg-icons/av/fast-forward.js | 32 + svg-icons/av/fast-rewind.js | 32 + svg-icons/av/featured-play-list.js | 32 + svg-icons/av/featured-video.js | 32 + svg-icons/av/fiber-dvr.js | 32 + svg-icons/av/fiber-manual-record.js | 32 + svg-icons/av/fiber-new.js | 32 + svg-icons/av/fiber-pin.js | 32 + svg-icons/av/fiber-smart-record.js | 37 + svg-icons/av/forward-10.js | 32 + svg-icons/av/forward-30.js | 32 + svg-icons/av/forward-5.js | 32 + svg-icons/av/games.js | 32 + svg-icons/av/hd.js | 32 + svg-icons/av/hearing.js | 32 + svg-icons/av/high-quality.js | 32 + svg-icons/av/library-add.js | 32 + svg-icons/av/library-books.js | 32 + svg-icons/av/library-music.js | 32 + svg-icons/av/loop.js | 32 + svg-icons/av/mic-none.js | 32 + svg-icons/av/mic-off.js | 32 + svg-icons/av/mic.js | 32 + svg-icons/av/movie.js | 32 + svg-icons/av/music-video.js | 32 + svg-icons/av/new-releases.js | 32 + svg-icons/av/not-interested.js | 32 + svg-icons/av/note.js | 32 + svg-icons/av/pause-circle-filled.js | 32 + svg-icons/av/pause-circle-outline.js | 32 + svg-icons/av/pause.js | 32 + svg-icons/av/play-arrow.js | 32 + svg-icons/av/play-circle-filled.js | 32 + svg-icons/av/play-circle-outline.js | 32 + svg-icons/av/playlist-add-check.js | 32 + svg-icons/av/playlist-add.js | 32 + svg-icons/av/playlist-play.js | 32 + svg-icons/av/queue-music.js | 32 + svg-icons/av/queue-play-next.js | 32 + svg-icons/av/queue.js | 32 + svg-icons/av/radio.js | 32 + svg-icons/av/recent-actors.js | 32 + svg-icons/av/remove-from-queue.js | 32 + svg-icons/av/repeat-one.js | 32 + svg-icons/av/repeat.js | 32 + svg-icons/av/replay-10.js | 32 + svg-icons/av/replay-30.js | 32 + svg-icons/av/replay-5.js | 32 + svg-icons/av/replay.js | 32 + svg-icons/av/shuffle.js | 32 + svg-icons/av/skip-next.js | 32 + svg-icons/av/skip-previous.js | 32 + svg-icons/av/slow-motion-video.js | 32 + svg-icons/av/snooze.js | 32 + svg-icons/av/sort-by-alpha.js | 32 + svg-icons/av/stop.js | 32 + svg-icons/av/subscriptions.js | 32 + svg-icons/av/subtitles.js | 32 + svg-icons/av/surround-sound.js | 32 + svg-icons/av/video-call.js | 32 + svg-icons/av/video-label.js | 32 + svg-icons/av/video-library.js | 32 + svg-icons/av/videocam-off.js | 32 + svg-icons/av/videocam.js | 32 + svg-icons/av/volume-down.js | 32 + svg-icons/av/volume-mute.js | 32 + svg-icons/av/volume-off.js | 32 + svg-icons/av/volume-up.js | 32 + svg-icons/av/web-asset.js | 32 + svg-icons/av/web.js | 32 + svg-icons/communication/business.js | 32 + svg-icons/communication/call-end.js | 32 + svg-icons/communication/call-made.js | 32 + svg-icons/communication/call-merge.js | 32 + .../communication/call-missed-outgoing.js | 32 + svg-icons/communication/call-missed.js | 32 + svg-icons/communication/call-received.js | 32 + svg-icons/communication/call-split.js | 32 + svg-icons/communication/call.js | 32 + .../communication/chat-bubble-outline.js | 32 + svg-icons/communication/chat-bubble.js | 32 + svg-icons/communication/chat.js | 32 + svg-icons/communication/clear-all.js | 32 + svg-icons/communication/comment.js | 32 + svg-icons/communication/contact-mail.js | 32 + svg-icons/communication/contact-phone.js | 32 + svg-icons/communication/contacts.js | 32 + svg-icons/communication/dialer-sip.js | 32 + svg-icons/communication/dialpad.js | 32 + svg-icons/communication/email.js | 32 + svg-icons/communication/forum.js | 32 + svg-icons/communication/import-contacts.js | 32 + svg-icons/communication/import-export.js | 32 + svg-icons/communication/invert-colors-off.js | 32 + svg-icons/communication/live-help.js | 32 + svg-icons/communication/location-off.js | 32 + svg-icons/communication/location-on.js | 32 + svg-icons/communication/mail-outline.js | 32 + svg-icons/communication/message.js | 32 + svg-icons/communication/no-sim.js | 32 + svg-icons/communication/phone.js | 32 + svg-icons/communication/phonelink-erase.js | 32 + svg-icons/communication/phonelink-lock.js | 32 + svg-icons/communication/phonelink-ring.js | 32 + svg-icons/communication/phonelink-setup.js | 32 + svg-icons/communication/portable-wifi-off.js | 32 + svg-icons/communication/present-to-all.js | 32 + svg-icons/communication/ring-volume.js | 32 + svg-icons/communication/rss-feed.js | 33 + svg-icons/communication/screen-share.js | 32 + svg-icons/communication/speaker-phone.js | 32 + .../communication/stay-current-landscape.js | 32 + .../communication/stay-current-portrait.js | 32 + .../communication/stay-primary-landscape.js | 32 + .../communication/stay-primary-portrait.js | 32 + svg-icons/communication/stop-screen-share.js | 32 + svg-icons/communication/swap-calls.js | 32 + svg-icons/communication/textsms.js | 32 + svg-icons/communication/voicemail.js | 32 + svg-icons/communication/vpn-key.js | 32 + svg-icons/content/add-box.js | 32 + svg-icons/content/add-circle-outline.js | 32 + svg-icons/content/add-circle.js | 32 + svg-icons/content/add.js | 32 + svg-icons/content/archive.js | 32 + svg-icons/content/backspace.js | 32 + svg-icons/content/block.js | 32 + svg-icons/content/clear.js | 32 + svg-icons/content/content-copy.js | 32 + svg-icons/content/content-cut.js | 32 + svg-icons/content/content-paste.js | 32 + svg-icons/content/create.js | 32 + svg-icons/content/delete-sweep.js | 32 + svg-icons/content/drafts.js | 32 + svg-icons/content/filter-list.js | 32 + svg-icons/content/flag.js | 32 + svg-icons/content/font-download.js | 32 + svg-icons/content/forward.js | 32 + svg-icons/content/gesture.js | 32 + svg-icons/content/inbox.js | 32 + svg-icons/content/link.js | 32 + svg-icons/content/low-priority.js | 32 + svg-icons/content/mail.js | 32 + svg-icons/content/markunread.js | 32 + svg-icons/content/move-to-inbox.js | 32 + svg-icons/content/next-week.js | 32 + svg-icons/content/redo.js | 32 + svg-icons/content/remove-circle-outline.js | 32 + svg-icons/content/remove-circle.js | 32 + svg-icons/content/remove.js | 32 + svg-icons/content/reply-all.js | 32 + svg-icons/content/reply.js | 32 + svg-icons/content/report.js | 32 + svg-icons/content/save.js | 32 + svg-icons/content/select-all.js | 32 + svg-icons/content/send.js | 32 + svg-icons/content/sort.js | 32 + svg-icons/content/text-format.js | 32 + svg-icons/content/unarchive.js | 32 + svg-icons/content/undo.js | 32 + svg-icons/content/weekend.js | 32 + svg-icons/device/access-alarm.js | 32 + svg-icons/device/access-alarms.js | 32 + svg-icons/device/access-time.js | 32 + svg-icons/device/add-alarm.js | 32 + svg-icons/device/airplanemode-active.js | 33 + svg-icons/device/airplanemode-inactive.js | 32 + svg-icons/device/battery-20.js | 33 + svg-icons/device/battery-30.js | 33 + svg-icons/device/battery-50.js | 33 + svg-icons/device/battery-60.js | 33 + svg-icons/device/battery-80.js | 33 + svg-icons/device/battery-90.js | 33 + svg-icons/device/battery-alert.js | 32 + svg-icons/device/battery-charging-20.js | 33 + svg-icons/device/battery-charging-30.js | 33 + svg-icons/device/battery-charging-50.js | 33 + svg-icons/device/battery-charging-60.js | 33 + svg-icons/device/battery-charging-80.js | 33 + svg-icons/device/battery-charging-90.js | 33 + svg-icons/device/battery-charging-full.js | 32 + svg-icons/device/battery-full.js | 32 + svg-icons/device/battery-std.js | 32 + svg-icons/device/battery-unknown.js | 32 + svg-icons/device/bluetooth-connected.js | 32 + svg-icons/device/bluetooth-disabled.js | 32 + svg-icons/device/bluetooth-searching.js | 32 + svg-icons/device/bluetooth.js | 32 + svg-icons/device/brightness-auto.js | 32 + svg-icons/device/brightness-high.js | 32 + svg-icons/device/brightness-low.js | 32 + svg-icons/device/brightness-medium.js | 32 + svg-icons/device/data-usage.js | 32 + svg-icons/device/developer-mode.js | 32 + svg-icons/device/devices.js | 32 + svg-icons/device/dvr.js | 32 + svg-icons/device/gps-fixed.js | 32 + svg-icons/device/gps-not-fixed.js | 32 + svg-icons/device/gps-off.js | 32 + svg-icons/device/graphic-eq.js | 32 + svg-icons/device/location-disabled.js | 32 + svg-icons/device/location-searching.js | 32 + svg-icons/device/network-cell.js | 33 + svg-icons/device/network-wifi.js | 33 + svg-icons/device/nfc.js | 32 + svg-icons/device/screen-lock-landscape.js | 32 + svg-icons/device/screen-lock-portrait.js | 32 + svg-icons/device/screen-lock-rotation.js | 32 + svg-icons/device/screen-rotation.js | 32 + svg-icons/device/sd-storage.js | 32 + svg-icons/device/settings-system-daydream.js | 32 + svg-icons/device/signal-cellular-0-bar.js | 32 + svg-icons/device/signal-cellular-1-bar.js | 33 + svg-icons/device/signal-cellular-2-bar.js | 33 + svg-icons/device/signal-cellular-3-bar.js | 33 + svg-icons/device/signal-cellular-4-bar.js | 32 + ...al-cellular-connected-no-internet-0-bar.js | 33 + ...al-cellular-connected-no-internet-1-bar.js | 33 + ...al-cellular-connected-no-internet-2-bar.js | 33 + ...al-cellular-connected-no-internet-3-bar.js | 33 + ...al-cellular-connected-no-internet-4-bar.js | 32 + svg-icons/device/signal-cellular-no-sim.js | 32 + svg-icons/device/signal-cellular-null.js | 32 + svg-icons/device/signal-cellular-off.js | 32 + svg-icons/device/signal-wifi-0-bar.js | 32 + svg-icons/device/signal-wifi-1-bar-lock.js | 34 + svg-icons/device/signal-wifi-1-bar.js | 33 + svg-icons/device/signal-wifi-2-bar-lock.js | 34 + svg-icons/device/signal-wifi-2-bar.js | 33 + svg-icons/device/signal-wifi-3-bar-lock.js | 33 + svg-icons/device/signal-wifi-3-bar.js | 33 + svg-icons/device/signal-wifi-4-bar-lock.js | 32 + svg-icons/device/signal-wifi-4-bar.js | 32 + svg-icons/device/signal-wifi-off.js | 32 + svg-icons/device/storage.js | 32 + svg-icons/device/usb.js | 32 + svg-icons/device/wallpaper.js | 32 + svg-icons/device/widgets.js | 32 + svg-icons/device/wifi-lock.js | 32 + svg-icons/device/wifi-tethering.js | 32 + svg-icons/editor/attach-file.js | 32 + svg-icons/editor/attach-money.js | 32 + svg-icons/editor/border-all.js | 32 + svg-icons/editor/border-bottom.js | 32 + svg-icons/editor/border-clear.js | 32 + svg-icons/editor/border-color.js | 33 + svg-icons/editor/border-horizontal.js | 32 + svg-icons/editor/border-inner.js | 32 + svg-icons/editor/border-left.js | 32 + svg-icons/editor/border-outer.js | 32 + svg-icons/editor/border-right.js | 32 + svg-icons/editor/border-style.js | 32 + svg-icons/editor/border-top.js | 32 + svg-icons/editor/border-vertical.js | 32 + svg-icons/editor/bubble-chart.js | 34 + svg-icons/editor/drag-handle.js | 32 + svg-icons/editor/format-align-center.js | 32 + svg-icons/editor/format-align-justify.js | 32 + svg-icons/editor/format-align-left.js | 32 + svg-icons/editor/format-align-right.js | 32 + svg-icons/editor/format-bold.js | 32 + svg-icons/editor/format-clear.js | 32 + svg-icons/editor/format-color-fill.js | 33 + svg-icons/editor/format-color-reset.js | 32 + svg-icons/editor/format-color-text.js | 33 + svg-icons/editor/format-indent-decrease.js | 32 + svg-icons/editor/format-indent-increase.js | 32 + svg-icons/editor/format-italic.js | 32 + svg-icons/editor/format-line-spacing.js | 32 + svg-icons/editor/format-list-bulleted.js | 32 + svg-icons/editor/format-list-numbered.js | 32 + svg-icons/editor/format-paint.js | 32 + svg-icons/editor/format-quote.js | 32 + svg-icons/editor/format-shapes.js | 32 + svg-icons/editor/format-size.js | 32 + svg-icons/editor/format-strikethrough.js | 32 + .../editor/format-textdirection-l-to-r.js | 32 + .../editor/format-textdirection-r-to-l.js | 32 + svg-icons/editor/format-underlined.js | 32 + svg-icons/editor/functions.js | 32 + svg-icons/editor/highlight.js | 32 + svg-icons/editor/insert-chart.js | 32 + svg-icons/editor/insert-comment.js | 32 + svg-icons/editor/insert-drive-file.js | 32 + svg-icons/editor/insert-emoticon.js | 32 + svg-icons/editor/insert-invitation.js | 32 + svg-icons/editor/insert-link.js | 32 + svg-icons/editor/insert-photo.js | 32 + svg-icons/editor/linear-scale.js | 32 + svg-icons/editor/merge-type.js | 32 + svg-icons/editor/mode-comment.js | 32 + svg-icons/editor/mode-edit.js | 32 + svg-icons/editor/monetization-on.js | 32 + svg-icons/editor/money-off.js | 32 + svg-icons/editor/multiline-chart.js | 32 + svg-icons/editor/pie-chart-outlined.js | 32 + svg-icons/editor/pie-chart.js | 32 + svg-icons/editor/publish.js | 32 + svg-icons/editor/short-text.js | 32 + svg-icons/editor/show-chart.js | 32 + svg-icons/editor/space-bar.js | 32 + svg-icons/editor/strikethrough-s.js | 32 + svg-icons/editor/text-fields.js | 32 + svg-icons/editor/title.js | 32 + svg-icons/editor/vertical-align-bottom.js | 32 + svg-icons/editor/vertical-align-center.js | 32 + svg-icons/editor/vertical-align-top.js | 32 + svg-icons/editor/wrap-text.js | 32 + svg-icons/file/attachment.js | 32 + svg-icons/file/cloud-circle.js | 32 + svg-icons/file/cloud-done.js | 32 + svg-icons/file/cloud-download.js | 32 + svg-icons/file/cloud-off.js | 32 + svg-icons/file/cloud-queue.js | 32 + svg-icons/file/cloud-upload.js | 32 + svg-icons/file/cloud.js | 32 + svg-icons/file/create-new-folder.js | 32 + svg-icons/file/file-download.js | 32 + svg-icons/file/file-upload.js | 32 + svg-icons/file/folder-open.js | 32 + svg-icons/file/folder-shared.js | 32 + svg-icons/file/folder.js | 32 + svg-icons/hardware/cast-connected.js | 32 + svg-icons/hardware/cast.js | 32 + svg-icons/hardware/computer.js | 32 + svg-icons/hardware/desktop-mac.js | 32 + svg-icons/hardware/desktop-windows.js | 32 + svg-icons/hardware/developer-board.js | 32 + svg-icons/hardware/device-hub.js | 32 + svg-icons/hardware/devices-other.js | 32 + svg-icons/hardware/dock.js | 32 + svg-icons/hardware/gamepad.js | 32 + svg-icons/hardware/headset-mic.js | 32 + svg-icons/hardware/headset.js | 32 + svg-icons/hardware/keyboard-arrow-down.js | 32 + svg-icons/hardware/keyboard-arrow-left.js | 32 + svg-icons/hardware/keyboard-arrow-right.js | 32 + svg-icons/hardware/keyboard-arrow-up.js | 32 + svg-icons/hardware/keyboard-backspace.js | 32 + svg-icons/hardware/keyboard-capslock.js | 32 + svg-icons/hardware/keyboard-hide.js | 32 + svg-icons/hardware/keyboard-return.js | 32 + svg-icons/hardware/keyboard-tab.js | 32 + svg-icons/hardware/keyboard-voice.js | 32 + svg-icons/hardware/keyboard.js | 32 + svg-icons/hardware/laptop-chromebook.js | 32 + svg-icons/hardware/laptop-mac.js | 32 + svg-icons/hardware/laptop-windows.js | 32 + svg-icons/hardware/laptop.js | 32 + svg-icons/hardware/memory.js | 32 + svg-icons/hardware/mouse.js | 32 + svg-icons/hardware/phone-android.js | 32 + svg-icons/hardware/phone-iphone.js | 32 + svg-icons/hardware/phonelink-off.js | 32 + svg-icons/hardware/phonelink.js | 32 + svg-icons/hardware/power-input.js | 32 + svg-icons/hardware/router.js | 32 + svg-icons/hardware/scanner.js | 32 + svg-icons/hardware/security.js | 32 + svg-icons/hardware/sim-card.js | 32 + svg-icons/hardware/smartphone.js | 32 + svg-icons/hardware/speaker-group.js | 34 + svg-icons/hardware/speaker.js | 32 + svg-icons/hardware/tablet-android.js | 32 + svg-icons/hardware/tablet-mac.js | 32 + svg-icons/hardware/tablet.js | 32 + svg-icons/hardware/toys.js | 32 + svg-icons/hardware/tv.js | 32 + svg-icons/hardware/videogame-asset.js | 32 + svg-icons/hardware/watch.js | 32 + svg-icons/image/add-a-photo.js | 32 + svg-icons/image/add-to-photos.js | 32 + svg-icons/image/adjust.js | 32 + svg-icons/image/assistant-photo.js | 32 + svg-icons/image/assistant.js | 32 + svg-icons/image/audiotrack.js | 32 + svg-icons/image/blur-circular.js | 32 + svg-icons/image/blur-linear.js | 32 + svg-icons/image/blur-off.js | 32 + svg-icons/image/blur-on.js | 32 + svg-icons/image/brightness-1.js | 32 + svg-icons/image/brightness-2.js | 32 + svg-icons/image/brightness-3.js | 32 + svg-icons/image/brightness-4.js | 32 + svg-icons/image/brightness-5.js | 32 + svg-icons/image/brightness-6.js | 32 + svg-icons/image/brightness-7.js | 32 + svg-icons/image/broken-image.js | 32 + svg-icons/image/brush.js | 32 + svg-icons/image/burst-mode.js | 32 + svg-icons/image/camera-alt.js | 33 + svg-icons/image/camera-front.js | 32 + svg-icons/image/camera-rear.js | 32 + svg-icons/image/camera-roll.js | 32 + svg-icons/image/camera.js | 32 + svg-icons/image/center-focus-strong.js | 32 + svg-icons/image/center-focus-weak.js | 32 + svg-icons/image/collections-bookmark.js | 32 + svg-icons/image/collections.js | 32 + svg-icons/image/color-lens.js | 32 + svg-icons/image/colorize.js | 32 + svg-icons/image/compare.js | 32 + svg-icons/image/control-point-duplicate.js | 32 + svg-icons/image/control-point.js | 32 + svg-icons/image/crop-16-9.js | 32 + svg-icons/image/crop-3-2.js | 32 + svg-icons/image/crop-5-4.js | 32 + svg-icons/image/crop-7-5.js | 32 + svg-icons/image/crop-din.js | 32 + svg-icons/image/crop-free.js | 32 + svg-icons/image/crop-landscape.js | 32 + svg-icons/image/crop-original.js | 32 + svg-icons/image/crop-portrait.js | 32 + svg-icons/image/crop-rotate.js | 32 + svg-icons/image/crop-square.js | 32 + svg-icons/image/crop.js | 32 + svg-icons/image/dehaze.js | 32 + svg-icons/image/details.js | 32 + svg-icons/image/edit.js | 32 + svg-icons/image/exposure-neg-1.js | 32 + svg-icons/image/exposure-neg-2.js | 32 + svg-icons/image/exposure-plus-1.js | 32 + svg-icons/image/exposure-plus-2.js | 32 + svg-icons/image/exposure-zero.js | 32 + svg-icons/image/exposure.js | 32 + svg-icons/image/filter-1.js | 32 + svg-icons/image/filter-2.js | 32 + svg-icons/image/filter-3.js | 32 + svg-icons/image/filter-4.js | 32 + svg-icons/image/filter-5.js | 32 + svg-icons/image/filter-6.js | 32 + svg-icons/image/filter-7.js | 32 + svg-icons/image/filter-8.js | 32 + svg-icons/image/filter-9-plus.js | 32 + svg-icons/image/filter-9.js | 32 + svg-icons/image/filter-b-and-w.js | 32 + svg-icons/image/filter-center-focus.js | 32 + svg-icons/image/filter-drama.js | 32 + svg-icons/image/filter-frames.js | 32 + svg-icons/image/filter-hdr.js | 32 + svg-icons/image/filter-none.js | 32 + svg-icons/image/filter-tilt-shift.js | 32 + svg-icons/image/filter-vintage.js | 32 + svg-icons/image/filter.js | 32 + svg-icons/image/flare.js | 32 + svg-icons/image/flash-auto.js | 32 + svg-icons/image/flash-off.js | 32 + svg-icons/image/flash-on.js | 32 + svg-icons/image/flip.js | 32 + svg-icons/image/gradient.js | 32 + svg-icons/image/grain.js | 32 + svg-icons/image/grid-off.js | 32 + svg-icons/image/grid-on.js | 32 + svg-icons/image/hdr-off.js | 32 + svg-icons/image/hdr-on.js | 32 + svg-icons/image/hdr-strong.js | 32 + svg-icons/image/hdr-weak.js | 32 + svg-icons/image/healing.js | 32 + svg-icons/image/image-aspect-ratio.js | 32 + svg-icons/image/image.js | 32 + svg-icons/image/iso.js | 32 + svg-icons/image/landscape.js | 32 + svg-icons/image/leak-add.js | 32 + svg-icons/image/leak-remove.js | 32 + svg-icons/image/lens.js | 32 + svg-icons/image/linked-camera.js | 34 + svg-icons/image/looks-3.js | 32 + svg-icons/image/looks-4.js | 32 + svg-icons/image/looks-5.js | 32 + svg-icons/image/looks-6.js | 32 + svg-icons/image/looks-one.js | 32 + svg-icons/image/looks-two.js | 32 + svg-icons/image/looks.js | 32 + svg-icons/image/loupe.js | 32 + svg-icons/image/monochrome-photos.js | 32 + svg-icons/image/movie-creation.js | 32 + svg-icons/image/movie-filter.js | 32 + svg-icons/image/music-note.js | 32 + svg-icons/image/nature-people.js | 32 + svg-icons/image/nature.js | 32 + svg-icons/image/navigate-before.js | 32 + svg-icons/image/navigate-next.js | 32 + svg-icons/image/palette.js | 32 + svg-icons/image/panorama-fish-eye.js | 32 + svg-icons/image/panorama-horizontal.js | 32 + svg-icons/image/panorama-vertical.js | 32 + svg-icons/image/panorama-wide-angle.js | 32 + svg-icons/image/panorama.js | 32 + svg-icons/image/photo-album.js | 32 + svg-icons/image/photo-camera.js | 33 + svg-icons/image/photo-filter.js | 32 + svg-icons/image/photo-library.js | 32 + svg-icons/image/photo-size-select-actual.js | 32 + svg-icons/image/photo-size-select-large.js | 32 + svg-icons/image/photo-size-select-small.js | 32 + svg-icons/image/photo.js | 32 + svg-icons/image/picture-as-pdf.js | 32 + svg-icons/image/portrait.js | 32 + svg-icons/image/remove-red-eye.js | 32 + svg-icons/image/rotate-90-degrees-ccw.js | 32 + svg-icons/image/rotate-left.js | 32 + svg-icons/image/rotate-right.js | 32 + svg-icons/image/slideshow.js | 32 + svg-icons/image/straighten.js | 32 + svg-icons/image/style.js | 32 + svg-icons/image/switch-camera.js | 32 + svg-icons/image/switch-video.js | 32 + svg-icons/image/tag-faces.js | 32 + svg-icons/image/texture.js | 32 + svg-icons/image/timelapse.js | 32 + svg-icons/image/timer-10.js | 32 + svg-icons/image/timer-3.js | 32 + svg-icons/image/timer-off.js | 32 + svg-icons/image/timer.js | 32 + svg-icons/image/tonality.js | 32 + svg-icons/image/transform.js | 32 + svg-icons/image/tune.js | 32 + svg-icons/image/view-comfy.js | 32 + svg-icons/image/view-compact.js | 32 + svg-icons/image/vignette.js | 32 + svg-icons/image/wb-auto.js | 32 + svg-icons/image/wb-cloudy.js | 32 + svg-icons/image/wb-incandescent.js | 32 + svg-icons/image/wb-iridescent.js | 32 + svg-icons/image/wb-sunny.js | 32 + svg-icons/index.es.js | 1922 +++++++ svg-icons/index.js | 4823 +++++++++++++++++ svg-icons/maps/add-location.js | 32 + svg-icons/maps/beenhere.js | 32 + svg-icons/maps/directions-bike.js | 32 + svg-icons/maps/directions-boat.js | 32 + svg-icons/maps/directions-bus.js | 32 + svg-icons/maps/directions-car.js | 32 + svg-icons/maps/directions-railway.js | 32 + svg-icons/maps/directions-run.js | 32 + svg-icons/maps/directions-subway.js | 32 + svg-icons/maps/directions-transit.js | 32 + svg-icons/maps/directions-walk.js | 32 + svg-icons/maps/directions.js | 32 + svg-icons/maps/edit-location.js | 32 + svg-icons/maps/ev-station.js | 32 + svg-icons/maps/flight.js | 33 + svg-icons/maps/hotel.js | 32 + svg-icons/maps/layers-clear.js | 32 + svg-icons/maps/layers.js | 32 + svg-icons/maps/local-activity.js | 32 + svg-icons/maps/local-airport.js | 32 + svg-icons/maps/local-atm.js | 32 + svg-icons/maps/local-bar.js | 32 + svg-icons/maps/local-cafe.js | 32 + svg-icons/maps/local-car-wash.js | 32 + svg-icons/maps/local-convenience-store.js | 32 + svg-icons/maps/local-dining.js | 32 + svg-icons/maps/local-drink.js | 32 + svg-icons/maps/local-florist.js | 32 + svg-icons/maps/local-gas-station.js | 32 + svg-icons/maps/local-grocery-store.js | 32 + svg-icons/maps/local-hospital.js | 32 + svg-icons/maps/local-hotel.js | 32 + svg-icons/maps/local-laundry-service.js | 32 + svg-icons/maps/local-library.js | 32 + svg-icons/maps/local-mall.js | 32 + svg-icons/maps/local-movies.js | 32 + svg-icons/maps/local-offer.js | 32 + svg-icons/maps/local-parking.js | 32 + svg-icons/maps/local-pharmacy.js | 32 + svg-icons/maps/local-phone.js | 32 + svg-icons/maps/local-pizza.js | 32 + svg-icons/maps/local-play.js | 32 + svg-icons/maps/local-post-office.js | 32 + svg-icons/maps/local-printshop.js | 32 + svg-icons/maps/local-see.js | 33 + svg-icons/maps/local-shipping.js | 32 + svg-icons/maps/local-taxi.js | 32 + svg-icons/maps/map.js | 32 + svg-icons/maps/my-location.js | 32 + svg-icons/maps/navigation.js | 32 + svg-icons/maps/near-me.js | 32 + svg-icons/maps/person-pin-circle.js | 32 + svg-icons/maps/person-pin.js | 32 + svg-icons/maps/pin-drop.js | 32 + svg-icons/maps/place.js | 32 + svg-icons/maps/rate-review.js | 32 + svg-icons/maps/restaurant-menu.js | 32 + svg-icons/maps/restaurant.js | 32 + svg-icons/maps/satellite.js | 32 + svg-icons/maps/store-mall-directory.js | 32 + svg-icons/maps/streetview.js | 34 + svg-icons/maps/subway.js | 34 + svg-icons/maps/terrain.js | 32 + svg-icons/maps/traffic.js | 32 + svg-icons/maps/train.js | 32 + svg-icons/maps/tram.js | 32 + svg-icons/maps/transfer-within-a-station.js | 32 + svg-icons/maps/zoom-out-map.js | 32 + svg-icons/navigation-arrow-drop-right.js | 33 + svg-icons/navigation/apps.js | 32 + svg-icons/navigation/arrow-back.js | 32 + svg-icons/navigation/arrow-downward.js | 32 + .../navigation/arrow-drop-down-circle.js | 32 + svg-icons/navigation/arrow-drop-down.js | 32 + svg-icons/navigation/arrow-drop-up.js | 32 + svg-icons/navigation/arrow-forward.js | 32 + svg-icons/navigation/arrow-upward.js | 32 + svg-icons/navigation/cancel.js | 32 + svg-icons/navigation/check.js | 32 + svg-icons/navigation/chevron-left.js | 32 + svg-icons/navigation/chevron-right.js | 32 + svg-icons/navigation/close.js | 32 + svg-icons/navigation/expand-less.js | 32 + svg-icons/navigation/expand-more.js | 32 + svg-icons/navigation/first-page.js | 32 + svg-icons/navigation/fullscreen-exit.js | 32 + svg-icons/navigation/fullscreen.js | 32 + svg-icons/navigation/last-page.js | 32 + svg-icons/navigation/menu.js | 32 + svg-icons/navigation/more-horiz.js | 32 + svg-icons/navigation/more-vert.js | 32 + svg-icons/navigation/refresh.js | 32 + .../navigation/subdirectory-arrow-left.js | 32 + .../navigation/subdirectory-arrow-right.js | 32 + svg-icons/navigation/unfold-less.js | 32 + svg-icons/navigation/unfold-more.js | 32 + svg-icons/notification/adb.js | 32 + .../notification/airline-seat-flat-angled.js | 32 + svg-icons/notification/airline-seat-flat.js | 32 + .../airline-seat-individual-suite.js | 32 + .../airline-seat-legroom-extra.js | 32 + .../airline-seat-legroom-normal.js | 32 + .../airline-seat-legroom-reduced.js | 32 + .../airline-seat-recline-extra.js | 32 + .../airline-seat-recline-normal.js | 32 + svg-icons/notification/bluetooth-audio.js | 32 + svg-icons/notification/confirmation-number.js | 32 + svg-icons/notification/disc-full.js | 32 + svg-icons/notification/do-not-disturb-alt.js | 32 + svg-icons/notification/do-not-disturb-off.js | 32 + svg-icons/notification/do-not-disturb-on.js | 32 + svg-icons/notification/do-not-disturb.js | 32 + svg-icons/notification/drive-eta.js | 32 + svg-icons/notification/enhanced-encryption.js | 32 + svg-icons/notification/event-available.js | 32 + svg-icons/notification/event-busy.js | 32 + svg-icons/notification/event-note.js | 32 + svg-icons/notification/folder-special.js | 32 + svg-icons/notification/live-tv.js | 32 + svg-icons/notification/mms.js | 32 + svg-icons/notification/more.js | 32 + svg-icons/notification/network-check.js | 32 + svg-icons/notification/network-locked.js | 32 + svg-icons/notification/no-encryption.js | 32 + svg-icons/notification/ondemand-video.js | 32 + svg-icons/notification/personal-video.js | 32 + .../notification/phone-bluetooth-speaker.js | 32 + svg-icons/notification/phone-forwarded.js | 32 + svg-icons/notification/phone-in-talk.js | 32 + svg-icons/notification/phone-locked.js | 32 + svg-icons/notification/phone-missed.js | 32 + svg-icons/notification/phone-paused.js | 32 + svg-icons/notification/power.js | 32 + svg-icons/notification/priority-high.js | 33 + svg-icons/notification/rv-hookup.js | 32 + svg-icons/notification/sd-card.js | 32 + svg-icons/notification/sim-card-alert.js | 32 + svg-icons/notification/sms-failed.js | 32 + svg-icons/notification/sms.js | 32 + svg-icons/notification/sync-disabled.js | 32 + svg-icons/notification/sync-problem.js | 32 + svg-icons/notification/sync.js | 32 + svg-icons/notification/system-update.js | 32 + svg-icons/notification/tap-and-play.js | 32 + svg-icons/notification/time-to-leave.js | 32 + svg-icons/notification/vibration.js | 32 + svg-icons/notification/voice-chat.js | 32 + svg-icons/notification/vpn-lock.js | 32 + svg-icons/notification/wc.js | 32 + svg-icons/notification/wifi.js | 32 + svg-icons/places/ac-unit.js | 32 + svg-icons/places/airport-shuttle.js | 32 + svg-icons/places/all-inclusive.js | 32 + svg-icons/places/beach-access.js | 32 + svg-icons/places/business-center.js | 32 + svg-icons/places/casino.js | 32 + svg-icons/places/child-care.js | 34 + svg-icons/places/child-friendly.js | 32 + svg-icons/places/fitness-center.js | 32 + svg-icons/places/free-breakfast.js | 32 + svg-icons/places/golf-course.js | 33 + svg-icons/places/hot-tub.js | 33 + svg-icons/places/kitchen.js | 32 + svg-icons/places/pool.js | 33 + svg-icons/places/room-service.js | 32 + svg-icons/places/rv-hookup.js | 32 + svg-icons/places/smoke-free.js | 32 + svg-icons/places/smoking-rooms.js | 32 + svg-icons/places/spa.js | 33 + svg-icons/social/cake.js | 32 + svg-icons/social/domain.js | 32 + svg-icons/social/group-add.js | 32 + svg-icons/social/group.js | 32 + svg-icons/social/location-city.js | 32 + svg-icons/social/mood-bad.js | 32 + svg-icons/social/mood.js | 32 + svg-icons/social/notifications-active.js | 32 + svg-icons/social/notifications-none.js | 32 + svg-icons/social/notifications-off.js | 32 + svg-icons/social/notifications-paused.js | 32 + svg-icons/social/notifications.js | 32 + svg-icons/social/pages.js | 32 + svg-icons/social/party-mode.js | 32 + svg-icons/social/people-outline.js | 32 + svg-icons/social/people.js | 32 + svg-icons/social/person-add.js | 32 + svg-icons/social/person-outline.js | 32 + svg-icons/social/person.js | 32 + svg-icons/social/plus-one.js | 32 + svg-icons/social/poll.js | 32 + svg-icons/social/public.js | 32 + svg-icons/social/school.js | 32 + svg-icons/social/sentiment-dissatisfied.js | 34 + svg-icons/social/sentiment-neutral.js | 35 + svg-icons/social/sentiment-satisfied.js | 34 + .../social/sentiment-very-dissatisfied.js | 32 + svg-icons/social/sentiment-very-satisfied.js | 32 + svg-icons/social/share.js | 32 + svg-icons/social/whatshot.js | 32 + svg-icons/toggle/check-box-outline-blank.js | 32 + svg-icons/toggle/check-box.js | 32 + svg-icons/toggle/indeterminate-check-box.js | 32 + svg-icons/toggle/radio-button-checked.js | 32 + svg-icons/toggle/radio-button-unchecked.js | 32 + svg-icons/toggle/star-border.js | 32 + svg-icons/toggle/star-half.js | 32 + svg-icons/toggle/star.js | 32 + test/README.md | 47 - test/index.js | 47 - test/integration/.eslintrc.yaml | 9 - test/integration/AppBar/AppBar.spec.js | 51 - .../AutoComplete/AutoComplete.spec.js | 24 - test/integration/Card/Card.spec.js | 52 - test/integration/List/ListItem.spec.js | 32 - test/integration/List/selectableList.spec.js | 66 - .../RenderToLayer/RenderToLayer.spec.js | 63 - .../Stepper/VerticalLinearStepper.js | 98 - .../Stepper/VerticalLinearStepper.spec.js | 60 - test/integration/Table/ArrayHeaderTable.js | 33 - .../Table/ArrayHeaderTable.spec.js | 76 - test/integration/Table/MultiSelectTable.js | 59 - .../Table/MultiSelectTable.spec.js | 100 - test/integration/Toolbar/ToolbarGroup.spec.js | 86 - test/integration/fixtures/inject-theme.js | 9 - .../fixtures/react-stub-context.js | 68 - test/integration/theming.spec.js | 194 - test/karma.conf.js | 106 - test/karma.tests.js | 4 - test/utils/consoleError.js | 13 - test/utils/dom.js | 21 - test/watch.js | 19 - tools/material-ui-babel-preset-es2015.js | 11 - utils/autoPrefix.js | 10 + utils/autoprefixer.js | 79 + utils/autoprefixerDynamic.js | 40 + utils/autoprefixerStatic.js | 40 + utils/callOnce.js | 26 + utils/childUtils.js | 26 + utils/colorManipulator.js | 242 + utils/deprecatedExport.js | 22 + utils/deprecatedPropType.js | 38 + utils/dom.js | 24 + utils/events.js | 39 + utils/propTypes.js | 35 + utils/rtl.js | 97 + utils/withWidth.js | 145 + 2812 files changed, 69127 insertions(+), 64433 deletions(-) create mode 100644 AppBar/AppBar.js create mode 100644 AppBar/index.js create mode 100644 AutoComplete/AutoComplete.js create mode 100644 AutoComplete/index.js create mode 100644 Avatar/Avatar.js create mode 100644 Avatar/index.js create mode 100644 Badge/Badge.js create mode 100644 Badge/index.js create mode 100644 BottomNavigation/BottomNavigation.js create mode 100644 BottomNavigation/BottomNavigationItem.js create mode 100644 BottomNavigation/index.js delete mode 100644 CODE_OF_CONDUCT.md delete mode 100644 CONTRIBUTING.md create mode 100644 Card/Card.js create mode 100644 Card/CardActions.js create mode 100644 Card/CardExpandable.js create mode 100644 Card/CardHeader.js create mode 100644 Card/CardMedia.js create mode 100644 Card/CardText.js create mode 100644 Card/CardTitle.js create mode 100644 Card/index.js create mode 100644 Checkbox/Checkbox.js create mode 100644 Checkbox/index.js create mode 100644 Chip/Chip.js create mode 100644 Chip/index.js create mode 100644 CircularProgress/CircularProgress.js create mode 100644 CircularProgress/index.js create mode 100644 DatePicker/Calendar.js create mode 100644 DatePicker/CalendarActionButtons.js create mode 100644 DatePicker/CalendarMonth.js create mode 100644 DatePicker/CalendarToolbar.js create mode 100644 DatePicker/CalendarYear.js create mode 100644 DatePicker/DateDisplay.js create mode 100644 DatePicker/DatePicker.js create mode 100644 DatePicker/DatePickerDialog.js create mode 100644 DatePicker/DayButton.js create mode 100644 DatePicker/YearButton.js create mode 100644 DatePicker/dateUtils.js create mode 100644 DatePicker/index.js create mode 100644 Dialog/Dialog.js create mode 100644 Dialog/index.js create mode 100644 Divider/Divider.js create mode 100644 Divider/index.js create mode 100644 Drawer/Drawer.js create mode 100644 Drawer/index.js create mode 100644 DropDownMenu/DropDownMenu.js create mode 100644 DropDownMenu/index.js create mode 100644 FlatButton/FlatButton.js create mode 100644 FlatButton/FlatButtonLabel.js create mode 100644 FlatButton/index.js create mode 100644 FloatingActionButton/FloatingActionButton.js create mode 100644 FloatingActionButton/index.js create mode 100644 FontIcon/FontIcon.js create mode 100644 FontIcon/index.js delete mode 100644 GOVERNANCE.md create mode 100644 GridList/GridList.js create mode 100644 GridList/GridTile.js create mode 100644 GridList/index.js create mode 100644 IconButton/IconButton.js create mode 100644 IconButton/index.js create mode 100644 IconMenu/IconMenu.js create mode 100644 IconMenu/index.js create mode 100644 LinearProgress/LinearProgress.js create mode 100644 LinearProgress/index.js create mode 100644 List/List.js create mode 100644 List/ListItem.js create mode 100644 List/NestedList.js create mode 100644 List/index.js create mode 100644 List/makeSelectable.js create mode 100644 Menu/Menu.js create mode 100644 Menu/index.js create mode 100644 Menu/menuUtils.js create mode 100644 MenuItem/MenuItem.js create mode 100644 MenuItem/index.js create mode 100644 Paper/Paper.js create mode 100644 Paper/index.js create mode 100644 Popover/Popover.js create mode 100644 Popover/PopoverAnimationDefault.js create mode 100644 Popover/PopoverAnimationVertical.js create mode 100644 Popover/index.js delete mode 100644 ROADMAP.md create mode 100644 RadioButton/RadioButton.js create mode 100644 RadioButton/RadioButtonGroup.js create mode 100644 RadioButton/index.js create mode 100644 RaisedButton/RaisedButton.js create mode 100644 RaisedButton/index.js create mode 100644 RefreshIndicator/RefreshIndicator.js create mode 100644 RefreshIndicator/index.js create mode 100644 SelectField/SelectField.js create mode 100644 SelectField/index.js create mode 100644 Slider/Slider.js create mode 100644 Slider/index.js create mode 100644 Snackbar/Snackbar.js create mode 100644 Snackbar/SnackbarBody.js create mode 100644 Snackbar/index.js create mode 100644 Stepper/Step.js create mode 100644 Stepper/StepButton.js create mode 100644 Stepper/StepConnector.js create mode 100644 Stepper/StepContent.js create mode 100644 Stepper/StepLabel.js create mode 100644 Stepper/Stepper.js create mode 100644 Stepper/index.js create mode 100644 Subheader/Subheader.js create mode 100644 Subheader/index.js create mode 100644 SvgIcon/SvgIcon.js create mode 100644 SvgIcon/index.js create mode 100644 Table/Table.js create mode 100644 Table/TableBody.js create mode 100644 Table/TableFooter.js create mode 100644 Table/TableHeader.js create mode 100644 Table/TableHeaderColumn.js create mode 100644 Table/TableRow.js create mode 100644 Table/TableRowColumn.js create mode 100644 Table/index.js create mode 100644 Tabs/InkBar.js create mode 100644 Tabs/Tab.js create mode 100644 Tabs/TabTemplate.js create mode 100644 Tabs/Tabs.js create mode 100644 Tabs/index.js create mode 100644 TextField/EnhancedTextarea.js create mode 100644 TextField/TextField.js create mode 100644 TextField/TextFieldHint.js create mode 100644 TextField/TextFieldLabel.js create mode 100644 TextField/TextFieldUnderline.js create mode 100644 TextField/index.js create mode 100644 TimePicker/Clock.js create mode 100644 TimePicker/ClockHours.js create mode 100644 TimePicker/ClockMinutes.js create mode 100644 TimePicker/ClockNumber.js create mode 100644 TimePicker/ClockPointer.js create mode 100644 TimePicker/TimeDisplay.js create mode 100644 TimePicker/TimePicker.js create mode 100644 TimePicker/TimePickerDialog.js create mode 100644 TimePicker/index.js create mode 100644 TimePicker/timeUtils.js create mode 100644 Toggle/Toggle.js create mode 100644 Toggle/index.js create mode 100644 Toolbar/Toolbar.js create mode 100644 Toolbar/ToolbarGroup.js create mode 100644 Toolbar/ToolbarSeparator.js create mode 100644 Toolbar/ToolbarTitle.js create mode 100644 Toolbar/index.js delete mode 100644 docs/.babelrc delete mode 100644 docs/.gitignore delete mode 100644 docs/README.md delete mode 100644 docs/android/app/build.gradle delete mode 100644 docs/android/app/proguard-rules.pro delete mode 100644 docs/android/app/react.gradle delete mode 100644 docs/android/app/src/main/AndroidManifest.xml delete mode 100644 docs/android/app/src/main/java/com/app/MainActivity.java delete mode 100644 docs/android/app/src/main/res/mipmap-hdpi/ic_launcher.png delete mode 100644 docs/android/app/src/main/res/mipmap-mdpi/ic_launcher.png delete mode 100644 docs/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png delete mode 100644 docs/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png delete mode 100644 docs/android/app/src/main/res/values/strings.xml delete mode 100644 docs/android/app/src/main/res/values/styles.xml delete mode 100644 docs/android/build.gradle delete mode 100644 docs/android/gradle.properties delete mode 100644 docs/android/gradle/wrapper/gradle-wrapper.jar delete mode 100644 docs/android/gradle/wrapper/gradle-wrapper.properties delete mode 100755 docs/android/gradlew delete mode 100644 docs/android/gradlew.bat delete mode 100644 docs/android/settings.gradle delete mode 100755 docs/gh-pages-build.js delete mode 100644 docs/ios/App.xcodeproj/project.pbxproj delete mode 100644 docs/ios/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme delete mode 100644 docs/ios/App/AppDelegate.h delete mode 100644 docs/ios/App/AppDelegate.m delete mode 100644 docs/ios/App/Base.lproj/LaunchScreen.xib delete mode 100644 docs/ios/App/Images.xcassets/AppIcon.appiconset/Contents.json delete mode 100644 docs/ios/App/Info.plist delete mode 100644 docs/ios/App/main.m delete mode 100644 docs/ios/AppTests/AppTests.m delete mode 100644 docs/ios/AppTests/Info.plist delete mode 100644 docs/ios/main.jsbundle delete mode 100644 docs/package.json delete mode 100644 docs/src/.babelrc delete mode 100644 docs/src/app/AppRoutes.js delete mode 100644 docs/src/app/app.android.js delete mode 100644 docs/src/app/app.ios.js delete mode 100644 docs/src/app/app.js delete mode 100644 docs/src/app/app.native.js delete mode 100644 docs/src/app/components/AppNavDrawer.js delete mode 100644 docs/src/app/components/Carbon.css delete mode 100644 docs/src/app/components/Carbon.js delete mode 100644 docs/src/app/components/CodeExample/CodeBlock.js delete mode 100644 docs/src/app/components/CodeExample/CodeBlockTitle.js delete mode 100644 docs/src/app/components/CodeExample/index.js delete mode 100644 docs/src/app/components/FullWidthSection.js delete mode 100644 docs/src/app/components/MarkdownElement.js delete mode 100644 docs/src/app/components/Master.js delete mode 100644 docs/src/app/components/MobileTearSheet.js delete mode 100644 docs/src/app/components/PropTypeDescription.js delete mode 100644 docs/src/app/components/mui-github-markdown.css delete mode 100644 docs/src/app/components/pages/Home.js delete mode 100644 docs/src/app/components/pages/HomeFeature.js delete mode 100644 docs/src/app/components/pages/components/AppBar/ExampleComposition.js delete mode 100644 docs/src/app/components/pages/components/AppBar/ExampleIcon.js delete mode 100644 docs/src/app/components/pages/components/AppBar/ExampleIconButton.js delete mode 100644 docs/src/app/components/pages/components/AppBar/Page.js delete mode 100644 docs/src/app/components/pages/components/AppBar/README.md delete mode 100644 docs/src/app/components/pages/components/AutoComplete/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/AutoComplete/ExampleDataSources.js delete mode 100644 docs/src/app/components/pages/components/AutoComplete/ExampleFilters.js delete mode 100644 docs/src/app/components/pages/components/AutoComplete/ExampleMenuProps.js delete mode 100644 docs/src/app/components/pages/components/AutoComplete/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/AutoComplete/Page.js delete mode 100644 docs/src/app/components/pages/components/AutoComplete/README.md delete mode 100644 docs/src/app/components/pages/components/Avatar/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Avatar/Page.js delete mode 100644 docs/src/app/components/pages/components/Avatar/README.md delete mode 100644 docs/src/app/components/pages/components/Badge/ExampleContent.js delete mode 100644 docs/src/app/components/pages/components/Badge/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Badge/Page.js delete mode 100644 docs/src/app/components/pages/components/Badge/README.md delete mode 100644 docs/src/app/components/pages/components/BottomNavigation/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/BottomNavigation/Page.js delete mode 100644 docs/src/app/components/pages/components/BottomNavigation/README.md delete mode 100644 docs/src/app/components/pages/components/Card/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/Card/ExampleExpandable.js delete mode 100644 docs/src/app/components/pages/components/Card/ExampleWithAvatar.js delete mode 100644 docs/src/app/components/pages/components/Card/Page.js delete mode 100644 docs/src/app/components/pages/components/Card/README.md delete mode 100644 docs/src/app/components/pages/components/Checkbox/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Checkbox/Page.js delete mode 100644 docs/src/app/components/pages/components/Checkbox/README.md delete mode 100644 docs/src/app/components/pages/components/Chip/ExampleArray.js delete mode 100644 docs/src/app/components/pages/components/Chip/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Chip/Page.js delete mode 100644 docs/src/app/components/pages/components/Chip/README.md delete mode 100644 docs/src/app/components/pages/components/CircularProgress/ExampleDeterminate.js delete mode 100644 docs/src/app/components/pages/components/CircularProgress/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/CircularProgress/Page.js delete mode 100644 docs/src/app/components/pages/components/CircularProgress/README.md delete mode 100644 docs/src/app/components/pages/components/DatePicker/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/DatePicker/ExampleDisableDates.js delete mode 100644 docs/src/app/components/pages/components/DatePicker/ExampleInline.js delete mode 100644 docs/src/app/components/pages/components/DatePicker/ExampleInternational.js delete mode 100644 docs/src/app/components/pages/components/DatePicker/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/DatePicker/ExampleToggle.js delete mode 100644 docs/src/app/components/pages/components/DatePicker/Page.js delete mode 100644 docs/src/app/components/pages/components/DatePicker/README.md delete mode 100644 docs/src/app/components/pages/components/Dialog/ExampleAlert.js delete mode 100644 docs/src/app/components/pages/components/Dialog/ExampleCustomWidth.js delete mode 100644 docs/src/app/components/pages/components/Dialog/ExampleDialogDatePicker.js delete mode 100644 docs/src/app/components/pages/components/Dialog/ExampleModal.js delete mode 100644 docs/src/app/components/pages/components/Dialog/ExampleScrollable.js delete mode 100644 docs/src/app/components/pages/components/Dialog/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Dialog/Page.js delete mode 100644 docs/src/app/components/pages/components/Dialog/README.md delete mode 100644 docs/src/app/components/pages/components/Divider/ExampleForm.js delete mode 100644 docs/src/app/components/pages/components/Divider/ExampleList.js delete mode 100644 docs/src/app/components/pages/components/Divider/ExampleMenu.js delete mode 100644 docs/src/app/components/pages/components/Divider/Page.js delete mode 100644 docs/src/app/components/pages/components/Divider/README.md delete mode 100644 docs/src/app/components/pages/components/Drawer/ExampleOpenSecondary.js delete mode 100644 docs/src/app/components/pages/components/Drawer/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Drawer/ExampleUndocked.js delete mode 100644 docs/src/app/components/pages/components/Drawer/Page.js delete mode 100644 docs/src/app/components/pages/components/Drawer/README.md delete mode 100644 docs/src/app/components/pages/components/DropDownMenu/ExampleLabeled.js delete mode 100644 docs/src/app/components/pages/components/DropDownMenu/ExampleLongMenu.js delete mode 100644 docs/src/app/components/pages/components/DropDownMenu/ExampleOpenImmediate.js delete mode 100644 docs/src/app/components/pages/components/DropDownMenu/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/DropDownMenu/Page.js delete mode 100644 docs/src/app/components/pages/components/DropDownMenu/README.md delete mode 100644 docs/src/app/components/pages/components/FlatButton/ExampleComplex.js delete mode 100644 docs/src/app/components/pages/components/FlatButton/ExampleIcon.js delete mode 100644 docs/src/app/components/pages/components/FlatButton/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/FlatButton/Page.js delete mode 100644 docs/src/app/components/pages/components/FlatButton/README.md delete mode 100644 docs/src/app/components/pages/components/FloatingActionButton/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/FloatingActionButton/Page.js delete mode 100644 docs/src/app/components/pages/components/FloatingActionButton/README.md delete mode 100644 docs/src/app/components/pages/components/FontIcon/ExampleIcons.js delete mode 100644 docs/src/app/components/pages/components/FontIcon/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/FontIcon/Page.js delete mode 100644 docs/src/app/components/pages/components/FontIcon/README.md delete mode 100644 docs/src/app/components/pages/components/GridList/ExampleComplex.js delete mode 100644 docs/src/app/components/pages/components/GridList/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/GridList/ExampleSingleLine.js delete mode 100644 docs/src/app/components/pages/components/GridList/Page.js delete mode 100644 docs/src/app/components/pages/components/GridList/README.md delete mode 100644 docs/src/app/components/pages/components/IconButton/ExampleComplex.js delete mode 100644 docs/src/app/components/pages/components/IconButton/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/IconButton/ExampleSize.js delete mode 100644 docs/src/app/components/pages/components/IconButton/ExampleTooltip.js delete mode 100644 docs/src/app/components/pages/components/IconButton/ExampleTouch.js delete mode 100644 docs/src/app/components/pages/components/IconButton/Page.js delete mode 100644 docs/src/app/components/pages/components/IconButton/README.md delete mode 100644 docs/src/app/components/pages/components/IconMenu/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/IconMenu/ExampleNested.js delete mode 100644 docs/src/app/components/pages/components/IconMenu/ExampleScrollable.js delete mode 100644 docs/src/app/components/pages/components/IconMenu/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/IconMenu/Page.js delete mode 100644 docs/src/app/components/pages/components/IconMenu/README.md delete mode 100644 docs/src/app/components/pages/components/LinearProgress/ExampleDeterminate.js delete mode 100644 docs/src/app/components/pages/components/LinearProgress/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/LinearProgress/Page.js delete mode 100644 docs/src/app/components/pages/components/LinearProgress/README.md delete mode 100644 docs/src/app/components/pages/components/List/ExampleChat.js delete mode 100644 docs/src/app/components/pages/components/List/ExampleContacts.js delete mode 100644 docs/src/app/components/pages/components/List/ExampleFolders.js delete mode 100644 docs/src/app/components/pages/components/List/ExampleMessages.js delete mode 100644 docs/src/app/components/pages/components/List/ExampleNested.js delete mode 100644 docs/src/app/components/pages/components/List/ExamplePhone.js delete mode 100644 docs/src/app/components/pages/components/List/ExampleSelectable.js delete mode 100644 docs/src/app/components/pages/components/List/ExampleSettings.js delete mode 100644 docs/src/app/components/pages/components/List/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/List/Page.js delete mode 100644 docs/src/app/components/pages/components/List/README.md delete mode 100644 docs/src/app/components/pages/components/Menu/ExampleDisable.js delete mode 100644 docs/src/app/components/pages/components/Menu/ExampleIcons.js delete mode 100644 docs/src/app/components/pages/components/Menu/ExampleNested.js delete mode 100644 docs/src/app/components/pages/components/Menu/ExampleSecondary.js delete mode 100644 docs/src/app/components/pages/components/Menu/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Menu/Page.js delete mode 100644 docs/src/app/components/pages/components/Menu/README.md delete mode 100644 docs/src/app/components/pages/components/Paper/ExampleCircle.js delete mode 100644 docs/src/app/components/pages/components/Paper/ExampleRounded.js delete mode 100644 docs/src/app/components/pages/components/Paper/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Paper/Page.js delete mode 100644 docs/src/app/components/pages/components/Paper/README.md delete mode 100644 docs/src/app/components/pages/components/Popover/ExampleAnimation.js delete mode 100644 docs/src/app/components/pages/components/Popover/ExampleConfigurable.js delete mode 100644 docs/src/app/components/pages/components/Popover/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Popover/NOTE.md delete mode 100644 docs/src/app/components/pages/components/Popover/Page.js delete mode 100644 docs/src/app/components/pages/components/Popover/README.md delete mode 100644 docs/src/app/components/pages/components/RadioButton/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/RadioButton/Page.js delete mode 100644 docs/src/app/components/pages/components/RadioButton/README.md delete mode 100644 docs/src/app/components/pages/components/RaisedButton/ExampleComplex.js delete mode 100644 docs/src/app/components/pages/components/RaisedButton/ExampleIcon.js delete mode 100644 docs/src/app/components/pages/components/RaisedButton/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/RaisedButton/Page.js delete mode 100644 docs/src/app/components/pages/components/RaisedButton/README.md delete mode 100644 docs/src/app/components/pages/components/RefreshIndicator/ExampleLoading.js delete mode 100644 docs/src/app/components/pages/components/RefreshIndicator/ExampleReady.js delete mode 100644 docs/src/app/components/pages/components/RefreshIndicator/Page.js delete mode 100644 docs/src/app/components/pages/components/RefreshIndicator/README.md delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleCustomLabel.js delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleError.js delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleFloatingLabel.js delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleLongMenu.js delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleMultiSelect.js delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleNullable.js delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleSelectionRenderer.js delete mode 100644 docs/src/app/components/pages/components/SelectField/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/SelectField/Page.js delete mode 100644 docs/src/app/components/pages/components/SelectField/README.md delete mode 100644 docs/src/app/components/pages/components/Slider/ExampleAxis.js delete mode 100644 docs/src/app/components/pages/components/Slider/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/Slider/ExampleCustomScale.js delete mode 100644 docs/src/app/components/pages/components/Slider/ExampleDisabled.js delete mode 100644 docs/src/app/components/pages/components/Slider/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Slider/ExampleStep.js delete mode 100644 docs/src/app/components/pages/components/Slider/Page.js delete mode 100644 docs/src/app/components/pages/components/Slider/README.md delete mode 100644 docs/src/app/components/pages/components/Snackbar/ExampleAction.js delete mode 100644 docs/src/app/components/pages/components/Snackbar/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Snackbar/ExampleTwice.js delete mode 100644 docs/src/app/components/pages/components/Snackbar/Page.js delete mode 100644 docs/src/app/components/pages/components/Snackbar/README.md delete mode 100644 docs/src/app/components/pages/components/Stepper/Advanced.md delete mode 100644 docs/src/app/components/pages/components/Stepper/CustomIcon.js delete mode 100644 docs/src/app/components/pages/components/Stepper/CustomStepConnector.js delete mode 100644 docs/src/app/components/pages/components/Stepper/GranularControlStepper.js delete mode 100644 docs/src/app/components/pages/components/Stepper/HorizontalLinearStepper.js delete mode 100644 docs/src/app/components/pages/components/Stepper/HorizontalNonLinearStepper.js delete mode 100644 docs/src/app/components/pages/components/Stepper/HorizontalTransition.js delete mode 100644 docs/src/app/components/pages/components/Stepper/Page.js delete mode 100644 docs/src/app/components/pages/components/Stepper/README.md delete mode 100644 docs/src/app/components/pages/components/Stepper/VerticalLinearStepper.js delete mode 100644 docs/src/app/components/pages/components/Stepper/VerticalNonLinearStepper.js delete mode 100644 docs/src/app/components/pages/components/Subheader/Page.js delete mode 100644 docs/src/app/components/pages/components/Subheader/README.md delete mode 100644 docs/src/app/components/pages/components/SvgIcon/ExampleIcons.js delete mode 100644 docs/src/app/components/pages/components/SvgIcon/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/SvgIcon/Page.js delete mode 100644 docs/src/app/components/pages/components/SvgIcon/README.md delete mode 100644 docs/src/app/components/pages/components/Table/ExampleComplex.js delete mode 100644 docs/src/app/components/pages/components/Table/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/Table/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Table/Page.js delete mode 100644 docs/src/app/components/pages/components/Table/README.md delete mode 100644 docs/src/app/components/pages/components/Tabs/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/Tabs/ExampleIcon.js delete mode 100644 docs/src/app/components/pages/components/Tabs/ExampleIconText.js delete mode 100644 docs/src/app/components/pages/components/Tabs/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Tabs/ExampleSwipeable.js delete mode 100644 docs/src/app/components/pages/components/Tabs/Page.js delete mode 100644 docs/src/app/components/pages/components/Tabs/README.md delete mode 100644 docs/src/app/components/pages/components/TextField/ExampleControlled.js delete mode 100644 docs/src/app/components/pages/components/TextField/ExampleCustomize.js delete mode 100644 docs/src/app/components/pages/components/TextField/ExampleDisabled.js delete mode 100644 docs/src/app/components/pages/components/TextField/ExampleError.js delete mode 100644 docs/src/app/components/pages/components/TextField/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/TextField/Page.js delete mode 100644 docs/src/app/components/pages/components/TextField/README.md delete mode 100644 docs/src/app/components/pages/components/TimePicker/ExampleComplex.js delete mode 100644 docs/src/app/components/pages/components/TimePicker/ExampleInternational.js delete mode 100644 docs/src/app/components/pages/components/TimePicker/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/TimePicker/ExampleStep.js delete mode 100644 docs/src/app/components/pages/components/TimePicker/Page.js delete mode 100644 docs/src/app/components/pages/components/TimePicker/README.md delete mode 100644 docs/src/app/components/pages/components/Toggle/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Toggle/Page.js delete mode 100644 docs/src/app/components/pages/components/Toggle/README.md delete mode 100644 docs/src/app/components/pages/components/Toolbar/ExampleSimple.js delete mode 100644 docs/src/app/components/pages/components/Toolbar/Page.js delete mode 100644 docs/src/app/components/pages/components/Toolbar/README.md delete mode 100644 docs/src/app/components/pages/components/Toolbar/Toolbar.md delete mode 100644 docs/src/app/components/pages/components/Toolbar/ToolbarGroup.md delete mode 100644 docs/src/app/components/pages/components/Toolbar/ToolbarSeparator.md delete mode 100644 docs/src/app/components/pages/components/Toolbar/ToolbarTitle.md delete mode 100644 docs/src/app/components/pages/customization/Colors.js delete mode 100644 docs/src/app/components/pages/customization/Styles.js delete mode 100644 docs/src/app/components/pages/customization/StylesOverridingCssExample.js delete mode 100644 docs/src/app/components/pages/customization/StylesOverridingInlineExample.js delete mode 100644 docs/src/app/components/pages/customization/Themes.js delete mode 100644 docs/src/app/components/pages/customization/styles-overriding-css.md delete mode 100644 docs/src/app/components/pages/customization/styles-overriding-inline.md delete mode 100644 docs/src/app/components/pages/customization/styles.md delete mode 100644 docs/src/app/components/pages/customization/themes.md delete mode 100644 docs/src/app/components/pages/discover-more/Community.js delete mode 100644 docs/src/app/components/pages/discover-more/Contributing.js delete mode 100644 docs/src/app/components/pages/discover-more/RelatedProjects.js delete mode 100644 docs/src/app/components/pages/discover-more/Showcase.js delete mode 100644 docs/src/app/components/pages/discover-more/community.md delete mode 100644 docs/src/app/components/pages/discover-more/related-projects.md delete mode 100644 docs/src/app/components/pages/discover-more/showcase.md delete mode 100644 docs/src/app/components/pages/get-started/Examples.js delete mode 100644 docs/src/app/components/pages/get-started/Installation.js delete mode 100644 docs/src/app/components/pages/get-started/RequiredKnowledge.js delete mode 100644 docs/src/app/components/pages/get-started/ServerRendering.js delete mode 100644 docs/src/app/components/pages/get-started/Usage.js delete mode 100644 docs/src/app/components/pages/get-started/examples.md delete mode 100644 docs/src/app/components/pages/get-started/installation.md delete mode 100644 docs/src/app/components/pages/get-started/required-knowledge.md delete mode 100644 docs/src/app/components/pages/get-started/server-rendering.md delete mode 100644 docs/src/app/components/pages/get-started/usage.md delete mode 100644 docs/src/app/components/prop-type-description.css delete mode 100644 docs/src/www/css/font-icons/fonts/material-ui-icons.eot delete mode 100644 docs/src/www/css/font-icons/fonts/material-ui-icons.svg delete mode 100644 docs/src/www/css/font-icons/fonts/material-ui-icons.ttf delete mode 100644 docs/src/www/css/font-icons/fonts/material-ui-icons.woff delete mode 100644 docs/src/www/css/font-icons/style.css delete mode 100644 docs/src/www/css/github.css delete mode 100644 docs/src/www/css/main.css delete mode 100644 docs/src/www/images/adellecharles-128.jpg delete mode 100644 docs/src/www/images/adhamdannaway-128.jpg delete mode 100644 docs/src/www/images/allisongrayce-128.jpg delete mode 100644 docs/src/www/images/angelceballos-128.jpg delete mode 100644 docs/src/www/images/baseline-20px-grid.gif delete mode 100644 docs/src/www/images/bottom-tear.svg delete mode 100644 docs/src/www/images/chexee-128.jpg delete mode 100644 docs/src/www/images/components.svg delete mode 100644 docs/src/www/images/css-framework.svg delete mode 100755 docs/src/www/images/favicon.ico delete mode 100644 docs/src/www/images/get-started.svg delete mode 100644 docs/src/www/images/grid-list/00-52-29-429_640.jpg delete mode 100644 docs/src/www/images/grid-list/burger-827309_640.jpg delete mode 100644 docs/src/www/images/grid-list/camera-813814_640.jpg delete mode 100644 docs/src/www/images/grid-list/hats-829509_640.jpg delete mode 100644 docs/src/www/images/grid-list/honey-823614_640.jpg delete mode 100644 docs/src/www/images/grid-list/morning-819362_640.jpg delete mode 100644 docs/src/www/images/grid-list/vegetables-790022_640.jpg delete mode 100644 docs/src/www/images/grid-list/water-plant-821293_640.jpg delete mode 100644 docs/src/www/images/jsa-128.jpg delete mode 100644 docs/src/www/images/kerem-128.jpg delete mode 100644 docs/src/www/images/kolage-128.jpg delete mode 100644 docs/src/www/images/material-ui-logo.svg delete mode 100644 docs/src/www/images/nature-600-337.jpg delete mode 100644 docs/src/www/images/ok-128.jpg delete mode 100644 docs/src/www/images/raquelromanp-128.jpg delete mode 100644 docs/src/www/images/showcase/alarmdj.png delete mode 100644 docs/src/www/images/showcase/apirequest-capture-by-moesif.png delete mode 100644 docs/src/www/images/showcase/arcchat.png delete mode 100644 docs/src/www/images/showcase/brainbok-for-pmp-capm-certification.png delete mode 100644 docs/src/www/images/showcase/callemall.png delete mode 100644 docs/src/www/images/showcase/casalova.png delete mode 100644 docs/src/www/images/showcase/cloudcraft.png delete mode 100644 docs/src/www/images/showcase/crypticker.png delete mode 100644 docs/src/www/images/showcase/dearborn-denim.png delete mode 100644 docs/src/www/images/showcase/devsketch.png delete mode 100644 docs/src/www/images/showcase/flow.png delete mode 100644 docs/src/www/images/showcase/flyweekend.png delete mode 100644 docs/src/www/images/showcase/gh-invoice-builder.png delete mode 100644 docs/src/www/images/showcase/hoophubs-basketball-stats-tool.png delete mode 100644 docs/src/www/images/showcase/itsquiz.png delete mode 100644 docs/src/www/images/showcase/lirelactu.png delete mode 100644 docs/src/www/images/showcase/react-most-wanted.png delete mode 100644 docs/src/www/images/showcase/realty-advisors-elite.png delete mode 100644 docs/src/www/images/showcase/serif-nu.png delete mode 100755 docs/src/www/images/showcase/slimchess.png delete mode 100644 docs/src/www/images/showcase/smaftv.png delete mode 100644 docs/src/www/images/showcase/smpl.png delete mode 100644 docs/src/www/images/showcase/splitme.png delete mode 100644 docs/src/www/images/showcase/syncano.png delete mode 100644 docs/src/www/images/showcase/wv-order-form.png delete mode 100644 docs/src/www/images/uxceo-128.jpg delete mode 100644 docs/src/www/index.html delete mode 100644 docs/src/www/versions.json delete mode 100644 docs/webpack-dev-server.config.js delete mode 100644 docs/webpack-production.config.js delete mode 160000 examples/razzle-styled-example delete mode 160000 examples/webpack-example create mode 100644 index.es.js create mode 100644 index.js create mode 100644 internal/AppCanvas.js create mode 100644 internal/AutoLockScrolling.js create mode 100644 internal/BeforeAfterWrapper.js create mode 100644 internal/CircleRipple.js create mode 100644 internal/ClearFix.js create mode 100644 internal/ClickAwayListener.js create mode 100644 internal/EnhancedButton.js create mode 100644 internal/EnhancedSwitch.js create mode 100644 internal/ExpandTransition.js create mode 100644 internal/ExpandTransitionChild.js create mode 100644 internal/FocusRipple.js create mode 100644 internal/Overlay.js create mode 100644 internal/RenderToLayer.js create mode 100644 internal/ScaleIn.js create mode 100644 internal/ScaleInChild.js create mode 100644 internal/SlideIn.js create mode 100644 internal/SlideInChild.js create mode 100644 internal/Tooltip.js create mode 100644 internal/TouchRipple.js delete mode 100644 packages/icon-builder/.gitignore delete mode 100644 packages/icon-builder/Gruntfile.js delete mode 100644 packages/icon-builder/README.md delete mode 100755 packages/icon-builder/build.js delete mode 100644 packages/icon-builder/filters/rename/default.js delete mode 100644 packages/icon-builder/filters/rename/material-design-icons.js delete mode 100644 packages/icon-builder/package.json delete mode 100644 packages/icon-builder/test/fixtures/game-icons/README.md delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/delapouite/dice/svg/000000/transparent/dice-six-faces-five.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/delapouite/dice/svg/000000/transparent/dice-six-faces-four.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/delapouite/dice/svg/000000/transparent/perspective-dice-six-faces-random.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/delapouite/dice/svg/000000/transparent/perspective-dice-six-faces-six.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/john-colburn/originals/svg/000000/transparent/pistol-gun.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/lorc/originals/svg/000000/transparent/ace.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/lorc/originals/svg/000000/transparent/acid-blob.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/lorc/originals/svg/000000/transparent/acorn.svg delete mode 100644 packages/icon-builder/test/fixtures/game-icons/svg/icons/lorc/originals/svg/000000/transparent/alien-skull.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_3d_rotation_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_3d_rotation_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_accessibility_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_accessibility_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_balance_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_balance_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_balance_wallet_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_balance_wallet_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_box_18px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_box_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_box_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_circle_18px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_circle_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_account_circle_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_add_shopping_cart_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_add_shopping_cart_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_alarm_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/action/svg/production/ic_alarm_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/design/ic_cake_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/design/ic_cake_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/design/ic_domain_18px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/design/ic_domain_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/design/ic_domain_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_cake_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_cake_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_domain_18px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_domain_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_domain_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_group_18px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_group_24px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_group_48px.svg delete mode 100644 packages/icon-builder/test/fixtures/material-design-icons/svg/social/svg/production/ic_group_add_18px.svg delete mode 100644 packages/icon-builder/test/index.js delete mode 100644 packages/icon-builder/tpl/SvgIcon.js delete mode 100644 packages/material-ui-codemod/.babelrc delete mode 100644 packages/material-ui-codemod/.gitignore delete mode 100644 packages/material-ui-codemod/README.md delete mode 100644 packages/material-ui-codemod/modules/v0.15.0/import-path.js delete mode 100644 packages/material-ui-codemod/modules/v0.15.0/import-path.spec.js delete mode 100644 packages/material-ui-codemod/modules/v0.15.0/import-path.spec/actual.js delete mode 100644 packages/material-ui-codemod/modules/v0.15.0/import-path.spec/expected.js delete mode 100644 packages/material-ui-codemod/package.json delete mode 100644 packages/material-ui-codemod/test.js delete mode 100644 scripts/copy-files.js delete mode 100644 scripts/icon-index-generator.js delete mode 100644 scripts/prefixGenerator.js delete mode 100755 scripts/run-travis-tests.sh delete mode 100644 src/AppBar/AppBar.js delete mode 100644 src/AppBar/AppBar.spec.js delete mode 100644 src/AppBar/index.js delete mode 100644 src/AutoComplete/AutoComplete.js delete mode 100644 src/AutoComplete/AutoComplete.spec.js delete mode 100644 src/AutoComplete/index.js delete mode 100644 src/Avatar/Avatar.js delete mode 100644 src/Avatar/Avatar.spec.js delete mode 100644 src/Avatar/index.js delete mode 100644 src/Badge/Badge.js delete mode 100644 src/Badge/Badge.spec.js delete mode 100644 src/Badge/index.js delete mode 100644 src/BottomNavigation/BottomNavigation.js delete mode 100644 src/BottomNavigation/BottomNavigation.spec.js delete mode 100644 src/BottomNavigation/BottomNavigationItem.js delete mode 100644 src/BottomNavigation/BottomNavigationItem.spec.js delete mode 100644 src/BottomNavigation/index.js delete mode 100644 src/Card/Card.js delete mode 100644 src/Card/CardActions.js delete mode 100644 src/Card/CardExpandable.js delete mode 100644 src/Card/CardHeader.js delete mode 100644 src/Card/CardMedia.js delete mode 100644 src/Card/CardText.js delete mode 100644 src/Card/CardTitle.js delete mode 100644 src/Card/index.js delete mode 100644 src/Checkbox/Checkbox.js delete mode 100644 src/Checkbox/Checkbox.spec.js delete mode 100644 src/Checkbox/index.js delete mode 100644 src/Chip/Chip.js delete mode 100644 src/Chip/Chip.spec.js delete mode 100644 src/Chip/index.js delete mode 100644 src/CircularProgress/CircularProgress.js delete mode 100644 src/CircularProgress/index.js delete mode 100644 src/DatePicker/Calendar.js delete mode 100644 src/DatePicker/Calendar.spec.js delete mode 100644 src/DatePicker/CalendarActionButtons.js delete mode 100644 src/DatePicker/CalendarMonth.js delete mode 100644 src/DatePicker/CalendarToolbar.js delete mode 100644 src/DatePicker/CalendarYear.js delete mode 100644 src/DatePicker/CalendarYear.spec.js delete mode 100644 src/DatePicker/DateDisplay.js delete mode 100644 src/DatePicker/DateDisplay.spec.js delete mode 100644 src/DatePicker/DatePicker.js delete mode 100644 src/DatePicker/DatePicker.spec.js delete mode 100644 src/DatePicker/DatePickerDialog.js delete mode 100644 src/DatePicker/DayButton.js delete mode 100644 src/DatePicker/DayButton.spec.js delete mode 100644 src/DatePicker/YearButton.js delete mode 100644 src/DatePicker/dateUtils.js delete mode 100644 src/DatePicker/index.js delete mode 100644 src/Dialog/Dialog.js delete mode 100644 src/Dialog/Dialog.spec.js delete mode 100644 src/Dialog/index.js delete mode 100644 src/Divider/Divider.js delete mode 100644 src/Divider/Divider.spec.js delete mode 100644 src/Divider/index.js delete mode 100644 src/Drawer/Drawer.js delete mode 100644 src/Drawer/Drawer.spec.js delete mode 100644 src/Drawer/index.js delete mode 100644 src/DropDownMenu/DropDownMenu.js delete mode 100644 src/DropDownMenu/DropDownMenu.spec.js delete mode 100644 src/DropDownMenu/index.js delete mode 100644 src/FlatButton/FlatButton.js delete mode 100644 src/FlatButton/FlatButton.spec.js delete mode 100644 src/FlatButton/FlatButtonLabel.js delete mode 100644 src/FlatButton/index.js delete mode 100644 src/FloatingActionButton/FloatingActionButton.js delete mode 100644 src/FloatingActionButton/FloatingActionButton.spec.js delete mode 100644 src/FloatingActionButton/index.js delete mode 100644 src/FontIcon/FontIcon.js delete mode 100644 src/FontIcon/FontIcon.spec.js delete mode 100644 src/FontIcon/index.js delete mode 100644 src/GridList/GridList.js delete mode 100644 src/GridList/GridList.spec.js delete mode 100644 src/GridList/GridTile.js delete mode 100644 src/GridList/GridTile.spec.js delete mode 100644 src/GridList/index.js delete mode 100644 src/IconButton/IconButton.js delete mode 100644 src/IconButton/IconButton.spec.js delete mode 100644 src/IconButton/index.js delete mode 100644 src/IconMenu/IconMenu.js delete mode 100644 src/IconMenu/IconMenu.spec.js delete mode 100644 src/IconMenu/index.js delete mode 100644 src/LinearProgress/LinearProgress.js delete mode 100644 src/LinearProgress/LinearProgress.spec.js delete mode 100644 src/LinearProgress/index.js delete mode 100644 src/List/List.js delete mode 100644 src/List/ListItem.js delete mode 100644 src/List/ListItem.spec.js delete mode 100644 src/List/NestedList.js delete mode 100644 src/List/NestedList.spec.js delete mode 100644 src/List/index.js delete mode 100644 src/List/makeSelectable.js delete mode 100644 src/Menu/Menu.js delete mode 100644 src/Menu/Menu.spec.js delete mode 100644 src/Menu/index.js delete mode 100644 src/Menu/menuUtils.js delete mode 100644 src/Menu/menuUtils.spec.js delete mode 100644 src/MenuItem/MenuItem.js delete mode 100644 src/MenuItem/MenuItem.spec.js delete mode 100644 src/MenuItem/index.js delete mode 100644 src/Paper/Paper.js delete mode 100644 src/Paper/Paper.spec.js delete mode 100644 src/Paper/index.js delete mode 100644 src/Popover/Popover.js delete mode 100644 src/Popover/Popover.spec.js delete mode 100644 src/Popover/PopoverAnimationDefault.js delete mode 100644 src/Popover/PopoverAnimationVertical.js delete mode 100644 src/Popover/index.js delete mode 100644 src/RadioButton/RadioButton.js delete mode 100644 src/RadioButton/RadioButtonGroup.js delete mode 100644 src/RadioButton/RadioButtonGroup.spec.js delete mode 100644 src/RadioButton/index.js delete mode 100644 src/RaisedButton/RaisedButton.js delete mode 100644 src/RaisedButton/RaisedButton.spec.js delete mode 100644 src/RaisedButton/index.js delete mode 100644 src/RefreshIndicator/RefreshIndicator.js delete mode 100644 src/RefreshIndicator/index.js delete mode 100644 src/SelectField/SelectField.js delete mode 100644 src/SelectField/SelectField.spec.js delete mode 100644 src/SelectField/index.js delete mode 100644 src/Slider/Slider.js delete mode 100644 src/Slider/Slider.spec.js delete mode 100644 src/Slider/index.js delete mode 100644 src/Snackbar/Snackbar.js delete mode 100644 src/Snackbar/Snackbar.spec.js delete mode 100644 src/Snackbar/SnackbarBody.js delete mode 100644 src/Snackbar/SnackbarBody.spec.js delete mode 100644 src/Snackbar/index.js delete mode 100644 src/Stepper/Step.js delete mode 100644 src/Stepper/Step.spec.js delete mode 100644 src/Stepper/StepButton.js delete mode 100644 src/Stepper/StepButton.spec.js delete mode 100644 src/Stepper/StepConnector.js delete mode 100644 src/Stepper/StepConnector.spec.js delete mode 100644 src/Stepper/StepContent.js delete mode 100644 src/Stepper/StepContent.spec.js delete mode 100644 src/Stepper/StepLabel.js delete mode 100644 src/Stepper/StepLabel.spec.js delete mode 100644 src/Stepper/Stepper.js delete mode 100644 src/Stepper/Stepper.spec.js delete mode 100644 src/Stepper/index.js delete mode 100644 src/Subheader/Subheader.js delete mode 100644 src/Subheader/index.js delete mode 100644 src/SvgIcon/SvgIcon.js delete mode 100644 src/SvgIcon/SvgIcon.spec.js delete mode 100644 src/SvgIcon/index.js delete mode 100644 src/Table/Table.js delete mode 100644 src/Table/TableBody.js delete mode 100644 src/Table/TableFooter.js delete mode 100644 src/Table/TableHeader.js delete mode 100644 src/Table/TableHeaderColumn.js delete mode 100644 src/Table/TableRow.js delete mode 100644 src/Table/TableRowColumn.js delete mode 100644 src/Table/index.js delete mode 100644 src/Tabs/InkBar.js delete mode 100644 src/Tabs/Tab.js delete mode 100644 src/Tabs/TabTemplate.js delete mode 100644 src/Tabs/TabTemplate.spec.js delete mode 100644 src/Tabs/Tabs.js delete mode 100644 src/Tabs/Tabs.spec.js delete mode 100644 src/Tabs/index.js delete mode 100644 src/TextField/EnhancedTextarea.js delete mode 100644 src/TextField/EnhancedTextarea.spec.js delete mode 100644 src/TextField/TextField.js delete mode 100644 src/TextField/TextField.spec.js delete mode 100644 src/TextField/TextFieldHint.js delete mode 100644 src/TextField/TextFieldLabel.js delete mode 100644 src/TextField/TextFieldLabel.spec.js delete mode 100644 src/TextField/TextFieldUnderline.js delete mode 100644 src/TextField/index.js delete mode 100644 src/TimePicker/Clock.js delete mode 100644 src/TimePicker/ClockHours.js delete mode 100644 src/TimePicker/ClockMinutes.js delete mode 100644 src/TimePicker/ClockMinutes.spec.js delete mode 100644 src/TimePicker/ClockNumber.js delete mode 100644 src/TimePicker/ClockPointer.js delete mode 100644 src/TimePicker/TimeDisplay.js delete mode 100644 src/TimePicker/TimePicker.js delete mode 100644 src/TimePicker/TimePicker.spec.js delete mode 100644 src/TimePicker/TimePickerDialog.js delete mode 100644 src/TimePicker/TimePickerDialog.spec.js delete mode 100644 src/TimePicker/index.js delete mode 100644 src/TimePicker/timeUtils.js delete mode 100644 src/Toggle/Toggle.js delete mode 100644 src/Toggle/index.js delete mode 100644 src/Toolbar/Toolbar.js delete mode 100644 src/Toolbar/ToolbarGroup.js delete mode 100644 src/Toolbar/ToolbarSeparator.js delete mode 100644 src/Toolbar/ToolbarTitle.js delete mode 100644 src/Toolbar/index.js delete mode 100644 src/index.js delete mode 100644 src/index.spec.js delete mode 100644 src/internal/AppCanvas.js delete mode 100644 src/internal/AutoLockScrolling.js delete mode 100644 src/internal/BeforeAfterWrapper.js delete mode 100644 src/internal/CircleRipple.js delete mode 100644 src/internal/ClearFix.js delete mode 100644 src/internal/ClickAwayListener.js delete mode 100644 src/internal/EnhancedButton.js delete mode 100644 src/internal/EnhancedButton.spec.js delete mode 100644 src/internal/EnhancedSwitch.js delete mode 100644 src/internal/ExpandTransition.js delete mode 100644 src/internal/ExpandTransitionChild.js delete mode 100644 src/internal/FocusRipple.js delete mode 100644 src/internal/Overlay.js delete mode 100644 src/internal/RenderToLayer.js delete mode 100644 src/internal/ScaleIn.js delete mode 100644 src/internal/ScaleInChild.js delete mode 100644 src/internal/SlideIn.js delete mode 100644 src/internal/SlideInChild.js delete mode 100644 src/internal/Tooltip.js delete mode 100644 src/internal/TouchRipple.js delete mode 100644 src/styles/MuiThemeProvider.js delete mode 100644 src/styles/baseThemes/darkBaseTheme.js delete mode 100644 src/styles/baseThemes/lightBaseTheme.js delete mode 100644 src/styles/colors.js delete mode 100644 src/styles/getMuiTheme.js delete mode 100644 src/styles/getMuiTheme.spec.js delete mode 100644 src/styles/index.js delete mode 100644 src/styles/muiThemeable.js delete mode 100644 src/styles/spacing.js delete mode 100644 src/styles/transitions.js delete mode 100644 src/styles/typography.js delete mode 100644 src/styles/zIndex.js delete mode 100644 src/svg-icons/action/accessibility.js delete mode 100644 src/svg-icons/action/accessible.js delete mode 100644 src/svg-icons/action/account-balance-wallet.js delete mode 100644 src/svg-icons/action/account-balance.js delete mode 100644 src/svg-icons/action/account-box.js delete mode 100644 src/svg-icons/action/account-circle.js delete mode 100644 src/svg-icons/action/add-shopping-cart.js delete mode 100644 src/svg-icons/action/alarm-add.js delete mode 100644 src/svg-icons/action/alarm-off.js delete mode 100644 src/svg-icons/action/alarm-on.js delete mode 100644 src/svg-icons/action/alarm.js delete mode 100644 src/svg-icons/action/all-out.js delete mode 100644 src/svg-icons/action/android.js delete mode 100644 src/svg-icons/action/announcement.js delete mode 100644 src/svg-icons/action/aspect-ratio.js delete mode 100644 src/svg-icons/action/assessment.js delete mode 100644 src/svg-icons/action/assignment-ind.js delete mode 100644 src/svg-icons/action/assignment-late.js delete mode 100644 src/svg-icons/action/assignment-return.js delete mode 100644 src/svg-icons/action/assignment-returned.js delete mode 100644 src/svg-icons/action/assignment-turned-in.js delete mode 100644 src/svg-icons/action/assignment.js delete mode 100644 src/svg-icons/action/autorenew.js delete mode 100644 src/svg-icons/action/backup.js delete mode 100644 src/svg-icons/action/book.js delete mode 100644 src/svg-icons/action/bookmark-border.js delete mode 100644 src/svg-icons/action/bookmark.js delete mode 100644 src/svg-icons/action/bug-report.js delete mode 100644 src/svg-icons/action/build.js delete mode 100644 src/svg-icons/action/cached.js delete mode 100644 src/svg-icons/action/camera-enhance.js delete mode 100644 src/svg-icons/action/card-giftcard.js delete mode 100644 src/svg-icons/action/card-membership.js delete mode 100644 src/svg-icons/action/card-travel.js delete mode 100644 src/svg-icons/action/change-history.js delete mode 100644 src/svg-icons/action/check-circle.js delete mode 100644 src/svg-icons/action/chrome-reader-mode.js delete mode 100644 src/svg-icons/action/class.js delete mode 100644 src/svg-icons/action/code.js delete mode 100644 src/svg-icons/action/compare-arrows.js delete mode 100644 src/svg-icons/action/copyright.js delete mode 100644 src/svg-icons/action/credit-card.js delete mode 100644 src/svg-icons/action/dashboard.js delete mode 100644 src/svg-icons/action/date-range.js delete mode 100644 src/svg-icons/action/delete-forever.js delete mode 100644 src/svg-icons/action/delete.js delete mode 100644 src/svg-icons/action/description.js delete mode 100644 src/svg-icons/action/dns.js delete mode 100644 src/svg-icons/action/done-all.js delete mode 100644 src/svg-icons/action/done.js delete mode 100644 src/svg-icons/action/donut-large.js delete mode 100644 src/svg-icons/action/donut-small.js delete mode 100644 src/svg-icons/action/eject.js delete mode 100644 src/svg-icons/action/euro-symbol.js delete mode 100644 src/svg-icons/action/event-seat.js delete mode 100644 src/svg-icons/action/event.js delete mode 100644 src/svg-icons/action/exit-to-app.js delete mode 100644 src/svg-icons/action/explore.js delete mode 100644 src/svg-icons/action/extension.js delete mode 100644 src/svg-icons/action/face.js delete mode 100644 src/svg-icons/action/favorite-border.js delete mode 100644 src/svg-icons/action/favorite.js delete mode 100644 src/svg-icons/action/feedback.js delete mode 100644 src/svg-icons/action/find-in-page.js delete mode 100644 src/svg-icons/action/find-replace.js delete mode 100644 src/svg-icons/action/fingerprint.js delete mode 100644 src/svg-icons/action/flight-land.js delete mode 100644 src/svg-icons/action/flight-takeoff.js delete mode 100644 src/svg-icons/action/flip-to-back.js delete mode 100644 src/svg-icons/action/flip-to-front.js delete mode 100644 src/svg-icons/action/g-translate.js delete mode 100644 src/svg-icons/action/gavel.js delete mode 100644 src/svg-icons/action/get-app.js delete mode 100644 src/svg-icons/action/gif.js delete mode 100644 src/svg-icons/action/grade.js delete mode 100644 src/svg-icons/action/group-work.js delete mode 100644 src/svg-icons/action/help-outline.js delete mode 100644 src/svg-icons/action/help.js delete mode 100644 src/svg-icons/action/highlight-off.js delete mode 100644 src/svg-icons/action/history.js delete mode 100644 src/svg-icons/action/home.js delete mode 100644 src/svg-icons/action/hourglass-empty.js delete mode 100644 src/svg-icons/action/hourglass-full.js delete mode 100644 src/svg-icons/action/http.js delete mode 100644 src/svg-icons/action/https.js delete mode 100644 src/svg-icons/action/important-devices.js delete mode 100644 src/svg-icons/action/info-outline.js delete mode 100644 src/svg-icons/action/info.js delete mode 100644 src/svg-icons/action/input.js delete mode 100644 src/svg-icons/action/invert-colors.js delete mode 100644 src/svg-icons/action/label-outline.js delete mode 100644 src/svg-icons/action/label.js delete mode 100644 src/svg-icons/action/language.js delete mode 100644 src/svg-icons/action/launch.js delete mode 100644 src/svg-icons/action/lightbulb-outline.js delete mode 100644 src/svg-icons/action/line-style.js delete mode 100644 src/svg-icons/action/line-weight.js delete mode 100644 src/svg-icons/action/list.js delete mode 100644 src/svg-icons/action/lock-open.js delete mode 100644 src/svg-icons/action/lock-outline.js delete mode 100644 src/svg-icons/action/lock.js delete mode 100644 src/svg-icons/action/loyalty.js delete mode 100644 src/svg-icons/action/markunread-mailbox.js delete mode 100644 src/svg-icons/action/motorcycle.js delete mode 100644 src/svg-icons/action/note-add.js delete mode 100644 src/svg-icons/action/offline-pin.js delete mode 100644 src/svg-icons/action/opacity.js delete mode 100644 src/svg-icons/action/open-in-browser.js delete mode 100644 src/svg-icons/action/open-in-new.js delete mode 100644 src/svg-icons/action/open-with.js delete mode 100644 src/svg-icons/action/pageview.js delete mode 100644 src/svg-icons/action/pan-tool.js delete mode 100644 src/svg-icons/action/payment.js delete mode 100644 src/svg-icons/action/perm-camera-mic.js delete mode 100644 src/svg-icons/action/perm-contact-calendar.js delete mode 100644 src/svg-icons/action/perm-data-setting.js delete mode 100644 src/svg-icons/action/perm-device-information.js delete mode 100644 src/svg-icons/action/perm-identity.js delete mode 100644 src/svg-icons/action/perm-media.js delete mode 100644 src/svg-icons/action/perm-phone-msg.js delete mode 100644 src/svg-icons/action/perm-scan-wifi.js delete mode 100644 src/svg-icons/action/pets.js delete mode 100644 src/svg-icons/action/picture-in-picture-alt.js delete mode 100644 src/svg-icons/action/picture-in-picture.js delete mode 100644 src/svg-icons/action/play-for-work.js delete mode 100644 src/svg-icons/action/polymer.js delete mode 100644 src/svg-icons/action/power-settings-new.js delete mode 100644 src/svg-icons/action/pregnant-woman.js delete mode 100644 src/svg-icons/action/print.js delete mode 100644 src/svg-icons/action/query-builder.js delete mode 100644 src/svg-icons/action/question-answer.js delete mode 100644 src/svg-icons/action/receipt.js delete mode 100644 src/svg-icons/action/record-voice-over.js delete mode 100644 src/svg-icons/action/redeem.js delete mode 100644 src/svg-icons/action/remove-shopping-cart.js delete mode 100644 src/svg-icons/action/reorder.js delete mode 100644 src/svg-icons/action/report-problem.js delete mode 100644 src/svg-icons/action/restore-page.js delete mode 100644 src/svg-icons/action/restore.js delete mode 100644 src/svg-icons/action/room.js delete mode 100644 src/svg-icons/action/rounded-corner.js delete mode 100644 src/svg-icons/action/rowing.js delete mode 100644 src/svg-icons/action/schedule.js delete mode 100644 src/svg-icons/action/search.js delete mode 100644 src/svg-icons/action/settings-applications.js delete mode 100644 src/svg-icons/action/settings-backup-restore.js delete mode 100644 src/svg-icons/action/settings-bluetooth.js delete mode 100644 src/svg-icons/action/settings-brightness.js delete mode 100644 src/svg-icons/action/settings-cell.js delete mode 100644 src/svg-icons/action/settings-ethernet.js delete mode 100644 src/svg-icons/action/settings-input-antenna.js delete mode 100644 src/svg-icons/action/settings-input-component.js delete mode 100644 src/svg-icons/action/settings-input-composite.js delete mode 100644 src/svg-icons/action/settings-input-hdmi.js delete mode 100644 src/svg-icons/action/settings-input-svideo.js delete mode 100644 src/svg-icons/action/settings-overscan.js delete mode 100644 src/svg-icons/action/settings-phone.js delete mode 100644 src/svg-icons/action/settings-power.js delete mode 100644 src/svg-icons/action/settings-remote.js delete mode 100644 src/svg-icons/action/settings-voice.js delete mode 100644 src/svg-icons/action/settings.js delete mode 100644 src/svg-icons/action/shop-two.js delete mode 100644 src/svg-icons/action/shop.js delete mode 100644 src/svg-icons/action/shopping-basket.js delete mode 100644 src/svg-icons/action/shopping-cart.js delete mode 100644 src/svg-icons/action/speaker-notes-off.js delete mode 100644 src/svg-icons/action/speaker-notes.js delete mode 100644 src/svg-icons/action/spellcheck.js delete mode 100644 src/svg-icons/action/stars.js delete mode 100644 src/svg-icons/action/store.js delete mode 100644 src/svg-icons/action/subject.js delete mode 100644 src/svg-icons/action/supervisor-account.js delete mode 100644 src/svg-icons/action/swap-horiz.js delete mode 100644 src/svg-icons/action/swap-vert.js delete mode 100644 src/svg-icons/action/swap-vertical-circle.js delete mode 100644 src/svg-icons/action/system-update-alt.js delete mode 100644 src/svg-icons/action/tab-unselected.js delete mode 100644 src/svg-icons/action/tab.js delete mode 100644 src/svg-icons/action/theaters.js delete mode 100644 src/svg-icons/action/three-d-rotation.js delete mode 100644 src/svg-icons/action/thumb-down.js delete mode 100644 src/svg-icons/action/thumb-up.js delete mode 100644 src/svg-icons/action/thumbs-up-down.js delete mode 100644 src/svg-icons/action/timeline.js delete mode 100644 src/svg-icons/action/toc.js delete mode 100644 src/svg-icons/action/today.js delete mode 100644 src/svg-icons/action/toll.js delete mode 100644 src/svg-icons/action/touch-app.js delete mode 100644 src/svg-icons/action/track-changes.js delete mode 100644 src/svg-icons/action/translate.js delete mode 100644 src/svg-icons/action/trending-down.js delete mode 100644 src/svg-icons/action/trending-flat.js delete mode 100644 src/svg-icons/action/trending-up.js delete mode 100644 src/svg-icons/action/turned-in-not.js delete mode 100644 src/svg-icons/action/turned-in.js delete mode 100644 src/svg-icons/action/update.js delete mode 100644 src/svg-icons/action/verified-user.js delete mode 100644 src/svg-icons/action/view-agenda.js delete mode 100644 src/svg-icons/action/view-array.js delete mode 100644 src/svg-icons/action/view-carousel.js delete mode 100644 src/svg-icons/action/view-column.js delete mode 100644 src/svg-icons/action/view-day.js delete mode 100644 src/svg-icons/action/view-headline.js delete mode 100644 src/svg-icons/action/view-list.js delete mode 100644 src/svg-icons/action/view-module.js delete mode 100644 src/svg-icons/action/view-quilt.js delete mode 100644 src/svg-icons/action/view-stream.js delete mode 100644 src/svg-icons/action/view-week.js delete mode 100644 src/svg-icons/action/visibility-off.js delete mode 100644 src/svg-icons/action/visibility.js delete mode 100644 src/svg-icons/action/watch-later.js delete mode 100644 src/svg-icons/action/work.js delete mode 100644 src/svg-icons/action/youtube-searched-for.js delete mode 100644 src/svg-icons/action/zoom-in.js delete mode 100644 src/svg-icons/action/zoom-out.js delete mode 100644 src/svg-icons/alert/add-alert.js delete mode 100644 src/svg-icons/alert/error-outline.js delete mode 100644 src/svg-icons/alert/error.js delete mode 100644 src/svg-icons/alert/warning.js delete mode 100644 src/svg-icons/av/add-to-queue.js delete mode 100644 src/svg-icons/av/airplay.js delete mode 100644 src/svg-icons/av/album.js delete mode 100644 src/svg-icons/av/art-track.js delete mode 100644 src/svg-icons/av/av-timer.js delete mode 100644 src/svg-icons/av/branding-watermark.js delete mode 100644 src/svg-icons/av/call-to-action.js delete mode 100644 src/svg-icons/av/closed-caption.js delete mode 100644 src/svg-icons/av/equalizer.js delete mode 100644 src/svg-icons/av/explicit.js delete mode 100644 src/svg-icons/av/fast-forward.js delete mode 100644 src/svg-icons/av/fast-rewind.js delete mode 100644 src/svg-icons/av/featured-play-list.js delete mode 100644 src/svg-icons/av/featured-video.js delete mode 100644 src/svg-icons/av/fiber-dvr.js delete mode 100644 src/svg-icons/av/fiber-manual-record.js delete mode 100644 src/svg-icons/av/fiber-new.js delete mode 100644 src/svg-icons/av/fiber-pin.js delete mode 100644 src/svg-icons/av/fiber-smart-record.js delete mode 100644 src/svg-icons/av/forward-10.js delete mode 100644 src/svg-icons/av/forward-30.js delete mode 100644 src/svg-icons/av/forward-5.js delete mode 100644 src/svg-icons/av/games.js delete mode 100644 src/svg-icons/av/hd.js delete mode 100644 src/svg-icons/av/hearing.js delete mode 100644 src/svg-icons/av/high-quality.js delete mode 100644 src/svg-icons/av/library-add.js delete mode 100644 src/svg-icons/av/library-books.js delete mode 100644 src/svg-icons/av/library-music.js delete mode 100644 src/svg-icons/av/loop.js delete mode 100644 src/svg-icons/av/mic-none.js delete mode 100644 src/svg-icons/av/mic-off.js delete mode 100644 src/svg-icons/av/mic.js delete mode 100644 src/svg-icons/av/movie.js delete mode 100644 src/svg-icons/av/music-video.js delete mode 100644 src/svg-icons/av/new-releases.js delete mode 100644 src/svg-icons/av/not-interested.js delete mode 100644 src/svg-icons/av/note.js delete mode 100644 src/svg-icons/av/pause-circle-filled.js delete mode 100644 src/svg-icons/av/pause-circle-outline.js delete mode 100644 src/svg-icons/av/pause.js delete mode 100644 src/svg-icons/av/play-arrow.js delete mode 100644 src/svg-icons/av/play-circle-filled.js delete mode 100644 src/svg-icons/av/play-circle-outline.js delete mode 100644 src/svg-icons/av/playlist-add-check.js delete mode 100644 src/svg-icons/av/playlist-add.js delete mode 100644 src/svg-icons/av/playlist-play.js delete mode 100644 src/svg-icons/av/queue-music.js delete mode 100644 src/svg-icons/av/queue-play-next.js delete mode 100644 src/svg-icons/av/queue.js delete mode 100644 src/svg-icons/av/radio.js delete mode 100644 src/svg-icons/av/recent-actors.js delete mode 100644 src/svg-icons/av/remove-from-queue.js delete mode 100644 src/svg-icons/av/repeat-one.js delete mode 100644 src/svg-icons/av/repeat.js delete mode 100644 src/svg-icons/av/replay-10.js delete mode 100644 src/svg-icons/av/replay-30.js delete mode 100644 src/svg-icons/av/replay-5.js delete mode 100644 src/svg-icons/av/replay.js delete mode 100644 src/svg-icons/av/shuffle.js delete mode 100644 src/svg-icons/av/skip-next.js delete mode 100644 src/svg-icons/av/skip-previous.js delete mode 100644 src/svg-icons/av/slow-motion-video.js delete mode 100644 src/svg-icons/av/snooze.js delete mode 100644 src/svg-icons/av/sort-by-alpha.js delete mode 100644 src/svg-icons/av/stop.js delete mode 100644 src/svg-icons/av/subscriptions.js delete mode 100644 src/svg-icons/av/subtitles.js delete mode 100644 src/svg-icons/av/surround-sound.js delete mode 100644 src/svg-icons/av/video-call.js delete mode 100644 src/svg-icons/av/video-label.js delete mode 100644 src/svg-icons/av/video-library.js delete mode 100644 src/svg-icons/av/videocam-off.js delete mode 100644 src/svg-icons/av/videocam.js delete mode 100644 src/svg-icons/av/volume-down.js delete mode 100644 src/svg-icons/av/volume-mute.js delete mode 100644 src/svg-icons/av/volume-off.js delete mode 100644 src/svg-icons/av/volume-up.js delete mode 100644 src/svg-icons/av/web-asset.js delete mode 100644 src/svg-icons/av/web.js delete mode 100644 src/svg-icons/communication/business.js delete mode 100644 src/svg-icons/communication/call-end.js delete mode 100644 src/svg-icons/communication/call-made.js delete mode 100644 src/svg-icons/communication/call-merge.js delete mode 100644 src/svg-icons/communication/call-missed-outgoing.js delete mode 100644 src/svg-icons/communication/call-missed.js delete mode 100644 src/svg-icons/communication/call-received.js delete mode 100644 src/svg-icons/communication/call-split.js delete mode 100644 src/svg-icons/communication/call.js delete mode 100644 src/svg-icons/communication/chat-bubble-outline.js delete mode 100644 src/svg-icons/communication/chat-bubble.js delete mode 100644 src/svg-icons/communication/chat.js delete mode 100644 src/svg-icons/communication/clear-all.js delete mode 100644 src/svg-icons/communication/comment.js delete mode 100644 src/svg-icons/communication/contact-mail.js delete mode 100644 src/svg-icons/communication/contact-phone.js delete mode 100644 src/svg-icons/communication/contacts.js delete mode 100644 src/svg-icons/communication/dialer-sip.js delete mode 100644 src/svg-icons/communication/dialpad.js delete mode 100644 src/svg-icons/communication/email.js delete mode 100644 src/svg-icons/communication/forum.js delete mode 100644 src/svg-icons/communication/import-contacts.js delete mode 100644 src/svg-icons/communication/import-export.js delete mode 100644 src/svg-icons/communication/invert-colors-off.js delete mode 100644 src/svg-icons/communication/live-help.js delete mode 100644 src/svg-icons/communication/location-off.js delete mode 100644 src/svg-icons/communication/location-on.js delete mode 100644 src/svg-icons/communication/mail-outline.js delete mode 100644 src/svg-icons/communication/message.js delete mode 100644 src/svg-icons/communication/no-sim.js delete mode 100644 src/svg-icons/communication/phone.js delete mode 100644 src/svg-icons/communication/phonelink-erase.js delete mode 100644 src/svg-icons/communication/phonelink-lock.js delete mode 100644 src/svg-icons/communication/phonelink-ring.js delete mode 100644 src/svg-icons/communication/phonelink-setup.js delete mode 100644 src/svg-icons/communication/portable-wifi-off.js delete mode 100644 src/svg-icons/communication/present-to-all.js delete mode 100644 src/svg-icons/communication/ring-volume.js delete mode 100644 src/svg-icons/communication/rss-feed.js delete mode 100644 src/svg-icons/communication/screen-share.js delete mode 100644 src/svg-icons/communication/speaker-phone.js delete mode 100644 src/svg-icons/communication/stay-current-landscape.js delete mode 100644 src/svg-icons/communication/stay-current-portrait.js delete mode 100644 src/svg-icons/communication/stay-primary-landscape.js delete mode 100644 src/svg-icons/communication/stay-primary-portrait.js delete mode 100644 src/svg-icons/communication/stop-screen-share.js delete mode 100644 src/svg-icons/communication/swap-calls.js delete mode 100644 src/svg-icons/communication/textsms.js delete mode 100644 src/svg-icons/communication/voicemail.js delete mode 100644 src/svg-icons/communication/vpn-key.js delete mode 100644 src/svg-icons/content/add-box.js delete mode 100644 src/svg-icons/content/add-circle-outline.js delete mode 100644 src/svg-icons/content/add-circle.js delete mode 100644 src/svg-icons/content/add.js delete mode 100644 src/svg-icons/content/archive.js delete mode 100644 src/svg-icons/content/backspace.js delete mode 100644 src/svg-icons/content/block.js delete mode 100644 src/svg-icons/content/clear.js delete mode 100644 src/svg-icons/content/content-copy.js delete mode 100644 src/svg-icons/content/content-cut.js delete mode 100644 src/svg-icons/content/content-paste.js delete mode 100644 src/svg-icons/content/create.js delete mode 100644 src/svg-icons/content/delete-sweep.js delete mode 100644 src/svg-icons/content/drafts.js delete mode 100644 src/svg-icons/content/filter-list.js delete mode 100644 src/svg-icons/content/flag.js delete mode 100644 src/svg-icons/content/font-download.js delete mode 100644 src/svg-icons/content/forward.js delete mode 100644 src/svg-icons/content/gesture.js delete mode 100644 src/svg-icons/content/inbox.js delete mode 100644 src/svg-icons/content/link.js delete mode 100644 src/svg-icons/content/low-priority.js delete mode 100644 src/svg-icons/content/mail.js delete mode 100644 src/svg-icons/content/markunread.js delete mode 100644 src/svg-icons/content/move-to-inbox.js delete mode 100644 src/svg-icons/content/next-week.js delete mode 100644 src/svg-icons/content/redo.js delete mode 100644 src/svg-icons/content/remove-circle-outline.js delete mode 100644 src/svg-icons/content/remove-circle.js delete mode 100644 src/svg-icons/content/remove.js delete mode 100644 src/svg-icons/content/reply-all.js delete mode 100644 src/svg-icons/content/reply.js delete mode 100644 src/svg-icons/content/report.js delete mode 100644 src/svg-icons/content/save.js delete mode 100644 src/svg-icons/content/select-all.js delete mode 100644 src/svg-icons/content/send.js delete mode 100644 src/svg-icons/content/sort.js delete mode 100644 src/svg-icons/content/text-format.js delete mode 100644 src/svg-icons/content/unarchive.js delete mode 100644 src/svg-icons/content/undo.js delete mode 100644 src/svg-icons/content/weekend.js delete mode 100644 src/svg-icons/device/access-alarm.js delete mode 100644 src/svg-icons/device/access-alarms.js delete mode 100644 src/svg-icons/device/access-time.js delete mode 100644 src/svg-icons/device/add-alarm.js delete mode 100644 src/svg-icons/device/airplanemode-active.js delete mode 100644 src/svg-icons/device/airplanemode-inactive.js delete mode 100644 src/svg-icons/device/battery-20.js delete mode 100644 src/svg-icons/device/battery-30.js delete mode 100644 src/svg-icons/device/battery-50.js delete mode 100644 src/svg-icons/device/battery-60.js delete mode 100644 src/svg-icons/device/battery-80.js delete mode 100644 src/svg-icons/device/battery-90.js delete mode 100644 src/svg-icons/device/battery-alert.js delete mode 100644 src/svg-icons/device/battery-charging-20.js delete mode 100644 src/svg-icons/device/battery-charging-30.js delete mode 100644 src/svg-icons/device/battery-charging-50.js delete mode 100644 src/svg-icons/device/battery-charging-60.js delete mode 100644 src/svg-icons/device/battery-charging-80.js delete mode 100644 src/svg-icons/device/battery-charging-90.js delete mode 100644 src/svg-icons/device/battery-charging-full.js delete mode 100644 src/svg-icons/device/battery-full.js delete mode 100644 src/svg-icons/device/battery-std.js delete mode 100644 src/svg-icons/device/battery-unknown.js delete mode 100644 src/svg-icons/device/bluetooth-connected.js delete mode 100644 src/svg-icons/device/bluetooth-disabled.js delete mode 100644 src/svg-icons/device/bluetooth-searching.js delete mode 100644 src/svg-icons/device/bluetooth.js delete mode 100644 src/svg-icons/device/brightness-auto.js delete mode 100644 src/svg-icons/device/brightness-high.js delete mode 100644 src/svg-icons/device/brightness-low.js delete mode 100644 src/svg-icons/device/brightness-medium.js delete mode 100644 src/svg-icons/device/data-usage.js delete mode 100644 src/svg-icons/device/developer-mode.js delete mode 100644 src/svg-icons/device/devices.js delete mode 100644 src/svg-icons/device/dvr.js delete mode 100644 src/svg-icons/device/gps-fixed.js delete mode 100644 src/svg-icons/device/gps-not-fixed.js delete mode 100644 src/svg-icons/device/gps-off.js delete mode 100644 src/svg-icons/device/graphic-eq.js delete mode 100644 src/svg-icons/device/location-disabled.js delete mode 100644 src/svg-icons/device/location-searching.js delete mode 100644 src/svg-icons/device/network-cell.js delete mode 100644 src/svg-icons/device/network-wifi.js delete mode 100644 src/svg-icons/device/nfc.js delete mode 100644 src/svg-icons/device/screen-lock-landscape.js delete mode 100644 src/svg-icons/device/screen-lock-portrait.js delete mode 100644 src/svg-icons/device/screen-lock-rotation.js delete mode 100644 src/svg-icons/device/screen-rotation.js delete mode 100644 src/svg-icons/device/sd-storage.js delete mode 100644 src/svg-icons/device/settings-system-daydream.js delete mode 100644 src/svg-icons/device/signal-cellular-0-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-1-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-2-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-3-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-4-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-connected-no-internet-0-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-connected-no-internet-1-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-connected-no-internet-2-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-connected-no-internet-3-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-connected-no-internet-4-bar.js delete mode 100644 src/svg-icons/device/signal-cellular-no-sim.js delete mode 100644 src/svg-icons/device/signal-cellular-null.js delete mode 100644 src/svg-icons/device/signal-cellular-off.js delete mode 100644 src/svg-icons/device/signal-wifi-0-bar.js delete mode 100644 src/svg-icons/device/signal-wifi-1-bar-lock.js delete mode 100644 src/svg-icons/device/signal-wifi-1-bar.js delete mode 100644 src/svg-icons/device/signal-wifi-2-bar-lock.js delete mode 100644 src/svg-icons/device/signal-wifi-2-bar.js delete mode 100644 src/svg-icons/device/signal-wifi-3-bar-lock.js delete mode 100644 src/svg-icons/device/signal-wifi-3-bar.js delete mode 100644 src/svg-icons/device/signal-wifi-4-bar-lock.js delete mode 100644 src/svg-icons/device/signal-wifi-4-bar.js delete mode 100644 src/svg-icons/device/signal-wifi-off.js delete mode 100644 src/svg-icons/device/storage.js delete mode 100644 src/svg-icons/device/usb.js delete mode 100644 src/svg-icons/device/wallpaper.js delete mode 100644 src/svg-icons/device/widgets.js delete mode 100644 src/svg-icons/device/wifi-lock.js delete mode 100644 src/svg-icons/device/wifi-tethering.js delete mode 100644 src/svg-icons/editor/attach-file.js delete mode 100644 src/svg-icons/editor/attach-money.js delete mode 100644 src/svg-icons/editor/border-all.js delete mode 100644 src/svg-icons/editor/border-bottom.js delete mode 100644 src/svg-icons/editor/border-clear.js delete mode 100644 src/svg-icons/editor/border-color.js delete mode 100644 src/svg-icons/editor/border-horizontal.js delete mode 100644 src/svg-icons/editor/border-inner.js delete mode 100644 src/svg-icons/editor/border-left.js delete mode 100644 src/svg-icons/editor/border-outer.js delete mode 100644 src/svg-icons/editor/border-right.js delete mode 100644 src/svg-icons/editor/border-style.js delete mode 100644 src/svg-icons/editor/border-top.js delete mode 100644 src/svg-icons/editor/border-vertical.js delete mode 100644 src/svg-icons/editor/bubble-chart.js delete mode 100644 src/svg-icons/editor/drag-handle.js delete mode 100644 src/svg-icons/editor/format-align-center.js delete mode 100644 src/svg-icons/editor/format-align-justify.js delete mode 100644 src/svg-icons/editor/format-align-left.js delete mode 100644 src/svg-icons/editor/format-align-right.js delete mode 100644 src/svg-icons/editor/format-bold.js delete mode 100644 src/svg-icons/editor/format-clear.js delete mode 100644 src/svg-icons/editor/format-color-fill.js delete mode 100644 src/svg-icons/editor/format-color-reset.js delete mode 100644 src/svg-icons/editor/format-color-text.js delete mode 100644 src/svg-icons/editor/format-indent-decrease.js delete mode 100644 src/svg-icons/editor/format-indent-increase.js delete mode 100644 src/svg-icons/editor/format-italic.js delete mode 100644 src/svg-icons/editor/format-line-spacing.js delete mode 100644 src/svg-icons/editor/format-list-bulleted.js delete mode 100644 src/svg-icons/editor/format-list-numbered.js delete mode 100644 src/svg-icons/editor/format-paint.js delete mode 100644 src/svg-icons/editor/format-quote.js delete mode 100644 src/svg-icons/editor/format-shapes.js delete mode 100644 src/svg-icons/editor/format-size.js delete mode 100644 src/svg-icons/editor/format-strikethrough.js delete mode 100644 src/svg-icons/editor/format-textdirection-l-to-r.js delete mode 100644 src/svg-icons/editor/format-textdirection-r-to-l.js delete mode 100644 src/svg-icons/editor/format-underlined.js delete mode 100644 src/svg-icons/editor/functions.js delete mode 100644 src/svg-icons/editor/highlight.js delete mode 100644 src/svg-icons/editor/insert-chart.js delete mode 100644 src/svg-icons/editor/insert-comment.js delete mode 100644 src/svg-icons/editor/insert-drive-file.js delete mode 100644 src/svg-icons/editor/insert-emoticon.js delete mode 100644 src/svg-icons/editor/insert-invitation.js delete mode 100644 src/svg-icons/editor/insert-link.js delete mode 100644 src/svg-icons/editor/insert-photo.js delete mode 100644 src/svg-icons/editor/linear-scale.js delete mode 100644 src/svg-icons/editor/merge-type.js delete mode 100644 src/svg-icons/editor/mode-comment.js delete mode 100644 src/svg-icons/editor/mode-edit.js delete mode 100644 src/svg-icons/editor/monetization-on.js delete mode 100644 src/svg-icons/editor/money-off.js delete mode 100644 src/svg-icons/editor/multiline-chart.js delete mode 100644 src/svg-icons/editor/pie-chart-outlined.js delete mode 100644 src/svg-icons/editor/pie-chart.js delete mode 100644 src/svg-icons/editor/publish.js delete mode 100644 src/svg-icons/editor/short-text.js delete mode 100644 src/svg-icons/editor/show-chart.js delete mode 100644 src/svg-icons/editor/space-bar.js delete mode 100644 src/svg-icons/editor/strikethrough-s.js delete mode 100644 src/svg-icons/editor/text-fields.js delete mode 100644 src/svg-icons/editor/title.js delete mode 100644 src/svg-icons/editor/vertical-align-bottom.js delete mode 100644 src/svg-icons/editor/vertical-align-center.js delete mode 100644 src/svg-icons/editor/vertical-align-top.js delete mode 100644 src/svg-icons/editor/wrap-text.js delete mode 100644 src/svg-icons/file/attachment.js delete mode 100644 src/svg-icons/file/cloud-circle.js delete mode 100644 src/svg-icons/file/cloud-done.js delete mode 100644 src/svg-icons/file/cloud-download.js delete mode 100644 src/svg-icons/file/cloud-off.js delete mode 100644 src/svg-icons/file/cloud-queue.js delete mode 100644 src/svg-icons/file/cloud-upload.js delete mode 100644 src/svg-icons/file/cloud.js delete mode 100644 src/svg-icons/file/create-new-folder.js delete mode 100644 src/svg-icons/file/file-download.js delete mode 100644 src/svg-icons/file/file-upload.js delete mode 100644 src/svg-icons/file/folder-open.js delete mode 100644 src/svg-icons/file/folder-shared.js delete mode 100644 src/svg-icons/file/folder.js delete mode 100644 src/svg-icons/hardware/cast-connected.js delete mode 100644 src/svg-icons/hardware/cast.js delete mode 100644 src/svg-icons/hardware/computer.js delete mode 100644 src/svg-icons/hardware/desktop-mac.js delete mode 100644 src/svg-icons/hardware/desktop-windows.js delete mode 100644 src/svg-icons/hardware/developer-board.js delete mode 100644 src/svg-icons/hardware/device-hub.js delete mode 100644 src/svg-icons/hardware/devices-other.js delete mode 100644 src/svg-icons/hardware/dock.js delete mode 100644 src/svg-icons/hardware/gamepad.js delete mode 100644 src/svg-icons/hardware/headset-mic.js delete mode 100644 src/svg-icons/hardware/headset.js delete mode 100644 src/svg-icons/hardware/keyboard-arrow-down.js delete mode 100644 src/svg-icons/hardware/keyboard-arrow-left.js delete mode 100644 src/svg-icons/hardware/keyboard-arrow-right.js delete mode 100644 src/svg-icons/hardware/keyboard-arrow-up.js delete mode 100644 src/svg-icons/hardware/keyboard-backspace.js delete mode 100644 src/svg-icons/hardware/keyboard-capslock.js delete mode 100644 src/svg-icons/hardware/keyboard-hide.js delete mode 100644 src/svg-icons/hardware/keyboard-return.js delete mode 100644 src/svg-icons/hardware/keyboard-tab.js delete mode 100644 src/svg-icons/hardware/keyboard-voice.js delete mode 100644 src/svg-icons/hardware/keyboard.js delete mode 100644 src/svg-icons/hardware/laptop-chromebook.js delete mode 100644 src/svg-icons/hardware/laptop-mac.js delete mode 100644 src/svg-icons/hardware/laptop-windows.js delete mode 100644 src/svg-icons/hardware/laptop.js delete mode 100644 src/svg-icons/hardware/memory.js delete mode 100644 src/svg-icons/hardware/mouse.js delete mode 100644 src/svg-icons/hardware/phone-android.js delete mode 100644 src/svg-icons/hardware/phone-iphone.js delete mode 100644 src/svg-icons/hardware/phonelink-off.js delete mode 100644 src/svg-icons/hardware/phonelink.js delete mode 100644 src/svg-icons/hardware/power-input.js delete mode 100644 src/svg-icons/hardware/router.js delete mode 100644 src/svg-icons/hardware/scanner.js delete mode 100644 src/svg-icons/hardware/security.js delete mode 100644 src/svg-icons/hardware/sim-card.js delete mode 100644 src/svg-icons/hardware/smartphone.js delete mode 100644 src/svg-icons/hardware/speaker-group.js delete mode 100644 src/svg-icons/hardware/speaker.js delete mode 100644 src/svg-icons/hardware/tablet-android.js delete mode 100644 src/svg-icons/hardware/tablet-mac.js delete mode 100644 src/svg-icons/hardware/tablet.js delete mode 100644 src/svg-icons/hardware/toys.js delete mode 100644 src/svg-icons/hardware/tv.js delete mode 100644 src/svg-icons/hardware/videogame-asset.js delete mode 100644 src/svg-icons/hardware/watch.js delete mode 100644 src/svg-icons/image/add-a-photo.js delete mode 100644 src/svg-icons/image/add-to-photos.js delete mode 100644 src/svg-icons/image/adjust.js delete mode 100644 src/svg-icons/image/assistant-photo.js delete mode 100644 src/svg-icons/image/assistant.js delete mode 100644 src/svg-icons/image/audiotrack.js delete mode 100644 src/svg-icons/image/blur-circular.js delete mode 100644 src/svg-icons/image/blur-linear.js delete mode 100644 src/svg-icons/image/blur-off.js delete mode 100644 src/svg-icons/image/blur-on.js delete mode 100644 src/svg-icons/image/brightness-1.js delete mode 100644 src/svg-icons/image/brightness-2.js delete mode 100644 src/svg-icons/image/brightness-3.js delete mode 100644 src/svg-icons/image/brightness-4.js delete mode 100644 src/svg-icons/image/brightness-5.js delete mode 100644 src/svg-icons/image/brightness-6.js delete mode 100644 src/svg-icons/image/brightness-7.js delete mode 100644 src/svg-icons/image/broken-image.js delete mode 100644 src/svg-icons/image/brush.js delete mode 100644 src/svg-icons/image/burst-mode.js delete mode 100644 src/svg-icons/image/camera-alt.js delete mode 100644 src/svg-icons/image/camera-front.js delete mode 100644 src/svg-icons/image/camera-rear.js delete mode 100644 src/svg-icons/image/camera-roll.js delete mode 100644 src/svg-icons/image/camera.js delete mode 100644 src/svg-icons/image/center-focus-strong.js delete mode 100644 src/svg-icons/image/center-focus-weak.js delete mode 100644 src/svg-icons/image/collections-bookmark.js delete mode 100644 src/svg-icons/image/collections.js delete mode 100644 src/svg-icons/image/color-lens.js delete mode 100644 src/svg-icons/image/colorize.js delete mode 100644 src/svg-icons/image/compare.js delete mode 100644 src/svg-icons/image/control-point-duplicate.js delete mode 100644 src/svg-icons/image/control-point.js delete mode 100644 src/svg-icons/image/crop-16-9.js delete mode 100644 src/svg-icons/image/crop-3-2.js delete mode 100644 src/svg-icons/image/crop-5-4.js delete mode 100644 src/svg-icons/image/crop-7-5.js delete mode 100644 src/svg-icons/image/crop-din.js delete mode 100644 src/svg-icons/image/crop-free.js delete mode 100644 src/svg-icons/image/crop-landscape.js delete mode 100644 src/svg-icons/image/crop-original.js delete mode 100644 src/svg-icons/image/crop-portrait.js delete mode 100644 src/svg-icons/image/crop-rotate.js delete mode 100644 src/svg-icons/image/crop-square.js delete mode 100644 src/svg-icons/image/crop.js delete mode 100644 src/svg-icons/image/dehaze.js delete mode 100644 src/svg-icons/image/details.js delete mode 100644 src/svg-icons/image/edit.js delete mode 100644 src/svg-icons/image/exposure-neg-1.js delete mode 100644 src/svg-icons/image/exposure-neg-2.js delete mode 100644 src/svg-icons/image/exposure-plus-1.js delete mode 100644 src/svg-icons/image/exposure-plus-2.js delete mode 100644 src/svg-icons/image/exposure-zero.js delete mode 100644 src/svg-icons/image/exposure.js delete mode 100644 src/svg-icons/image/filter-1.js delete mode 100644 src/svg-icons/image/filter-2.js delete mode 100644 src/svg-icons/image/filter-3.js delete mode 100644 src/svg-icons/image/filter-4.js delete mode 100644 src/svg-icons/image/filter-5.js delete mode 100644 src/svg-icons/image/filter-6.js delete mode 100644 src/svg-icons/image/filter-7.js delete mode 100644 src/svg-icons/image/filter-8.js delete mode 100644 src/svg-icons/image/filter-9-plus.js delete mode 100644 src/svg-icons/image/filter-9.js delete mode 100644 src/svg-icons/image/filter-b-and-w.js delete mode 100644 src/svg-icons/image/filter-center-focus.js delete mode 100644 src/svg-icons/image/filter-drama.js delete mode 100644 src/svg-icons/image/filter-frames.js delete mode 100644 src/svg-icons/image/filter-hdr.js delete mode 100644 src/svg-icons/image/filter-none.js delete mode 100644 src/svg-icons/image/filter-tilt-shift.js delete mode 100644 src/svg-icons/image/filter-vintage.js delete mode 100644 src/svg-icons/image/filter.js delete mode 100644 src/svg-icons/image/flare.js delete mode 100644 src/svg-icons/image/flash-auto.js delete mode 100644 src/svg-icons/image/flash-off.js delete mode 100644 src/svg-icons/image/flash-on.js delete mode 100644 src/svg-icons/image/flip.js delete mode 100644 src/svg-icons/image/gradient.js delete mode 100644 src/svg-icons/image/grain.js delete mode 100644 src/svg-icons/image/grid-off.js delete mode 100644 src/svg-icons/image/grid-on.js delete mode 100644 src/svg-icons/image/hdr-off.js delete mode 100644 src/svg-icons/image/hdr-on.js delete mode 100644 src/svg-icons/image/hdr-strong.js delete mode 100644 src/svg-icons/image/hdr-weak.js delete mode 100644 src/svg-icons/image/healing.js delete mode 100644 src/svg-icons/image/image-aspect-ratio.js delete mode 100644 src/svg-icons/image/image.js delete mode 100644 src/svg-icons/image/iso.js delete mode 100644 src/svg-icons/image/landscape.js delete mode 100644 src/svg-icons/image/leak-add.js delete mode 100644 src/svg-icons/image/leak-remove.js delete mode 100644 src/svg-icons/image/lens.js delete mode 100644 src/svg-icons/image/linked-camera.js delete mode 100644 src/svg-icons/image/looks-3.js delete mode 100644 src/svg-icons/image/looks-4.js delete mode 100644 src/svg-icons/image/looks-5.js delete mode 100644 src/svg-icons/image/looks-6.js delete mode 100644 src/svg-icons/image/looks-one.js delete mode 100644 src/svg-icons/image/looks-two.js delete mode 100644 src/svg-icons/image/looks.js delete mode 100644 src/svg-icons/image/loupe.js delete mode 100644 src/svg-icons/image/monochrome-photos.js delete mode 100644 src/svg-icons/image/movie-creation.js delete mode 100644 src/svg-icons/image/movie-filter.js delete mode 100644 src/svg-icons/image/music-note.js delete mode 100644 src/svg-icons/image/nature-people.js delete mode 100644 src/svg-icons/image/nature.js delete mode 100644 src/svg-icons/image/navigate-before.js delete mode 100644 src/svg-icons/image/navigate-next.js delete mode 100644 src/svg-icons/image/palette.js delete mode 100644 src/svg-icons/image/panorama-fish-eye.js delete mode 100644 src/svg-icons/image/panorama-horizontal.js delete mode 100644 src/svg-icons/image/panorama-vertical.js delete mode 100644 src/svg-icons/image/panorama-wide-angle.js delete mode 100644 src/svg-icons/image/panorama.js delete mode 100644 src/svg-icons/image/photo-album.js delete mode 100644 src/svg-icons/image/photo-camera.js delete mode 100644 src/svg-icons/image/photo-filter.js delete mode 100644 src/svg-icons/image/photo-library.js delete mode 100644 src/svg-icons/image/photo-size-select-actual.js delete mode 100644 src/svg-icons/image/photo-size-select-large.js delete mode 100644 src/svg-icons/image/photo-size-select-small.js delete mode 100644 src/svg-icons/image/photo.js delete mode 100644 src/svg-icons/image/picture-as-pdf.js delete mode 100644 src/svg-icons/image/portrait.js delete mode 100644 src/svg-icons/image/remove-red-eye.js delete mode 100644 src/svg-icons/image/rotate-90-degrees-ccw.js delete mode 100644 src/svg-icons/image/rotate-left.js delete mode 100644 src/svg-icons/image/rotate-right.js delete mode 100644 src/svg-icons/image/slideshow.js delete mode 100644 src/svg-icons/image/straighten.js delete mode 100644 src/svg-icons/image/style.js delete mode 100644 src/svg-icons/image/switch-camera.js delete mode 100644 src/svg-icons/image/switch-video.js delete mode 100644 src/svg-icons/image/tag-faces.js delete mode 100644 src/svg-icons/image/texture.js delete mode 100644 src/svg-icons/image/timelapse.js delete mode 100644 src/svg-icons/image/timer-10.js delete mode 100644 src/svg-icons/image/timer-3.js delete mode 100644 src/svg-icons/image/timer-off.js delete mode 100644 src/svg-icons/image/timer.js delete mode 100644 src/svg-icons/image/tonality.js delete mode 100644 src/svg-icons/image/transform.js delete mode 100644 src/svg-icons/image/tune.js delete mode 100644 src/svg-icons/image/view-comfy.js delete mode 100644 src/svg-icons/image/view-compact.js delete mode 100644 src/svg-icons/image/vignette.js delete mode 100644 src/svg-icons/image/wb-auto.js delete mode 100644 src/svg-icons/image/wb-cloudy.js delete mode 100644 src/svg-icons/image/wb-incandescent.js delete mode 100644 src/svg-icons/image/wb-iridescent.js delete mode 100644 src/svg-icons/image/wb-sunny.js delete mode 100644 src/svg-icons/index.js delete mode 100644 src/svg-icons/maps/add-location.js delete mode 100644 src/svg-icons/maps/beenhere.js delete mode 100644 src/svg-icons/maps/directions-bike.js delete mode 100644 src/svg-icons/maps/directions-boat.js delete mode 100644 src/svg-icons/maps/directions-bus.js delete mode 100644 src/svg-icons/maps/directions-car.js delete mode 100644 src/svg-icons/maps/directions-railway.js delete mode 100644 src/svg-icons/maps/directions-run.js delete mode 100644 src/svg-icons/maps/directions-subway.js delete mode 100644 src/svg-icons/maps/directions-transit.js delete mode 100644 src/svg-icons/maps/directions-walk.js delete mode 100644 src/svg-icons/maps/directions.js delete mode 100644 src/svg-icons/maps/edit-location.js delete mode 100644 src/svg-icons/maps/ev-station.js delete mode 100644 src/svg-icons/maps/flight.js delete mode 100644 src/svg-icons/maps/hotel.js delete mode 100644 src/svg-icons/maps/layers-clear.js delete mode 100644 src/svg-icons/maps/layers.js delete mode 100644 src/svg-icons/maps/local-activity.js delete mode 100644 src/svg-icons/maps/local-airport.js delete mode 100644 src/svg-icons/maps/local-atm.js delete mode 100644 src/svg-icons/maps/local-bar.js delete mode 100644 src/svg-icons/maps/local-cafe.js delete mode 100644 src/svg-icons/maps/local-car-wash.js delete mode 100644 src/svg-icons/maps/local-convenience-store.js delete mode 100644 src/svg-icons/maps/local-dining.js delete mode 100644 src/svg-icons/maps/local-drink.js delete mode 100644 src/svg-icons/maps/local-florist.js delete mode 100644 src/svg-icons/maps/local-gas-station.js delete mode 100644 src/svg-icons/maps/local-grocery-store.js delete mode 100644 src/svg-icons/maps/local-hospital.js delete mode 100644 src/svg-icons/maps/local-hotel.js delete mode 100644 src/svg-icons/maps/local-laundry-service.js delete mode 100644 src/svg-icons/maps/local-library.js delete mode 100644 src/svg-icons/maps/local-mall.js delete mode 100644 src/svg-icons/maps/local-movies.js delete mode 100644 src/svg-icons/maps/local-offer.js delete mode 100644 src/svg-icons/maps/local-parking.js delete mode 100644 src/svg-icons/maps/local-pharmacy.js delete mode 100644 src/svg-icons/maps/local-phone.js delete mode 100644 src/svg-icons/maps/local-pizza.js delete mode 100644 src/svg-icons/maps/local-play.js delete mode 100644 src/svg-icons/maps/local-post-office.js delete mode 100644 src/svg-icons/maps/local-printshop.js delete mode 100644 src/svg-icons/maps/local-see.js delete mode 100644 src/svg-icons/maps/local-shipping.js delete mode 100644 src/svg-icons/maps/local-taxi.js delete mode 100644 src/svg-icons/maps/map.js delete mode 100644 src/svg-icons/maps/my-location.js delete mode 100644 src/svg-icons/maps/navigation.js delete mode 100644 src/svg-icons/maps/near-me.js delete mode 100644 src/svg-icons/maps/person-pin-circle.js delete mode 100644 src/svg-icons/maps/person-pin.js delete mode 100644 src/svg-icons/maps/pin-drop.js delete mode 100644 src/svg-icons/maps/place.js delete mode 100644 src/svg-icons/maps/rate-review.js delete mode 100644 src/svg-icons/maps/restaurant-menu.js delete mode 100644 src/svg-icons/maps/restaurant.js delete mode 100644 src/svg-icons/maps/satellite.js delete mode 100644 src/svg-icons/maps/store-mall-directory.js delete mode 100644 src/svg-icons/maps/streetview.js delete mode 100644 src/svg-icons/maps/subway.js delete mode 100644 src/svg-icons/maps/terrain.js delete mode 100644 src/svg-icons/maps/traffic.js delete mode 100644 src/svg-icons/maps/train.js delete mode 100644 src/svg-icons/maps/tram.js delete mode 100644 src/svg-icons/maps/transfer-within-a-station.js delete mode 100644 src/svg-icons/maps/zoom-out-map.js delete mode 100644 src/svg-icons/navigation-arrow-drop-right.js delete mode 100644 src/svg-icons/navigation/apps.js delete mode 100644 src/svg-icons/navigation/arrow-back.js delete mode 100644 src/svg-icons/navigation/arrow-downward.js delete mode 100644 src/svg-icons/navigation/arrow-drop-down-circle.js delete mode 100644 src/svg-icons/navigation/arrow-drop-down.js delete mode 100644 src/svg-icons/navigation/arrow-drop-up.js delete mode 100644 src/svg-icons/navigation/arrow-forward.js delete mode 100644 src/svg-icons/navigation/arrow-upward.js delete mode 100644 src/svg-icons/navigation/cancel.js delete mode 100644 src/svg-icons/navigation/check.js delete mode 100644 src/svg-icons/navigation/chevron-left.js delete mode 100644 src/svg-icons/navigation/chevron-right.js delete mode 100644 src/svg-icons/navigation/close.js delete mode 100644 src/svg-icons/navigation/expand-less.js delete mode 100644 src/svg-icons/navigation/expand-more.js delete mode 100644 src/svg-icons/navigation/first-page.js delete mode 100644 src/svg-icons/navigation/fullscreen-exit.js delete mode 100644 src/svg-icons/navigation/fullscreen.js delete mode 100644 src/svg-icons/navigation/last-page.js delete mode 100644 src/svg-icons/navigation/menu.js delete mode 100644 src/svg-icons/navigation/more-horiz.js delete mode 100644 src/svg-icons/navigation/more-vert.js delete mode 100644 src/svg-icons/navigation/refresh.js delete mode 100644 src/svg-icons/navigation/subdirectory-arrow-left.js delete mode 100644 src/svg-icons/navigation/subdirectory-arrow-right.js delete mode 100644 src/svg-icons/navigation/unfold-less.js delete mode 100644 src/svg-icons/navigation/unfold-more.js delete mode 100644 src/svg-icons/notification/adb.js delete mode 100644 src/svg-icons/notification/airline-seat-flat-angled.js delete mode 100644 src/svg-icons/notification/airline-seat-flat.js delete mode 100644 src/svg-icons/notification/airline-seat-individual-suite.js delete mode 100644 src/svg-icons/notification/airline-seat-legroom-extra.js delete mode 100644 src/svg-icons/notification/airline-seat-legroom-normal.js delete mode 100644 src/svg-icons/notification/airline-seat-legroom-reduced.js delete mode 100644 src/svg-icons/notification/airline-seat-recline-extra.js delete mode 100644 src/svg-icons/notification/airline-seat-recline-normal.js delete mode 100644 src/svg-icons/notification/bluetooth-audio.js delete mode 100644 src/svg-icons/notification/confirmation-number.js delete mode 100644 src/svg-icons/notification/disc-full.js delete mode 100644 src/svg-icons/notification/do-not-disturb-alt.js delete mode 100644 src/svg-icons/notification/do-not-disturb-off.js delete mode 100644 src/svg-icons/notification/do-not-disturb-on.js delete mode 100644 src/svg-icons/notification/do-not-disturb.js delete mode 100644 src/svg-icons/notification/drive-eta.js delete mode 100644 src/svg-icons/notification/enhanced-encryption.js delete mode 100644 src/svg-icons/notification/event-available.js delete mode 100644 src/svg-icons/notification/event-busy.js delete mode 100644 src/svg-icons/notification/event-note.js delete mode 100644 src/svg-icons/notification/folder-special.js delete mode 100644 src/svg-icons/notification/live-tv.js delete mode 100644 src/svg-icons/notification/mms.js delete mode 100644 src/svg-icons/notification/more.js delete mode 100644 src/svg-icons/notification/network-check.js delete mode 100644 src/svg-icons/notification/network-locked.js delete mode 100644 src/svg-icons/notification/no-encryption.js delete mode 100644 src/svg-icons/notification/ondemand-video.js delete mode 100644 src/svg-icons/notification/personal-video.js delete mode 100644 src/svg-icons/notification/phone-bluetooth-speaker.js delete mode 100644 src/svg-icons/notification/phone-forwarded.js delete mode 100644 src/svg-icons/notification/phone-in-talk.js delete mode 100644 src/svg-icons/notification/phone-locked.js delete mode 100644 src/svg-icons/notification/phone-missed.js delete mode 100644 src/svg-icons/notification/phone-paused.js delete mode 100644 src/svg-icons/notification/power.js delete mode 100644 src/svg-icons/notification/priority-high.js delete mode 100644 src/svg-icons/notification/rv-hookup.js delete mode 100644 src/svg-icons/notification/sd-card.js delete mode 100644 src/svg-icons/notification/sim-card-alert.js delete mode 100644 src/svg-icons/notification/sms-failed.js delete mode 100644 src/svg-icons/notification/sms.js delete mode 100644 src/svg-icons/notification/sync-disabled.js delete mode 100644 src/svg-icons/notification/sync-problem.js delete mode 100644 src/svg-icons/notification/sync.js delete mode 100644 src/svg-icons/notification/system-update.js delete mode 100644 src/svg-icons/notification/tap-and-play.js delete mode 100644 src/svg-icons/notification/time-to-leave.js delete mode 100644 src/svg-icons/notification/vibration.js delete mode 100644 src/svg-icons/notification/voice-chat.js delete mode 100644 src/svg-icons/notification/vpn-lock.js delete mode 100644 src/svg-icons/notification/wc.js delete mode 100644 src/svg-icons/notification/wifi.js delete mode 100644 src/svg-icons/places/ac-unit.js delete mode 100644 src/svg-icons/places/airport-shuttle.js delete mode 100644 src/svg-icons/places/all-inclusive.js delete mode 100644 src/svg-icons/places/beach-access.js delete mode 100644 src/svg-icons/places/business-center.js delete mode 100644 src/svg-icons/places/casino.js delete mode 100644 src/svg-icons/places/child-care.js delete mode 100644 src/svg-icons/places/child-friendly.js delete mode 100644 src/svg-icons/places/fitness-center.js delete mode 100644 src/svg-icons/places/free-breakfast.js delete mode 100644 src/svg-icons/places/golf-course.js delete mode 100644 src/svg-icons/places/hot-tub.js delete mode 100644 src/svg-icons/places/kitchen.js delete mode 100644 src/svg-icons/places/pool.js delete mode 100644 src/svg-icons/places/room-service.js delete mode 100644 src/svg-icons/places/rv-hookup.js delete mode 100644 src/svg-icons/places/smoke-free.js delete mode 100644 src/svg-icons/places/smoking-rooms.js delete mode 100644 src/svg-icons/places/spa.js delete mode 100644 src/svg-icons/social/cake.js delete mode 100644 src/svg-icons/social/domain.js delete mode 100644 src/svg-icons/social/group-add.js delete mode 100644 src/svg-icons/social/group.js delete mode 100644 src/svg-icons/social/location-city.js delete mode 100644 src/svg-icons/social/mood-bad.js delete mode 100644 src/svg-icons/social/mood.js delete mode 100644 src/svg-icons/social/notifications-active.js delete mode 100644 src/svg-icons/social/notifications-none.js delete mode 100644 src/svg-icons/social/notifications-off.js delete mode 100644 src/svg-icons/social/notifications-paused.js delete mode 100644 src/svg-icons/social/notifications.js delete mode 100644 src/svg-icons/social/pages.js delete mode 100644 src/svg-icons/social/party-mode.js delete mode 100644 src/svg-icons/social/people-outline.js delete mode 100644 src/svg-icons/social/people.js delete mode 100644 src/svg-icons/social/person-add.js delete mode 100644 src/svg-icons/social/person-outline.js delete mode 100644 src/svg-icons/social/person.js delete mode 100644 src/svg-icons/social/plus-one.js delete mode 100644 src/svg-icons/social/poll.js delete mode 100644 src/svg-icons/social/public.js delete mode 100644 src/svg-icons/social/school.js delete mode 100644 src/svg-icons/social/sentiment-dissatisfied.js delete mode 100644 src/svg-icons/social/sentiment-neutral.js delete mode 100644 src/svg-icons/social/sentiment-satisfied.js delete mode 100644 src/svg-icons/social/sentiment-very-dissatisfied.js delete mode 100644 src/svg-icons/social/sentiment-very-satisfied.js delete mode 100644 src/svg-icons/social/share.js delete mode 100644 src/svg-icons/social/whatshot.js delete mode 100644 src/svg-icons/toggle/check-box-outline-blank.js delete mode 100644 src/svg-icons/toggle/check-box.js delete mode 100644 src/svg-icons/toggle/indeterminate-check-box.js delete mode 100644 src/svg-icons/toggle/radio-button-checked.js delete mode 100644 src/svg-icons/toggle/radio-button-unchecked.js delete mode 100644 src/svg-icons/toggle/star-border.js delete mode 100644 src/svg-icons/toggle/star-half.js delete mode 100644 src/svg-icons/toggle/star.js delete mode 100644 src/utils/autoPrefix.js delete mode 100644 src/utils/autoprefixer.js delete mode 100644 src/utils/autoprefixer.spec.js delete mode 100644 src/utils/autoprefixerDynamic.js delete mode 100644 src/utils/autoprefixerStatic.js delete mode 100644 src/utils/callOnce.js delete mode 100644 src/utils/childUtils.js delete mode 100644 src/utils/colorManipulator.js delete mode 100644 src/utils/colorManipulator.spec.js delete mode 100644 src/utils/deprecatedExport.js delete mode 100644 src/utils/deprecatedPropType.js delete mode 100644 src/utils/dom.js delete mode 100644 src/utils/events.js delete mode 100644 src/utils/propTypes.js delete mode 100644 src/utils/rtl.js delete mode 100644 src/utils/rtl.spec.js delete mode 100644 src/utils/withWidth.js delete mode 100644 src/utils/withWidth.spec.js create mode 100644 styles/MuiThemeProvider.js create mode 100644 styles/baseThemes/darkBaseTheme.js create mode 100644 styles/baseThemes/lightBaseTheme.js create mode 100644 styles/colors.js create mode 100644 styles/getMuiTheme.js create mode 100644 styles/index.js create mode 100644 styles/muiThemeable.js create mode 100644 styles/spacing.js create mode 100644 styles/transitions.js create mode 100644 styles/typography.js create mode 100644 styles/zIndex.js create mode 100644 svg-icons/action/accessibility.js create mode 100644 svg-icons/action/accessible.js create mode 100644 svg-icons/action/account-balance-wallet.js create mode 100644 svg-icons/action/account-balance.js create mode 100644 svg-icons/action/account-box.js create mode 100644 svg-icons/action/account-circle.js create mode 100644 svg-icons/action/add-shopping-cart.js create mode 100644 svg-icons/action/alarm-add.js create mode 100644 svg-icons/action/alarm-off.js create mode 100644 svg-icons/action/alarm-on.js create mode 100644 svg-icons/action/alarm.js create mode 100644 svg-icons/action/all-out.js create mode 100644 svg-icons/action/android.js create mode 100644 svg-icons/action/announcement.js create mode 100644 svg-icons/action/aspect-ratio.js create mode 100644 svg-icons/action/assessment.js create mode 100644 svg-icons/action/assignment-ind.js create mode 100644 svg-icons/action/assignment-late.js create mode 100644 svg-icons/action/assignment-return.js create mode 100644 svg-icons/action/assignment-returned.js create mode 100644 svg-icons/action/assignment-turned-in.js create mode 100644 svg-icons/action/assignment.js create mode 100644 svg-icons/action/autorenew.js create mode 100644 svg-icons/action/backup.js create mode 100644 svg-icons/action/book.js create mode 100644 svg-icons/action/bookmark-border.js create mode 100644 svg-icons/action/bookmark.js create mode 100644 svg-icons/action/bug-report.js create mode 100644 svg-icons/action/build.js create mode 100644 svg-icons/action/cached.js create mode 100644 svg-icons/action/camera-enhance.js create mode 100644 svg-icons/action/card-giftcard.js create mode 100644 svg-icons/action/card-membership.js create mode 100644 svg-icons/action/card-travel.js create mode 100644 svg-icons/action/change-history.js create mode 100644 svg-icons/action/check-circle.js create mode 100644 svg-icons/action/chrome-reader-mode.js create mode 100644 svg-icons/action/class.js create mode 100644 svg-icons/action/code.js create mode 100644 svg-icons/action/compare-arrows.js create mode 100644 svg-icons/action/copyright.js create mode 100644 svg-icons/action/credit-card.js create mode 100644 svg-icons/action/dashboard.js create mode 100644 svg-icons/action/date-range.js create mode 100644 svg-icons/action/delete-forever.js create mode 100644 svg-icons/action/delete.js create mode 100644 svg-icons/action/description.js create mode 100644 svg-icons/action/dns.js create mode 100644 svg-icons/action/done-all.js create mode 100644 svg-icons/action/done.js create mode 100644 svg-icons/action/donut-large.js create mode 100644 svg-icons/action/donut-small.js create mode 100644 svg-icons/action/eject.js create mode 100644 svg-icons/action/euro-symbol.js create mode 100644 svg-icons/action/event-seat.js create mode 100644 svg-icons/action/event.js create mode 100644 svg-icons/action/exit-to-app.js create mode 100644 svg-icons/action/explore.js create mode 100644 svg-icons/action/extension.js create mode 100644 svg-icons/action/face.js create mode 100644 svg-icons/action/favorite-border.js create mode 100644 svg-icons/action/favorite.js create mode 100644 svg-icons/action/feedback.js create mode 100644 svg-icons/action/find-in-page.js create mode 100644 svg-icons/action/find-replace.js create mode 100644 svg-icons/action/fingerprint.js create mode 100644 svg-icons/action/flight-land.js create mode 100644 svg-icons/action/flight-takeoff.js create mode 100644 svg-icons/action/flip-to-back.js create mode 100644 svg-icons/action/flip-to-front.js create mode 100644 svg-icons/action/g-translate.js create mode 100644 svg-icons/action/gavel.js create mode 100644 svg-icons/action/get-app.js create mode 100644 svg-icons/action/gif.js create mode 100644 svg-icons/action/grade.js create mode 100644 svg-icons/action/group-work.js create mode 100644 svg-icons/action/help-outline.js create mode 100644 svg-icons/action/help.js create mode 100644 svg-icons/action/highlight-off.js create mode 100644 svg-icons/action/history.js create mode 100644 svg-icons/action/home.js create mode 100644 svg-icons/action/hourglass-empty.js create mode 100644 svg-icons/action/hourglass-full.js create mode 100644 svg-icons/action/http.js create mode 100644 svg-icons/action/https.js create mode 100644 svg-icons/action/important-devices.js create mode 100644 svg-icons/action/info-outline.js create mode 100644 svg-icons/action/info.js create mode 100644 svg-icons/action/input.js create mode 100644 svg-icons/action/invert-colors.js create mode 100644 svg-icons/action/label-outline.js create mode 100644 svg-icons/action/label.js create mode 100644 svg-icons/action/language.js create mode 100644 svg-icons/action/launch.js create mode 100644 svg-icons/action/lightbulb-outline.js create mode 100644 svg-icons/action/line-style.js create mode 100644 svg-icons/action/line-weight.js create mode 100644 svg-icons/action/list.js create mode 100644 svg-icons/action/lock-open.js create mode 100644 svg-icons/action/lock-outline.js create mode 100644 svg-icons/action/lock.js create mode 100644 svg-icons/action/loyalty.js create mode 100644 svg-icons/action/markunread-mailbox.js create mode 100644 svg-icons/action/motorcycle.js create mode 100644 svg-icons/action/note-add.js create mode 100644 svg-icons/action/offline-pin.js create mode 100644 svg-icons/action/opacity.js create mode 100644 svg-icons/action/open-in-browser.js create mode 100644 svg-icons/action/open-in-new.js create mode 100644 svg-icons/action/open-with.js create mode 100644 svg-icons/action/pageview.js create mode 100644 svg-icons/action/pan-tool.js create mode 100644 svg-icons/action/payment.js create mode 100644 svg-icons/action/perm-camera-mic.js create mode 100644 svg-icons/action/perm-contact-calendar.js create mode 100644 svg-icons/action/perm-data-setting.js create mode 100644 svg-icons/action/perm-device-information.js create mode 100644 svg-icons/action/perm-identity.js create mode 100644 svg-icons/action/perm-media.js create mode 100644 svg-icons/action/perm-phone-msg.js create mode 100644 svg-icons/action/perm-scan-wifi.js create mode 100644 svg-icons/action/pets.js create mode 100644 svg-icons/action/picture-in-picture-alt.js create mode 100644 svg-icons/action/picture-in-picture.js create mode 100644 svg-icons/action/play-for-work.js create mode 100644 svg-icons/action/polymer.js create mode 100644 svg-icons/action/power-settings-new.js create mode 100644 svg-icons/action/pregnant-woman.js create mode 100644 svg-icons/action/print.js create mode 100644 svg-icons/action/query-builder.js create mode 100644 svg-icons/action/question-answer.js create mode 100644 svg-icons/action/receipt.js create mode 100644 svg-icons/action/record-voice-over.js create mode 100644 svg-icons/action/redeem.js create mode 100644 svg-icons/action/remove-shopping-cart.js create mode 100644 svg-icons/action/reorder.js create mode 100644 svg-icons/action/report-problem.js create mode 100644 svg-icons/action/restore-page.js create mode 100644 svg-icons/action/restore.js create mode 100644 svg-icons/action/room.js create mode 100644 svg-icons/action/rounded-corner.js create mode 100644 svg-icons/action/rowing.js create mode 100644 svg-icons/action/schedule.js create mode 100644 svg-icons/action/search.js create mode 100644 svg-icons/action/settings-applications.js create mode 100644 svg-icons/action/settings-backup-restore.js create mode 100644 svg-icons/action/settings-bluetooth.js create mode 100644 svg-icons/action/settings-brightness.js create mode 100644 svg-icons/action/settings-cell.js create mode 100644 svg-icons/action/settings-ethernet.js create mode 100644 svg-icons/action/settings-input-antenna.js create mode 100644 svg-icons/action/settings-input-component.js create mode 100644 svg-icons/action/settings-input-composite.js create mode 100644 svg-icons/action/settings-input-hdmi.js create mode 100644 svg-icons/action/settings-input-svideo.js create mode 100644 svg-icons/action/settings-overscan.js create mode 100644 svg-icons/action/settings-phone.js create mode 100644 svg-icons/action/settings-power.js create mode 100644 svg-icons/action/settings-remote.js create mode 100644 svg-icons/action/settings-voice.js create mode 100644 svg-icons/action/settings.js create mode 100644 svg-icons/action/shop-two.js create mode 100644 svg-icons/action/shop.js create mode 100644 svg-icons/action/shopping-basket.js create mode 100644 svg-icons/action/shopping-cart.js create mode 100644 svg-icons/action/speaker-notes-off.js create mode 100644 svg-icons/action/speaker-notes.js create mode 100644 svg-icons/action/spellcheck.js create mode 100644 svg-icons/action/stars.js create mode 100644 svg-icons/action/store.js create mode 100644 svg-icons/action/subject.js create mode 100644 svg-icons/action/supervisor-account.js create mode 100644 svg-icons/action/swap-horiz.js create mode 100644 svg-icons/action/swap-vert.js create mode 100644 svg-icons/action/swap-vertical-circle.js create mode 100644 svg-icons/action/system-update-alt.js create mode 100644 svg-icons/action/tab-unselected.js create mode 100644 svg-icons/action/tab.js create mode 100644 svg-icons/action/theaters.js create mode 100644 svg-icons/action/three-d-rotation.js create mode 100644 svg-icons/action/thumb-down.js create mode 100644 svg-icons/action/thumb-up.js create mode 100644 svg-icons/action/thumbs-up-down.js create mode 100644 svg-icons/action/timeline.js create mode 100644 svg-icons/action/toc.js create mode 100644 svg-icons/action/today.js create mode 100644 svg-icons/action/toll.js create mode 100644 svg-icons/action/touch-app.js create mode 100644 svg-icons/action/track-changes.js create mode 100644 svg-icons/action/translate.js create mode 100644 svg-icons/action/trending-down.js create mode 100644 svg-icons/action/trending-flat.js create mode 100644 svg-icons/action/trending-up.js create mode 100644 svg-icons/action/turned-in-not.js create mode 100644 svg-icons/action/turned-in.js create mode 100644 svg-icons/action/update.js create mode 100644 svg-icons/action/verified-user.js create mode 100644 svg-icons/action/view-agenda.js create mode 100644 svg-icons/action/view-array.js create mode 100644 svg-icons/action/view-carousel.js create mode 100644 svg-icons/action/view-column.js create mode 100644 svg-icons/action/view-day.js create mode 100644 svg-icons/action/view-headline.js create mode 100644 svg-icons/action/view-list.js create mode 100644 svg-icons/action/view-module.js create mode 100644 svg-icons/action/view-quilt.js create mode 100644 svg-icons/action/view-stream.js create mode 100644 svg-icons/action/view-week.js create mode 100644 svg-icons/action/visibility-off.js create mode 100644 svg-icons/action/visibility.js create mode 100644 svg-icons/action/watch-later.js create mode 100644 svg-icons/action/work.js create mode 100644 svg-icons/action/youtube-searched-for.js create mode 100644 svg-icons/action/zoom-in.js create mode 100644 svg-icons/action/zoom-out.js create mode 100644 svg-icons/alert/add-alert.js create mode 100644 svg-icons/alert/error-outline.js create mode 100644 svg-icons/alert/error.js create mode 100644 svg-icons/alert/warning.js create mode 100644 svg-icons/av/add-to-queue.js create mode 100644 svg-icons/av/airplay.js create mode 100644 svg-icons/av/album.js create mode 100644 svg-icons/av/art-track.js create mode 100644 svg-icons/av/av-timer.js create mode 100644 svg-icons/av/branding-watermark.js create mode 100644 svg-icons/av/call-to-action.js create mode 100644 svg-icons/av/closed-caption.js create mode 100644 svg-icons/av/equalizer.js create mode 100644 svg-icons/av/explicit.js create mode 100644 svg-icons/av/fast-forward.js create mode 100644 svg-icons/av/fast-rewind.js create mode 100644 svg-icons/av/featured-play-list.js create mode 100644 svg-icons/av/featured-video.js create mode 100644 svg-icons/av/fiber-dvr.js create mode 100644 svg-icons/av/fiber-manual-record.js create mode 100644 svg-icons/av/fiber-new.js create mode 100644 svg-icons/av/fiber-pin.js create mode 100644 svg-icons/av/fiber-smart-record.js create mode 100644 svg-icons/av/forward-10.js create mode 100644 svg-icons/av/forward-30.js create mode 100644 svg-icons/av/forward-5.js create mode 100644 svg-icons/av/games.js create mode 100644 svg-icons/av/hd.js create mode 100644 svg-icons/av/hearing.js create mode 100644 svg-icons/av/high-quality.js create mode 100644 svg-icons/av/library-add.js create mode 100644 svg-icons/av/library-books.js create mode 100644 svg-icons/av/library-music.js create mode 100644 svg-icons/av/loop.js create mode 100644 svg-icons/av/mic-none.js create mode 100644 svg-icons/av/mic-off.js create mode 100644 svg-icons/av/mic.js create mode 100644 svg-icons/av/movie.js create mode 100644 svg-icons/av/music-video.js create mode 100644 svg-icons/av/new-releases.js create mode 100644 svg-icons/av/not-interested.js create mode 100644 svg-icons/av/note.js create mode 100644 svg-icons/av/pause-circle-filled.js create mode 100644 svg-icons/av/pause-circle-outline.js create mode 100644 svg-icons/av/pause.js create mode 100644 svg-icons/av/play-arrow.js create mode 100644 svg-icons/av/play-circle-filled.js create mode 100644 svg-icons/av/play-circle-outline.js create mode 100644 svg-icons/av/playlist-add-check.js create mode 100644 svg-icons/av/playlist-add.js create mode 100644 svg-icons/av/playlist-play.js create mode 100644 svg-icons/av/queue-music.js create mode 100644 svg-icons/av/queue-play-next.js create mode 100644 svg-icons/av/queue.js create mode 100644 svg-icons/av/radio.js create mode 100644 svg-icons/av/recent-actors.js create mode 100644 svg-icons/av/remove-from-queue.js create mode 100644 svg-icons/av/repeat-one.js create mode 100644 svg-icons/av/repeat.js create mode 100644 svg-icons/av/replay-10.js create mode 100644 svg-icons/av/replay-30.js create mode 100644 svg-icons/av/replay-5.js create mode 100644 svg-icons/av/replay.js create mode 100644 svg-icons/av/shuffle.js create mode 100644 svg-icons/av/skip-next.js create mode 100644 svg-icons/av/skip-previous.js create mode 100644 svg-icons/av/slow-motion-video.js create mode 100644 svg-icons/av/snooze.js create mode 100644 svg-icons/av/sort-by-alpha.js create mode 100644 svg-icons/av/stop.js create mode 100644 svg-icons/av/subscriptions.js create mode 100644 svg-icons/av/subtitles.js create mode 100644 svg-icons/av/surround-sound.js create mode 100644 svg-icons/av/video-call.js create mode 100644 svg-icons/av/video-label.js create mode 100644 svg-icons/av/video-library.js create mode 100644 svg-icons/av/videocam-off.js create mode 100644 svg-icons/av/videocam.js create mode 100644 svg-icons/av/volume-down.js create mode 100644 svg-icons/av/volume-mute.js create mode 100644 svg-icons/av/volume-off.js create mode 100644 svg-icons/av/volume-up.js create mode 100644 svg-icons/av/web-asset.js create mode 100644 svg-icons/av/web.js create mode 100644 svg-icons/communication/business.js create mode 100644 svg-icons/communication/call-end.js create mode 100644 svg-icons/communication/call-made.js create mode 100644 svg-icons/communication/call-merge.js create mode 100644 svg-icons/communication/call-missed-outgoing.js create mode 100644 svg-icons/communication/call-missed.js create mode 100644 svg-icons/communication/call-received.js create mode 100644 svg-icons/communication/call-split.js create mode 100644 svg-icons/communication/call.js create mode 100644 svg-icons/communication/chat-bubble-outline.js create mode 100644 svg-icons/communication/chat-bubble.js create mode 100644 svg-icons/communication/chat.js create mode 100644 svg-icons/communication/clear-all.js create mode 100644 svg-icons/communication/comment.js create mode 100644 svg-icons/communication/contact-mail.js create mode 100644 svg-icons/communication/contact-phone.js create mode 100644 svg-icons/communication/contacts.js create mode 100644 svg-icons/communication/dialer-sip.js create mode 100644 svg-icons/communication/dialpad.js create mode 100644 svg-icons/communication/email.js create mode 100644 svg-icons/communication/forum.js create mode 100644 svg-icons/communication/import-contacts.js create mode 100644 svg-icons/communication/import-export.js create mode 100644 svg-icons/communication/invert-colors-off.js create mode 100644 svg-icons/communication/live-help.js create mode 100644 svg-icons/communication/location-off.js create mode 100644 svg-icons/communication/location-on.js create mode 100644 svg-icons/communication/mail-outline.js create mode 100644 svg-icons/communication/message.js create mode 100644 svg-icons/communication/no-sim.js create mode 100644 svg-icons/communication/phone.js create mode 100644 svg-icons/communication/phonelink-erase.js create mode 100644 svg-icons/communication/phonelink-lock.js create mode 100644 svg-icons/communication/phonelink-ring.js create mode 100644 svg-icons/communication/phonelink-setup.js create mode 100644 svg-icons/communication/portable-wifi-off.js create mode 100644 svg-icons/communication/present-to-all.js create mode 100644 svg-icons/communication/ring-volume.js create mode 100644 svg-icons/communication/rss-feed.js create mode 100644 svg-icons/communication/screen-share.js create mode 100644 svg-icons/communication/speaker-phone.js create mode 100644 svg-icons/communication/stay-current-landscape.js create mode 100644 svg-icons/communication/stay-current-portrait.js create mode 100644 svg-icons/communication/stay-primary-landscape.js create mode 100644 svg-icons/communication/stay-primary-portrait.js create mode 100644 svg-icons/communication/stop-screen-share.js create mode 100644 svg-icons/communication/swap-calls.js create mode 100644 svg-icons/communication/textsms.js create mode 100644 svg-icons/communication/voicemail.js create mode 100644 svg-icons/communication/vpn-key.js create mode 100644 svg-icons/content/add-box.js create mode 100644 svg-icons/content/add-circle-outline.js create mode 100644 svg-icons/content/add-circle.js create mode 100644 svg-icons/content/add.js create mode 100644 svg-icons/content/archive.js create mode 100644 svg-icons/content/backspace.js create mode 100644 svg-icons/content/block.js create mode 100644 svg-icons/content/clear.js create mode 100644 svg-icons/content/content-copy.js create mode 100644 svg-icons/content/content-cut.js create mode 100644 svg-icons/content/content-paste.js create mode 100644 svg-icons/content/create.js create mode 100644 svg-icons/content/delete-sweep.js create mode 100644 svg-icons/content/drafts.js create mode 100644 svg-icons/content/filter-list.js create mode 100644 svg-icons/content/flag.js create mode 100644 svg-icons/content/font-download.js create mode 100644 svg-icons/content/forward.js create mode 100644 svg-icons/content/gesture.js create mode 100644 svg-icons/content/inbox.js create mode 100644 svg-icons/content/link.js create mode 100644 svg-icons/content/low-priority.js create mode 100644 svg-icons/content/mail.js create mode 100644 svg-icons/content/markunread.js create mode 100644 svg-icons/content/move-to-inbox.js create mode 100644 svg-icons/content/next-week.js create mode 100644 svg-icons/content/redo.js create mode 100644 svg-icons/content/remove-circle-outline.js create mode 100644 svg-icons/content/remove-circle.js create mode 100644 svg-icons/content/remove.js create mode 100644 svg-icons/content/reply-all.js create mode 100644 svg-icons/content/reply.js create mode 100644 svg-icons/content/report.js create mode 100644 svg-icons/content/save.js create mode 100644 svg-icons/content/select-all.js create mode 100644 svg-icons/content/send.js create mode 100644 svg-icons/content/sort.js create mode 100644 svg-icons/content/text-format.js create mode 100644 svg-icons/content/unarchive.js create mode 100644 svg-icons/content/undo.js create mode 100644 svg-icons/content/weekend.js create mode 100644 svg-icons/device/access-alarm.js create mode 100644 svg-icons/device/access-alarms.js create mode 100644 svg-icons/device/access-time.js create mode 100644 svg-icons/device/add-alarm.js create mode 100644 svg-icons/device/airplanemode-active.js create mode 100644 svg-icons/device/airplanemode-inactive.js create mode 100644 svg-icons/device/battery-20.js create mode 100644 svg-icons/device/battery-30.js create mode 100644 svg-icons/device/battery-50.js create mode 100644 svg-icons/device/battery-60.js create mode 100644 svg-icons/device/battery-80.js create mode 100644 svg-icons/device/battery-90.js create mode 100644 svg-icons/device/battery-alert.js create mode 100644 svg-icons/device/battery-charging-20.js create mode 100644 svg-icons/device/battery-charging-30.js create mode 100644 svg-icons/device/battery-charging-50.js create mode 100644 svg-icons/device/battery-charging-60.js create mode 100644 svg-icons/device/battery-charging-80.js create mode 100644 svg-icons/device/battery-charging-90.js create mode 100644 svg-icons/device/battery-charging-full.js create mode 100644 svg-icons/device/battery-full.js create mode 100644 svg-icons/device/battery-std.js create mode 100644 svg-icons/device/battery-unknown.js create mode 100644 svg-icons/device/bluetooth-connected.js create mode 100644 svg-icons/device/bluetooth-disabled.js create mode 100644 svg-icons/device/bluetooth-searching.js create mode 100644 svg-icons/device/bluetooth.js create mode 100644 svg-icons/device/brightness-auto.js create mode 100644 svg-icons/device/brightness-high.js create mode 100644 svg-icons/device/brightness-low.js create mode 100644 svg-icons/device/brightness-medium.js create mode 100644 svg-icons/device/data-usage.js create mode 100644 svg-icons/device/developer-mode.js create mode 100644 svg-icons/device/devices.js create mode 100644 svg-icons/device/dvr.js create mode 100644 svg-icons/device/gps-fixed.js create mode 100644 svg-icons/device/gps-not-fixed.js create mode 100644 svg-icons/device/gps-off.js create mode 100644 svg-icons/device/graphic-eq.js create mode 100644 svg-icons/device/location-disabled.js create mode 100644 svg-icons/device/location-searching.js create mode 100644 svg-icons/device/network-cell.js create mode 100644 svg-icons/device/network-wifi.js create mode 100644 svg-icons/device/nfc.js create mode 100644 svg-icons/device/screen-lock-landscape.js create mode 100644 svg-icons/device/screen-lock-portrait.js create mode 100644 svg-icons/device/screen-lock-rotation.js create mode 100644 svg-icons/device/screen-rotation.js create mode 100644 svg-icons/device/sd-storage.js create mode 100644 svg-icons/device/settings-system-daydream.js create mode 100644 svg-icons/device/signal-cellular-0-bar.js create mode 100644 svg-icons/device/signal-cellular-1-bar.js create mode 100644 svg-icons/device/signal-cellular-2-bar.js create mode 100644 svg-icons/device/signal-cellular-3-bar.js create mode 100644 svg-icons/device/signal-cellular-4-bar.js create mode 100644 svg-icons/device/signal-cellular-connected-no-internet-0-bar.js create mode 100644 svg-icons/device/signal-cellular-connected-no-internet-1-bar.js create mode 100644 svg-icons/device/signal-cellular-connected-no-internet-2-bar.js create mode 100644 svg-icons/device/signal-cellular-connected-no-internet-3-bar.js create mode 100644 svg-icons/device/signal-cellular-connected-no-internet-4-bar.js create mode 100644 svg-icons/device/signal-cellular-no-sim.js create mode 100644 svg-icons/device/signal-cellular-null.js create mode 100644 svg-icons/device/signal-cellular-off.js create mode 100644 svg-icons/device/signal-wifi-0-bar.js create mode 100644 svg-icons/device/signal-wifi-1-bar-lock.js create mode 100644 svg-icons/device/signal-wifi-1-bar.js create mode 100644 svg-icons/device/signal-wifi-2-bar-lock.js create mode 100644 svg-icons/device/signal-wifi-2-bar.js create mode 100644 svg-icons/device/signal-wifi-3-bar-lock.js create mode 100644 svg-icons/device/signal-wifi-3-bar.js create mode 100644 svg-icons/device/signal-wifi-4-bar-lock.js create mode 100644 svg-icons/device/signal-wifi-4-bar.js create mode 100644 svg-icons/device/signal-wifi-off.js create mode 100644 svg-icons/device/storage.js create mode 100644 svg-icons/device/usb.js create mode 100644 svg-icons/device/wallpaper.js create mode 100644 svg-icons/device/widgets.js create mode 100644 svg-icons/device/wifi-lock.js create mode 100644 svg-icons/device/wifi-tethering.js create mode 100644 svg-icons/editor/attach-file.js create mode 100644 svg-icons/editor/attach-money.js create mode 100644 svg-icons/editor/border-all.js create mode 100644 svg-icons/editor/border-bottom.js create mode 100644 svg-icons/editor/border-clear.js create mode 100644 svg-icons/editor/border-color.js create mode 100644 svg-icons/editor/border-horizontal.js create mode 100644 svg-icons/editor/border-inner.js create mode 100644 svg-icons/editor/border-left.js create mode 100644 svg-icons/editor/border-outer.js create mode 100644 svg-icons/editor/border-right.js create mode 100644 svg-icons/editor/border-style.js create mode 100644 svg-icons/editor/border-top.js create mode 100644 svg-icons/editor/border-vertical.js create mode 100644 svg-icons/editor/bubble-chart.js create mode 100644 svg-icons/editor/drag-handle.js create mode 100644 svg-icons/editor/format-align-center.js create mode 100644 svg-icons/editor/format-align-justify.js create mode 100644 svg-icons/editor/format-align-left.js create mode 100644 svg-icons/editor/format-align-right.js create mode 100644 svg-icons/editor/format-bold.js create mode 100644 svg-icons/editor/format-clear.js create mode 100644 svg-icons/editor/format-color-fill.js create mode 100644 svg-icons/editor/format-color-reset.js create mode 100644 svg-icons/editor/format-color-text.js create mode 100644 svg-icons/editor/format-indent-decrease.js create mode 100644 svg-icons/editor/format-indent-increase.js create mode 100644 svg-icons/editor/format-italic.js create mode 100644 svg-icons/editor/format-line-spacing.js create mode 100644 svg-icons/editor/format-list-bulleted.js create mode 100644 svg-icons/editor/format-list-numbered.js create mode 100644 svg-icons/editor/format-paint.js create mode 100644 svg-icons/editor/format-quote.js create mode 100644 svg-icons/editor/format-shapes.js create mode 100644 svg-icons/editor/format-size.js create mode 100644 svg-icons/editor/format-strikethrough.js create mode 100644 svg-icons/editor/format-textdirection-l-to-r.js create mode 100644 svg-icons/editor/format-textdirection-r-to-l.js create mode 100644 svg-icons/editor/format-underlined.js create mode 100644 svg-icons/editor/functions.js create mode 100644 svg-icons/editor/highlight.js create mode 100644 svg-icons/editor/insert-chart.js create mode 100644 svg-icons/editor/insert-comment.js create mode 100644 svg-icons/editor/insert-drive-file.js create mode 100644 svg-icons/editor/insert-emoticon.js create mode 100644 svg-icons/editor/insert-invitation.js create mode 100644 svg-icons/editor/insert-link.js create mode 100644 svg-icons/editor/insert-photo.js create mode 100644 svg-icons/editor/linear-scale.js create mode 100644 svg-icons/editor/merge-type.js create mode 100644 svg-icons/editor/mode-comment.js create mode 100644 svg-icons/editor/mode-edit.js create mode 100644 svg-icons/editor/monetization-on.js create mode 100644 svg-icons/editor/money-off.js create mode 100644 svg-icons/editor/multiline-chart.js create mode 100644 svg-icons/editor/pie-chart-outlined.js create mode 100644 svg-icons/editor/pie-chart.js create mode 100644 svg-icons/editor/publish.js create mode 100644 svg-icons/editor/short-text.js create mode 100644 svg-icons/editor/show-chart.js create mode 100644 svg-icons/editor/space-bar.js create mode 100644 svg-icons/editor/strikethrough-s.js create mode 100644 svg-icons/editor/text-fields.js create mode 100644 svg-icons/editor/title.js create mode 100644 svg-icons/editor/vertical-align-bottom.js create mode 100644 svg-icons/editor/vertical-align-center.js create mode 100644 svg-icons/editor/vertical-align-top.js create mode 100644 svg-icons/editor/wrap-text.js create mode 100644 svg-icons/file/attachment.js create mode 100644 svg-icons/file/cloud-circle.js create mode 100644 svg-icons/file/cloud-done.js create mode 100644 svg-icons/file/cloud-download.js create mode 100644 svg-icons/file/cloud-off.js create mode 100644 svg-icons/file/cloud-queue.js create mode 100644 svg-icons/file/cloud-upload.js create mode 100644 svg-icons/file/cloud.js create mode 100644 svg-icons/file/create-new-folder.js create mode 100644 svg-icons/file/file-download.js create mode 100644 svg-icons/file/file-upload.js create mode 100644 svg-icons/file/folder-open.js create mode 100644 svg-icons/file/folder-shared.js create mode 100644 svg-icons/file/folder.js create mode 100644 svg-icons/hardware/cast-connected.js create mode 100644 svg-icons/hardware/cast.js create mode 100644 svg-icons/hardware/computer.js create mode 100644 svg-icons/hardware/desktop-mac.js create mode 100644 svg-icons/hardware/desktop-windows.js create mode 100644 svg-icons/hardware/developer-board.js create mode 100644 svg-icons/hardware/device-hub.js create mode 100644 svg-icons/hardware/devices-other.js create mode 100644 svg-icons/hardware/dock.js create mode 100644 svg-icons/hardware/gamepad.js create mode 100644 svg-icons/hardware/headset-mic.js create mode 100644 svg-icons/hardware/headset.js create mode 100644 svg-icons/hardware/keyboard-arrow-down.js create mode 100644 svg-icons/hardware/keyboard-arrow-left.js create mode 100644 svg-icons/hardware/keyboard-arrow-right.js create mode 100644 svg-icons/hardware/keyboard-arrow-up.js create mode 100644 svg-icons/hardware/keyboard-backspace.js create mode 100644 svg-icons/hardware/keyboard-capslock.js create mode 100644 svg-icons/hardware/keyboard-hide.js create mode 100644 svg-icons/hardware/keyboard-return.js create mode 100644 svg-icons/hardware/keyboard-tab.js create mode 100644 svg-icons/hardware/keyboard-voice.js create mode 100644 svg-icons/hardware/keyboard.js create mode 100644 svg-icons/hardware/laptop-chromebook.js create mode 100644 svg-icons/hardware/laptop-mac.js create mode 100644 svg-icons/hardware/laptop-windows.js create mode 100644 svg-icons/hardware/laptop.js create mode 100644 svg-icons/hardware/memory.js create mode 100644 svg-icons/hardware/mouse.js create mode 100644 svg-icons/hardware/phone-android.js create mode 100644 svg-icons/hardware/phone-iphone.js create mode 100644 svg-icons/hardware/phonelink-off.js create mode 100644 svg-icons/hardware/phonelink.js create mode 100644 svg-icons/hardware/power-input.js create mode 100644 svg-icons/hardware/router.js create mode 100644 svg-icons/hardware/scanner.js create mode 100644 svg-icons/hardware/security.js create mode 100644 svg-icons/hardware/sim-card.js create mode 100644 svg-icons/hardware/smartphone.js create mode 100644 svg-icons/hardware/speaker-group.js create mode 100644 svg-icons/hardware/speaker.js create mode 100644 svg-icons/hardware/tablet-android.js create mode 100644 svg-icons/hardware/tablet-mac.js create mode 100644 svg-icons/hardware/tablet.js create mode 100644 svg-icons/hardware/toys.js create mode 100644 svg-icons/hardware/tv.js create mode 100644 svg-icons/hardware/videogame-asset.js create mode 100644 svg-icons/hardware/watch.js create mode 100644 svg-icons/image/add-a-photo.js create mode 100644 svg-icons/image/add-to-photos.js create mode 100644 svg-icons/image/adjust.js create mode 100644 svg-icons/image/assistant-photo.js create mode 100644 svg-icons/image/assistant.js create mode 100644 svg-icons/image/audiotrack.js create mode 100644 svg-icons/image/blur-circular.js create mode 100644 svg-icons/image/blur-linear.js create mode 100644 svg-icons/image/blur-off.js create mode 100644 svg-icons/image/blur-on.js create mode 100644 svg-icons/image/brightness-1.js create mode 100644 svg-icons/image/brightness-2.js create mode 100644 svg-icons/image/brightness-3.js create mode 100644 svg-icons/image/brightness-4.js create mode 100644 svg-icons/image/brightness-5.js create mode 100644 svg-icons/image/brightness-6.js create mode 100644 svg-icons/image/brightness-7.js create mode 100644 svg-icons/image/broken-image.js create mode 100644 svg-icons/image/brush.js create mode 100644 svg-icons/image/burst-mode.js create mode 100644 svg-icons/image/camera-alt.js create mode 100644 svg-icons/image/camera-front.js create mode 100644 svg-icons/image/camera-rear.js create mode 100644 svg-icons/image/camera-roll.js create mode 100644 svg-icons/image/camera.js create mode 100644 svg-icons/image/center-focus-strong.js create mode 100644 svg-icons/image/center-focus-weak.js create mode 100644 svg-icons/image/collections-bookmark.js create mode 100644 svg-icons/image/collections.js create mode 100644 svg-icons/image/color-lens.js create mode 100644 svg-icons/image/colorize.js create mode 100644 svg-icons/image/compare.js create mode 100644 svg-icons/image/control-point-duplicate.js create mode 100644 svg-icons/image/control-point.js create mode 100644 svg-icons/image/crop-16-9.js create mode 100644 svg-icons/image/crop-3-2.js create mode 100644 svg-icons/image/crop-5-4.js create mode 100644 svg-icons/image/crop-7-5.js create mode 100644 svg-icons/image/crop-din.js create mode 100644 svg-icons/image/crop-free.js create mode 100644 svg-icons/image/crop-landscape.js create mode 100644 svg-icons/image/crop-original.js create mode 100644 svg-icons/image/crop-portrait.js create mode 100644 svg-icons/image/crop-rotate.js create mode 100644 svg-icons/image/crop-square.js create mode 100644 svg-icons/image/crop.js create mode 100644 svg-icons/image/dehaze.js create mode 100644 svg-icons/image/details.js create mode 100644 svg-icons/image/edit.js create mode 100644 svg-icons/image/exposure-neg-1.js create mode 100644 svg-icons/image/exposure-neg-2.js create mode 100644 svg-icons/image/exposure-plus-1.js create mode 100644 svg-icons/image/exposure-plus-2.js create mode 100644 svg-icons/image/exposure-zero.js create mode 100644 svg-icons/image/exposure.js create mode 100644 svg-icons/image/filter-1.js create mode 100644 svg-icons/image/filter-2.js create mode 100644 svg-icons/image/filter-3.js create mode 100644 svg-icons/image/filter-4.js create mode 100644 svg-icons/image/filter-5.js create mode 100644 svg-icons/image/filter-6.js create mode 100644 svg-icons/image/filter-7.js create mode 100644 svg-icons/image/filter-8.js create mode 100644 svg-icons/image/filter-9-plus.js create mode 100644 svg-icons/image/filter-9.js create mode 100644 svg-icons/image/filter-b-and-w.js create mode 100644 svg-icons/image/filter-center-focus.js create mode 100644 svg-icons/image/filter-drama.js create mode 100644 svg-icons/image/filter-frames.js create mode 100644 svg-icons/image/filter-hdr.js create mode 100644 svg-icons/image/filter-none.js create mode 100644 svg-icons/image/filter-tilt-shift.js create mode 100644 svg-icons/image/filter-vintage.js create mode 100644 svg-icons/image/filter.js create mode 100644 svg-icons/image/flare.js create mode 100644 svg-icons/image/flash-auto.js create mode 100644 svg-icons/image/flash-off.js create mode 100644 svg-icons/image/flash-on.js create mode 100644 svg-icons/image/flip.js create mode 100644 svg-icons/image/gradient.js create mode 100644 svg-icons/image/grain.js create mode 100644 svg-icons/image/grid-off.js create mode 100644 svg-icons/image/grid-on.js create mode 100644 svg-icons/image/hdr-off.js create mode 100644 svg-icons/image/hdr-on.js create mode 100644 svg-icons/image/hdr-strong.js create mode 100644 svg-icons/image/hdr-weak.js create mode 100644 svg-icons/image/healing.js create mode 100644 svg-icons/image/image-aspect-ratio.js create mode 100644 svg-icons/image/image.js create mode 100644 svg-icons/image/iso.js create mode 100644 svg-icons/image/landscape.js create mode 100644 svg-icons/image/leak-add.js create mode 100644 svg-icons/image/leak-remove.js create mode 100644 svg-icons/image/lens.js create mode 100644 svg-icons/image/linked-camera.js create mode 100644 svg-icons/image/looks-3.js create mode 100644 svg-icons/image/looks-4.js create mode 100644 svg-icons/image/looks-5.js create mode 100644 svg-icons/image/looks-6.js create mode 100644 svg-icons/image/looks-one.js create mode 100644 svg-icons/image/looks-two.js create mode 100644 svg-icons/image/looks.js create mode 100644 svg-icons/image/loupe.js create mode 100644 svg-icons/image/monochrome-photos.js create mode 100644 svg-icons/image/movie-creation.js create mode 100644 svg-icons/image/movie-filter.js create mode 100644 svg-icons/image/music-note.js create mode 100644 svg-icons/image/nature-people.js create mode 100644 svg-icons/image/nature.js create mode 100644 svg-icons/image/navigate-before.js create mode 100644 svg-icons/image/navigate-next.js create mode 100644 svg-icons/image/palette.js create mode 100644 svg-icons/image/panorama-fish-eye.js create mode 100644 svg-icons/image/panorama-horizontal.js create mode 100644 svg-icons/image/panorama-vertical.js create mode 100644 svg-icons/image/panorama-wide-angle.js create mode 100644 svg-icons/image/panorama.js create mode 100644 svg-icons/image/photo-album.js create mode 100644 svg-icons/image/photo-camera.js create mode 100644 svg-icons/image/photo-filter.js create mode 100644 svg-icons/image/photo-library.js create mode 100644 svg-icons/image/photo-size-select-actual.js create mode 100644 svg-icons/image/photo-size-select-large.js create mode 100644 svg-icons/image/photo-size-select-small.js create mode 100644 svg-icons/image/photo.js create mode 100644 svg-icons/image/picture-as-pdf.js create mode 100644 svg-icons/image/portrait.js create mode 100644 svg-icons/image/remove-red-eye.js create mode 100644 svg-icons/image/rotate-90-degrees-ccw.js create mode 100644 svg-icons/image/rotate-left.js create mode 100644 svg-icons/image/rotate-right.js create mode 100644 svg-icons/image/slideshow.js create mode 100644 svg-icons/image/straighten.js create mode 100644 svg-icons/image/style.js create mode 100644 svg-icons/image/switch-camera.js create mode 100644 svg-icons/image/switch-video.js create mode 100644 svg-icons/image/tag-faces.js create mode 100644 svg-icons/image/texture.js create mode 100644 svg-icons/image/timelapse.js create mode 100644 svg-icons/image/timer-10.js create mode 100644 svg-icons/image/timer-3.js create mode 100644 svg-icons/image/timer-off.js create mode 100644 svg-icons/image/timer.js create mode 100644 svg-icons/image/tonality.js create mode 100644 svg-icons/image/transform.js create mode 100644 svg-icons/image/tune.js create mode 100644 svg-icons/image/view-comfy.js create mode 100644 svg-icons/image/view-compact.js create mode 100644 svg-icons/image/vignette.js create mode 100644 svg-icons/image/wb-auto.js create mode 100644 svg-icons/image/wb-cloudy.js create mode 100644 svg-icons/image/wb-incandescent.js create mode 100644 svg-icons/image/wb-iridescent.js create mode 100644 svg-icons/image/wb-sunny.js create mode 100644 svg-icons/index.es.js create mode 100644 svg-icons/index.js create mode 100644 svg-icons/maps/add-location.js create mode 100644 svg-icons/maps/beenhere.js create mode 100644 svg-icons/maps/directions-bike.js create mode 100644 svg-icons/maps/directions-boat.js create mode 100644 svg-icons/maps/directions-bus.js create mode 100644 svg-icons/maps/directions-car.js create mode 100644 svg-icons/maps/directions-railway.js create mode 100644 svg-icons/maps/directions-run.js create mode 100644 svg-icons/maps/directions-subway.js create mode 100644 svg-icons/maps/directions-transit.js create mode 100644 svg-icons/maps/directions-walk.js create mode 100644 svg-icons/maps/directions.js create mode 100644 svg-icons/maps/edit-location.js create mode 100644 svg-icons/maps/ev-station.js create mode 100644 svg-icons/maps/flight.js create mode 100644 svg-icons/maps/hotel.js create mode 100644 svg-icons/maps/layers-clear.js create mode 100644 svg-icons/maps/layers.js create mode 100644 svg-icons/maps/local-activity.js create mode 100644 svg-icons/maps/local-airport.js create mode 100644 svg-icons/maps/local-atm.js create mode 100644 svg-icons/maps/local-bar.js create mode 100644 svg-icons/maps/local-cafe.js create mode 100644 svg-icons/maps/local-car-wash.js create mode 100644 svg-icons/maps/local-convenience-store.js create mode 100644 svg-icons/maps/local-dining.js create mode 100644 svg-icons/maps/local-drink.js create mode 100644 svg-icons/maps/local-florist.js create mode 100644 svg-icons/maps/local-gas-station.js create mode 100644 svg-icons/maps/local-grocery-store.js create mode 100644 svg-icons/maps/local-hospital.js create mode 100644 svg-icons/maps/local-hotel.js create mode 100644 svg-icons/maps/local-laundry-service.js create mode 100644 svg-icons/maps/local-library.js create mode 100644 svg-icons/maps/local-mall.js create mode 100644 svg-icons/maps/local-movies.js create mode 100644 svg-icons/maps/local-offer.js create mode 100644 svg-icons/maps/local-parking.js create mode 100644 svg-icons/maps/local-pharmacy.js create mode 100644 svg-icons/maps/local-phone.js create mode 100644 svg-icons/maps/local-pizza.js create mode 100644 svg-icons/maps/local-play.js create mode 100644 svg-icons/maps/local-post-office.js create mode 100644 svg-icons/maps/local-printshop.js create mode 100644 svg-icons/maps/local-see.js create mode 100644 svg-icons/maps/local-shipping.js create mode 100644 svg-icons/maps/local-taxi.js create mode 100644 svg-icons/maps/map.js create mode 100644 svg-icons/maps/my-location.js create mode 100644 svg-icons/maps/navigation.js create mode 100644 svg-icons/maps/near-me.js create mode 100644 svg-icons/maps/person-pin-circle.js create mode 100644 svg-icons/maps/person-pin.js create mode 100644 svg-icons/maps/pin-drop.js create mode 100644 svg-icons/maps/place.js create mode 100644 svg-icons/maps/rate-review.js create mode 100644 svg-icons/maps/restaurant-menu.js create mode 100644 svg-icons/maps/restaurant.js create mode 100644 svg-icons/maps/satellite.js create mode 100644 svg-icons/maps/store-mall-directory.js create mode 100644 svg-icons/maps/streetview.js create mode 100644 svg-icons/maps/subway.js create mode 100644 svg-icons/maps/terrain.js create mode 100644 svg-icons/maps/traffic.js create mode 100644 svg-icons/maps/train.js create mode 100644 svg-icons/maps/tram.js create mode 100644 svg-icons/maps/transfer-within-a-station.js create mode 100644 svg-icons/maps/zoom-out-map.js create mode 100644 svg-icons/navigation-arrow-drop-right.js create mode 100644 svg-icons/navigation/apps.js create mode 100644 svg-icons/navigation/arrow-back.js create mode 100644 svg-icons/navigation/arrow-downward.js create mode 100644 svg-icons/navigation/arrow-drop-down-circle.js create mode 100644 svg-icons/navigation/arrow-drop-down.js create mode 100644 svg-icons/navigation/arrow-drop-up.js create mode 100644 svg-icons/navigation/arrow-forward.js create mode 100644 svg-icons/navigation/arrow-upward.js create mode 100644 svg-icons/navigation/cancel.js create mode 100644 svg-icons/navigation/check.js create mode 100644 svg-icons/navigation/chevron-left.js create mode 100644 svg-icons/navigation/chevron-right.js create mode 100644 svg-icons/navigation/close.js create mode 100644 svg-icons/navigation/expand-less.js create mode 100644 svg-icons/navigation/expand-more.js create mode 100644 svg-icons/navigation/first-page.js create mode 100644 svg-icons/navigation/fullscreen-exit.js create mode 100644 svg-icons/navigation/fullscreen.js create mode 100644 svg-icons/navigation/last-page.js create mode 100644 svg-icons/navigation/menu.js create mode 100644 svg-icons/navigation/more-horiz.js create mode 100644 svg-icons/navigation/more-vert.js create mode 100644 svg-icons/navigation/refresh.js create mode 100644 svg-icons/navigation/subdirectory-arrow-left.js create mode 100644 svg-icons/navigation/subdirectory-arrow-right.js create mode 100644 svg-icons/navigation/unfold-less.js create mode 100644 svg-icons/navigation/unfold-more.js create mode 100644 svg-icons/notification/adb.js create mode 100644 svg-icons/notification/airline-seat-flat-angled.js create mode 100644 svg-icons/notification/airline-seat-flat.js create mode 100644 svg-icons/notification/airline-seat-individual-suite.js create mode 100644 svg-icons/notification/airline-seat-legroom-extra.js create mode 100644 svg-icons/notification/airline-seat-legroom-normal.js create mode 100644 svg-icons/notification/airline-seat-legroom-reduced.js create mode 100644 svg-icons/notification/airline-seat-recline-extra.js create mode 100644 svg-icons/notification/airline-seat-recline-normal.js create mode 100644 svg-icons/notification/bluetooth-audio.js create mode 100644 svg-icons/notification/confirmation-number.js create mode 100644 svg-icons/notification/disc-full.js create mode 100644 svg-icons/notification/do-not-disturb-alt.js create mode 100644 svg-icons/notification/do-not-disturb-off.js create mode 100644 svg-icons/notification/do-not-disturb-on.js create mode 100644 svg-icons/notification/do-not-disturb.js create mode 100644 svg-icons/notification/drive-eta.js create mode 100644 svg-icons/notification/enhanced-encryption.js create mode 100644 svg-icons/notification/event-available.js create mode 100644 svg-icons/notification/event-busy.js create mode 100644 svg-icons/notification/event-note.js create mode 100644 svg-icons/notification/folder-special.js create mode 100644 svg-icons/notification/live-tv.js create mode 100644 svg-icons/notification/mms.js create mode 100644 svg-icons/notification/more.js create mode 100644 svg-icons/notification/network-check.js create mode 100644 svg-icons/notification/network-locked.js create mode 100644 svg-icons/notification/no-encryption.js create mode 100644 svg-icons/notification/ondemand-video.js create mode 100644 svg-icons/notification/personal-video.js create mode 100644 svg-icons/notification/phone-bluetooth-speaker.js create mode 100644 svg-icons/notification/phone-forwarded.js create mode 100644 svg-icons/notification/phone-in-talk.js create mode 100644 svg-icons/notification/phone-locked.js create mode 100644 svg-icons/notification/phone-missed.js create mode 100644 svg-icons/notification/phone-paused.js create mode 100644 svg-icons/notification/power.js create mode 100644 svg-icons/notification/priority-high.js create mode 100644 svg-icons/notification/rv-hookup.js create mode 100644 svg-icons/notification/sd-card.js create mode 100644 svg-icons/notification/sim-card-alert.js create mode 100644 svg-icons/notification/sms-failed.js create mode 100644 svg-icons/notification/sms.js create mode 100644 svg-icons/notification/sync-disabled.js create mode 100644 svg-icons/notification/sync-problem.js create mode 100644 svg-icons/notification/sync.js create mode 100644 svg-icons/notification/system-update.js create mode 100644 svg-icons/notification/tap-and-play.js create mode 100644 svg-icons/notification/time-to-leave.js create mode 100644 svg-icons/notification/vibration.js create mode 100644 svg-icons/notification/voice-chat.js create mode 100644 svg-icons/notification/vpn-lock.js create mode 100644 svg-icons/notification/wc.js create mode 100644 svg-icons/notification/wifi.js create mode 100644 svg-icons/places/ac-unit.js create mode 100644 svg-icons/places/airport-shuttle.js create mode 100644 svg-icons/places/all-inclusive.js create mode 100644 svg-icons/places/beach-access.js create mode 100644 svg-icons/places/business-center.js create mode 100644 svg-icons/places/casino.js create mode 100644 svg-icons/places/child-care.js create mode 100644 svg-icons/places/child-friendly.js create mode 100644 svg-icons/places/fitness-center.js create mode 100644 svg-icons/places/free-breakfast.js create mode 100644 svg-icons/places/golf-course.js create mode 100644 svg-icons/places/hot-tub.js create mode 100644 svg-icons/places/kitchen.js create mode 100644 svg-icons/places/pool.js create mode 100644 svg-icons/places/room-service.js create mode 100644 svg-icons/places/rv-hookup.js create mode 100644 svg-icons/places/smoke-free.js create mode 100644 svg-icons/places/smoking-rooms.js create mode 100644 svg-icons/places/spa.js create mode 100644 svg-icons/social/cake.js create mode 100644 svg-icons/social/domain.js create mode 100644 svg-icons/social/group-add.js create mode 100644 svg-icons/social/group.js create mode 100644 svg-icons/social/location-city.js create mode 100644 svg-icons/social/mood-bad.js create mode 100644 svg-icons/social/mood.js create mode 100644 svg-icons/social/notifications-active.js create mode 100644 svg-icons/social/notifications-none.js create mode 100644 svg-icons/social/notifications-off.js create mode 100644 svg-icons/social/notifications-paused.js create mode 100644 svg-icons/social/notifications.js create mode 100644 svg-icons/social/pages.js create mode 100644 svg-icons/social/party-mode.js create mode 100644 svg-icons/social/people-outline.js create mode 100644 svg-icons/social/people.js create mode 100644 svg-icons/social/person-add.js create mode 100644 svg-icons/social/person-outline.js create mode 100644 svg-icons/social/person.js create mode 100644 svg-icons/social/plus-one.js create mode 100644 svg-icons/social/poll.js create mode 100644 svg-icons/social/public.js create mode 100644 svg-icons/social/school.js create mode 100644 svg-icons/social/sentiment-dissatisfied.js create mode 100644 svg-icons/social/sentiment-neutral.js create mode 100644 svg-icons/social/sentiment-satisfied.js create mode 100644 svg-icons/social/sentiment-very-dissatisfied.js create mode 100644 svg-icons/social/sentiment-very-satisfied.js create mode 100644 svg-icons/social/share.js create mode 100644 svg-icons/social/whatshot.js create mode 100644 svg-icons/toggle/check-box-outline-blank.js create mode 100644 svg-icons/toggle/check-box.js create mode 100644 svg-icons/toggle/indeterminate-check-box.js create mode 100644 svg-icons/toggle/radio-button-checked.js create mode 100644 svg-icons/toggle/radio-button-unchecked.js create mode 100644 svg-icons/toggle/star-border.js create mode 100644 svg-icons/toggle/star-half.js create mode 100644 svg-icons/toggle/star.js delete mode 100644 test/README.md delete mode 100644 test/index.js delete mode 100644 test/integration/.eslintrc.yaml delete mode 100644 test/integration/AppBar/AppBar.spec.js delete mode 100644 test/integration/AutoComplete/AutoComplete.spec.js delete mode 100644 test/integration/Card/Card.spec.js delete mode 100644 test/integration/List/ListItem.spec.js delete mode 100644 test/integration/List/selectableList.spec.js delete mode 100644 test/integration/RenderToLayer/RenderToLayer.spec.js delete mode 100644 test/integration/Stepper/VerticalLinearStepper.js delete mode 100644 test/integration/Stepper/VerticalLinearStepper.spec.js delete mode 100644 test/integration/Table/ArrayHeaderTable.js delete mode 100644 test/integration/Table/ArrayHeaderTable.spec.js delete mode 100644 test/integration/Table/MultiSelectTable.js delete mode 100644 test/integration/Table/MultiSelectTable.spec.js delete mode 100644 test/integration/Toolbar/ToolbarGroup.spec.js delete mode 100644 test/integration/fixtures/inject-theme.js delete mode 100644 test/integration/fixtures/react-stub-context.js delete mode 100644 test/integration/theming.spec.js delete mode 100644 test/karma.conf.js delete mode 100644 test/karma.tests.js delete mode 100644 test/utils/consoleError.js delete mode 100644 test/utils/dom.js delete mode 100644 test/watch.js delete mode 100644 tools/material-ui-babel-preset-es2015.js create mode 100644 utils/autoPrefix.js create mode 100644 utils/autoprefixer.js create mode 100644 utils/autoprefixerDynamic.js create mode 100644 utils/autoprefixerStatic.js create mode 100644 utils/callOnce.js create mode 100644 utils/childUtils.js create mode 100644 utils/colorManipulator.js create mode 100644 utils/deprecatedExport.js create mode 100644 utils/deprecatedPropType.js create mode 100644 utils/dom.js create mode 100644 utils/events.js create mode 100644 utils/propTypes.js create mode 100644 utils/rtl.js create mode 100644 utils/withWidth.js diff --git a/AppBar/AppBar.js b/AppBar/AppBar.js new file mode 100644 index 00000000000000..e40bbd875652b9 --- /dev/null +++ b/AppBar/AppBar.js @@ -0,0 +1,384 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _keys = require('babel-runtime/core-js/object/keys'); + +var _keys2 = _interopRequireDefault(_keys); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +exports.getStyles = getStyles; + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _IconButton = require('../IconButton'); + +var _IconButton2 = _interopRequireDefault(_IconButton); + +var _menu = require('../svg-icons/navigation/menu'); + +var _menu2 = _interopRequireDefault(_menu); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var _context$muiTheme = context.muiTheme, + appBar = _context$muiTheme.appBar, + iconButtonSize = _context$muiTheme.button.iconButtonSize, + zIndex = _context$muiTheme.zIndex; + + + var flatButtonSize = 36; + + var styles = { + root: { + position: 'relative', + zIndex: zIndex.appBar, + width: '100%', + display: 'flex', + backgroundColor: appBar.color, + paddingLeft: appBar.padding, + paddingRight: appBar.padding + }, + title: { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + margin: 0, + paddingTop: 0, + letterSpacing: 0, + fontSize: 24, + fontWeight: appBar.titleFontWeight, + color: appBar.textColor, + height: appBar.height, + lineHeight: appBar.height + 'px' + }, + mainElement: { + boxFlex: 1, + flex: '1' + }, + iconButtonStyle: { + marginTop: (appBar.height - iconButtonSize) / 2, + marginRight: 8, + marginLeft: -16 + }, + iconButtonIconStyle: { + fill: appBar.textColor, + color: appBar.textColor + }, + flatButton: { + color: appBar.textColor, + marginTop: (iconButtonSize - flatButtonSize) / 2 + 1 + } + }; + + return styles; +} + +var AppBar = function (_Component) { + (0, _inherits3.default)(AppBar, _Component); + + function AppBar() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, AppBar); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = AppBar.__proto__ || (0, _getPrototypeOf2.default)(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.handleClickLeftIconButton = function (event) { + if (_this.props.onLeftIconButtonClick) { + _this.props.onLeftIconButtonClick(event); + } + }, _this.handleClickRightIconButton = function (event) { + if (_this.props.onRightIconButtonClick) { + _this.props.onRightIconButtonClick(event); + } + }, _this.handleTitleClick = function (event) { + if (_this.props.onTitleClick) { + _this.props.onTitleClick(event); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(AppBar, [{ + key: 'componentDidMount', + value: function componentDidMount() { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!this.props.iconElementLeft || !this.props.iconClassNameLeft, 'Material-UI: Properties iconElementLeft\n and iconClassNameLeft cannot be simultaneously defined. Please use one or the other.') : void 0; + + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!this.props.iconElementRight || !this.props.iconClassNameRight, 'Material-UI: Properties iconElementRight\n and iconClassNameRight cannot be simultaneously defined. Please use one or the other.') : void 0; + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + title = _props.title, + titleStyle = _props.titleStyle, + iconStyleLeft = _props.iconStyleLeft, + iconStyleRight = _props.iconStyleRight, + onTitleClick = _props.onTitleClick, + showMenuIconButton = _props.showMenuIconButton, + iconElementLeft = _props.iconElementLeft, + iconElementRight = _props.iconElementRight, + iconClassNameLeft = _props.iconClassNameLeft, + iconClassNameRight = _props.iconClassNameRight, + onLeftIconButtonClick = _props.onLeftIconButtonClick, + onRightIconButtonClick = _props.onRightIconButtonClick, + className = _props.className, + style = _props.style, + zDepth = _props.zDepth, + children = _props.children, + other = (0, _objectWithoutProperties3.default)(_props, ['title', 'titleStyle', 'iconStyleLeft', 'iconStyleRight', 'onTitleClick', 'showMenuIconButton', 'iconElementLeft', 'iconElementRight', 'iconClassNameLeft', 'iconClassNameRight', 'onLeftIconButtonClick', 'onRightIconButtonClick', 'className', 'style', 'zDepth', 'children']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var menuElementLeft = void 0; + var menuElementRight = void 0; + + // If the title is a string, wrap in an h1 tag. + // If not, wrap in a div tag. + var titleComponent = typeof title === 'string' || title instanceof String ? 'h1' : 'div'; + + var titleElement = _react2.default.createElement(titleComponent, { + onClick: this.handleTitleClick, + style: prepareStyles((0, _simpleAssign2.default)(styles.title, styles.mainElement, titleStyle)) + }, title); + + var iconLeftStyle = (0, _simpleAssign2.default)({}, styles.iconButtonStyle, iconStyleLeft); + + if (showMenuIconButton) { + if (iconElementLeft) { + var iconElementLeftProps = {}; + + if (iconElementLeft.type.muiName === 'IconButton') { + var iconElemLeftChildren = iconElementLeft.props.children; + var iconButtonIconStyle = !(iconElemLeftChildren && iconElemLeftChildren.props && iconElemLeftChildren.props.color) ? styles.iconButtonIconStyle : null; + + iconElementLeftProps.iconStyle = (0, _simpleAssign2.default)({}, iconButtonIconStyle, iconElementLeft.props.iconStyle); + } + + if (!iconElementLeft.props.onClick && this.props.onLeftIconButtonClick) { + iconElementLeftProps.onClick = this.handleClickLeftIconButton; + } + + menuElementLeft = _react2.default.createElement( + 'div', + { style: prepareStyles(iconLeftStyle) }, + (0, _keys2.default)(iconElementLeftProps).length > 0 ? (0, _react.cloneElement)(iconElementLeft, iconElementLeftProps) : iconElementLeft + ); + } else { + menuElementLeft = _react2.default.createElement( + _IconButton2.default, + { + style: iconLeftStyle, + iconStyle: styles.iconButtonIconStyle, + iconClassName: iconClassNameLeft, + onClick: this.handleClickLeftIconButton + }, + iconClassNameLeft ? '' : _react2.default.createElement(_menu2.default, { style: (0, _simpleAssign2.default)({}, styles.iconButtonIconStyle) }) + ); + } + } + + var iconRightStyle = (0, _simpleAssign2.default)({}, styles.iconButtonStyle, { + marginRight: -16, + marginLeft: 'auto' + }, iconStyleRight); + + if (iconElementRight) { + var iconElementRightProps = {}; + + switch (iconElementRight.type.muiName) { + case 'IconMenu': + case 'IconButton': + var iconElemRightChildren = iconElementRight.props.children; + var _iconButtonIconStyle = !(iconElemRightChildren && iconElemRightChildren.props && iconElemRightChildren.props.color) ? styles.iconButtonIconStyle : null; + + iconElementRightProps.iconStyle = (0, _simpleAssign2.default)({}, _iconButtonIconStyle, iconElementRight.props.iconStyle); + break; + + case 'FlatButton': + iconElementRightProps.style = (0, _simpleAssign2.default)({}, styles.flatButton, iconElementRight.props.style); + break; + + default: + } + + if (!iconElementRight.props.onClick && this.props.onRightIconButtonClick) { + iconElementRightProps.onClick = this.handleClickRightIconButton; + } + + menuElementRight = _react2.default.createElement( + 'div', + { style: prepareStyles(iconRightStyle) }, + (0, _keys2.default)(iconElementRightProps).length > 0 ? (0, _react.cloneElement)(iconElementRight, iconElementRightProps) : iconElementRight + ); + } else if (iconClassNameRight) { + menuElementRight = _react2.default.createElement(_IconButton2.default, { + style: iconRightStyle, + iconStyle: styles.iconButtonIconStyle, + iconClassName: iconClassNameRight, + onClick: this.handleClickRightIconButton + }); + } + + return _react2.default.createElement( + _Paper2.default, + (0, _extends3.default)({}, other, { + rounded: false, + className: className, + style: (0, _simpleAssign2.default)({}, styles.root, style), + zDepth: zDepth + }), + menuElementLeft, + titleElement, + menuElementRight, + children + ); + } + }]); + return AppBar; +}(_react.Component); + +AppBar.muiName = 'AppBar'; +AppBar.defaultProps = { + showMenuIconButton: true, + title: '', + zDepth: 1 +}; +AppBar.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? AppBar.propTypes = { + /** + * Can be used to render a tab inside an app bar for instance. + */ + children: _propTypes2.default.node, + /** + * Applied to the app bar's root element. + */ + className: _propTypes2.default.string, + /** + * The classname of the icon on the left of the app bar. + * If you are using a stylesheet for your icons, enter the class name for the icon to be used here. + */ + iconClassNameLeft: _propTypes2.default.string, + /** + * Similiar to the iconClassNameLeft prop except that + * it applies to the icon displayed on the right of the app bar. + */ + iconClassNameRight: _propTypes2.default.string, + /** + * The custom element to be displayed on the left side of the + * app bar such as an SvgIcon. + */ + iconElementLeft: _propTypes2.default.element, + /** + * Similiar to the iconElementLeft prop except that this element is displayed on the right of the app bar. + */ + iconElementRight: _propTypes2.default.element, + /** + * Override the inline-styles of the element displayed on the left side of the app bar. + */ + iconStyleLeft: _propTypes2.default.object, + /** + * Override the inline-styles of the element displayed on the right side of the app bar. + */ + iconStyleRight: _propTypes2.default.object, + /** + * Callback function for when the left icon is selected via a click. + * + * @param {object} event Click event targeting the left `IconButton`. + */ + onLeftIconButtonClick: _propTypes2.default.func, + /** + * Callback function for when the right icon is selected via a click. + * + * @param {object} event Click event targeting the right `IconButton`. + */ + onRightIconButtonClick: _propTypes2.default.func, + /** + * Callback function for when the title text is selected via a click. + * + * @param {object} event Click event targeting the `title` node. + */ + onTitleClick: _propTypes2.default.func, + /** + * Determines whether or not to display the Menu icon next to the title. + * Setting this prop to false will hide the icon. + */ + showMenuIconButton: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The title to display on the app bar. + */ + title: _propTypes2.default.node, + /** + * Override the inline-styles of the app bar's title element. + */ + titleStyle: _propTypes2.default.object, + /** + * The zDepth of the component. + * The shadow of the app bar is also dependent on this property. + */ + zDepth: _propTypes4.default.zDepth +} : void 0; +exports.default = AppBar; \ No newline at end of file diff --git a/AppBar/index.js b/AppBar/index.js new file mode 100644 index 00000000000000..a46a3cd5ec6bd2 --- /dev/null +++ b/AppBar/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _AppBar = require('./AppBar'); + +var _AppBar2 = _interopRequireDefault(_AppBar); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _AppBar2.default; \ No newline at end of file diff --git a/AutoComplete/AutoComplete.js b/AutoComplete/AutoComplete.js new file mode 100644 index 00000000000000..c7cfe5ef46924e --- /dev/null +++ b/AutoComplete/AutoComplete.js @@ -0,0 +1,707 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _typeof2 = require('babel-runtime/helpers/typeof'); + +var _typeof3 = _interopRequireDefault(_typeof2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _TextField = require('../TextField'); + +var _TextField2 = _interopRequireDefault(_TextField); + +var _Menu = require('../Menu'); + +var _Menu2 = _interopRequireDefault(_Menu); + +var _MenuItem = require('../MenuItem'); + +var _MenuItem2 = _interopRequireDefault(_MenuItem); + +var _Divider = require('../Divider'); + +var _Divider2 = _interopRequireDefault(_Divider); + +var _Popover = require('../Popover/Popover'); + +var _Popover2 = _interopRequireDefault(_Popover); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var anchorEl = state.anchorEl; + var fullWidth = props.fullWidth; + + + var styles = { + root: { + display: 'inline-block', + position: 'relative', + width: fullWidth ? '100%' : 256 + }, + menu: { + width: '100%' + }, + list: { + display: 'block', + width: fullWidth ? '100%' : 256 + }, + innerDiv: { + overflow: 'hidden' + } + }; + + if (anchorEl && fullWidth) { + styles.popover = { + width: anchorEl.clientWidth + }; + } + + return styles; +} + +var AutoComplete = function (_Component) { + (0, _inherits3.default)(AutoComplete, _Component); + + function AutoComplete() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, AutoComplete); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = AutoComplete.__proto__ || (0, _getPrototypeOf2.default)(AutoComplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + anchorEl: null, + focusTextField: true, + open: false, + searchText: undefined + }, _this.handleRequestClose = function () { + // Only take into account the Popover clickAway when we are + // not focusing the TextField. + if (!_this.state.focusTextField) { + _this.close(); + } + }, _this.handleMouseDown = function (event) { + // Keep the TextField focused + event.preventDefault(); + }, _this.handleItemClick = function (event, child) { + var dataSource = _this.props.dataSource; + var index = parseInt(child.key, 10); + var chosenRequest = dataSource[index]; + var searchText = _this.chosenRequestText(chosenRequest); + + var updateInput = function updateInput() { + return _this.props.onUpdateInput(searchText, _this.props.dataSource, { + source: 'click' + }); + }; + _this.timerClickCloseId = function () { + return setTimeout(function () { + _this.timerClickCloseId = null; + _this.close(); + _this.props.onNewRequest(chosenRequest, index); + }, _this.props.menuCloseDelay); + }; + + if (typeof _this.props.searchText !== 'undefined') { + updateInput(); + _this.timerClickCloseId(); + } else { + _this.setState({ + searchText: searchText + }, function () { + updateInput(); + _this.timerClickCloseId(); + }); + } + }, _this.chosenRequestText = function (chosenRequest) { + if (typeof chosenRequest === 'string') { + return chosenRequest; + } else { + return chosenRequest[_this.props.dataSourceConfig.text]; + } + }, _this.handleEscKeyDown = function () { + _this.close(); + }, _this.handleKeyDown = function (event) { + if (_this.props.onKeyDown) _this.props.onKeyDown(event); + + switch ((0, _keycode2.default)(event)) { + case 'enter': + _this.close(); + var searchText = _this.state.searchText; + if (searchText !== '') { + _this.props.onNewRequest(searchText, -1); + } + break; + + case 'esc': + _this.close(); + break; + + case 'down': + event.preventDefault(); + _this.setState({ + open: true, + focusTextField: false, + anchorEl: _reactDom2.default.findDOMNode(_this.refs.searchTextField) + }); + break; + + default: + break; + } + }, _this.handleChange = function (event) { + var searchText = event.target.value; + + // Make sure that we have a new searchText. + // Fix an issue with a Cordova Webview + if (searchText === _this.state.searchText) { + return; + } + + var state = { + open: true, + anchorEl: _reactDom2.default.findDOMNode(_this.refs.searchTextField) + }; + + if (_this.props.searchText === undefined) { + state.searchText = searchText; + } + + _this.setState(state); + + _this.props.onUpdateInput(searchText, _this.props.dataSource, { + source: 'change' + }); + }, _this.handleBlur = function (event) { + if (_this.state.focusTextField && _this.timerClickCloseId === null) { + _this.timerBlurClose = setTimeout(function () { + _this.close(); + }, 0); + } + + if (_this.props.onBlur) { + _this.props.onBlur(event); + } + }, _this.handleFocus = function (event) { + if (!_this.state.open && _this.props.openOnFocus) { + _this.setState({ + open: true, + anchorEl: _reactDom2.default.findDOMNode(_this.refs.searchTextField) + }); + } + + _this.setState({ + focusTextField: true + }); + + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(AutoComplete, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.requestsList = []; + this.setState({ + open: this.props.open, + searchText: this.props.searchText || '' + }); + this.timerClickCloseId = null; + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.searchText !== nextProps.searchText) { + this.setState({ + searchText: nextProps.searchText + }); + } + if (this.props.open !== nextProps.open) { + this.setState({ + open: nextProps.open, + anchorEl: _reactDom2.default.findDOMNode(this.refs.searchTextField) + }); + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.timerClickCloseId); + clearTimeout(this.timerBlurClose); + } + }, { + key: 'close', + value: function close() { + this.setState({ + open: false, + anchorEl: null + }); + + if (this.props.onClose) { + this.props.onClose(); + } + } + }, { + key: 'blur', + value: function blur() { + this.refs.searchTextField.blur(); + } + }, { + key: 'focus', + value: function focus() { + this.refs.searchTextField.focus(); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + anchorOrigin = _props.anchorOrigin, + animated = _props.animated, + animation = _props.animation, + dataSource = _props.dataSource, + dataSourceConfig = _props.dataSourceConfig, + disableFocusRipple = _props.disableFocusRipple, + errorStyle = _props.errorStyle, + floatingLabelText = _props.floatingLabelText, + filter = _props.filter, + fullWidth = _props.fullWidth, + style = _props.style, + hintText = _props.hintText, + maxSearchResults = _props.maxSearchResults, + menuCloseDelay = _props.menuCloseDelay, + textFieldStyle = _props.textFieldStyle, + menuStyle = _props.menuStyle, + menuProps = _props.menuProps, + listStyle = _props.listStyle, + targetOrigin = _props.targetOrigin, + onBlur = _props.onBlur, + onClose = _props.onClose, + onFocus = _props.onFocus, + onKeyDown = _props.onKeyDown, + onNewRequest = _props.onNewRequest, + onUpdateInput = _props.onUpdateInput, + openOnFocus = _props.openOnFocus, + popoverProps = _props.popoverProps, + searchTextProp = _props.searchText, + other = (0, _objectWithoutProperties3.default)(_props, ['anchorOrigin', 'animated', 'animation', 'dataSource', 'dataSourceConfig', 'disableFocusRipple', 'errorStyle', 'floatingLabelText', 'filter', 'fullWidth', 'style', 'hintText', 'maxSearchResults', 'menuCloseDelay', 'textFieldStyle', 'menuStyle', 'menuProps', 'listStyle', 'targetOrigin', 'onBlur', 'onClose', 'onFocus', 'onKeyDown', 'onNewRequest', 'onUpdateInput', 'openOnFocus', 'popoverProps', 'searchText']); + + var _ref2 = popoverProps || {}, + popoverStyle = _ref2.style, + popoverOther = (0, _objectWithoutProperties3.default)(_ref2, ['style']); + + var _state = this.state, + open = _state.open, + anchorEl = _state.anchorEl, + searchText = _state.searchText, + focusTextField = _state.focusTextField; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + var requestsList = []; + + dataSource.every(function (item, index) { + switch (typeof item === 'undefined' ? 'undefined' : (0, _typeof3.default)(item)) { + case 'string': + if (filter(searchText, item, item)) { + requestsList.push({ + text: item, + value: _react2.default.createElement(_MenuItem2.default, { + innerDivStyle: styles.innerDiv, + value: item, + primaryText: item, + disableFocusRipple: disableFocusRipple, + key: index + }) + }); + } + break; + + case 'object': + if (item && typeof item[_this2.props.dataSourceConfig.text] === 'string') { + var itemText = item[_this2.props.dataSourceConfig.text]; + if (!_this2.props.filter(searchText, itemText, item)) break; + + var itemValue = item[_this2.props.dataSourceConfig.value]; + if (itemValue && itemValue.type && (itemValue.type.muiName === _MenuItem2.default.muiName || itemValue.type.muiName === _Divider2.default.muiName)) { + requestsList.push({ + text: itemText, + value: _react2.default.cloneElement(itemValue, { + key: index, + disableFocusRipple: disableFocusRipple + }) + }); + } else { + requestsList.push({ + text: itemText, + value: _react2.default.createElement(_MenuItem2.default, { + innerDivStyle: styles.innerDiv, + primaryText: itemText, + disableFocusRipple: disableFocusRipple, + key: index + }) + }); + } + } + break; + + default: + // Do nothing + } + + return !(maxSearchResults && maxSearchResults > 0 && requestsList.length === maxSearchResults); + }); + + this.requestsList = requestsList; + + var menu = open && requestsList.length > 0 && _react2.default.createElement( + _Menu2.default, + (0, _extends3.default)({ + ref: 'menu', + autoWidth: false, + disableAutoFocus: focusTextField, + onEscKeyDown: this.handleEscKeyDown, + initiallyKeyboardFocused: true, + onItemClick: this.handleItemClick, + onMouseDown: this.handleMouseDown, + style: (0, _simpleAssign2.default)(styles.menu, menuStyle), + listStyle: (0, _simpleAssign2.default)(styles.list, listStyle) + }, menuProps), + requestsList.map(function (i) { + return i.value; + }) + ); + + return _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, + _react2.default.createElement(_TextField2.default, (0, _extends3.default)({ + ref: 'searchTextField', + autoComplete: 'off', + onBlur: this.handleBlur, + onFocus: this.handleFocus, + onKeyDown: this.handleKeyDown, + floatingLabelText: floatingLabelText, + hintText: hintText, + fullWidth: fullWidth, + multiLine: false, + errorStyle: errorStyle, + style: textFieldStyle + }, other, { + // value and onChange are idiomatic properties often leaked. + // We prevent their overrides in order to reduce potential bugs. + value: searchText, + onChange: this.handleChange + })), + _react2.default.createElement( + _Popover2.default, + (0, _extends3.default)({ + style: (0, _simpleAssign2.default)({}, styles.popover, popoverStyle), + canAutoPosition: false, + anchorOrigin: anchorOrigin, + targetOrigin: targetOrigin, + open: open, + anchorEl: anchorEl, + useLayerForClickAway: false, + onRequestClose: this.handleRequestClose, + animated: animated, + animation: animation + }, popoverOther), + menu + ) + ); + } + }]); + return AutoComplete; +}(_react.Component); + +AutoComplete.defaultProps = { + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left' + }, + animated: true, + dataSourceConfig: { + text: 'text', + value: 'value' + }, + disableFocusRipple: true, + filter: function filter(searchText, key) { + return searchText !== '' && key.indexOf(searchText) !== -1; + }, + fullWidth: false, + open: false, + openOnFocus: false, + onUpdateInput: function onUpdateInput() {}, + onNewRequest: function onNewRequest() {}, + menuCloseDelay: 300, + targetOrigin: { + vertical: 'top', + horizontal: 'left' + } +}; +AutoComplete.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? AutoComplete.propTypes = { + /** + * Location of the anchor for the auto complete. + */ + anchorOrigin: _propTypes4.default.origin, + /** + * If true, the auto complete is animated as it is toggled. + */ + animated: _propTypes2.default.bool, + /** + * Override the default animation component used. + */ + animation: _propTypes2.default.func, + /** + * Array of strings or nodes used to populate the list. + */ + dataSource: _propTypes2.default.array.isRequired, + /** + * Config for objects list dataSource. + * + * @typedef {Object} dataSourceConfig + * + * @property {string} text `dataSource` element key used to find a string to be matched for search + * and shown as a `TextField` input value after choosing the result. + * @property {string} value `dataSource` element key used to find a string to be shown in search results. + */ + dataSourceConfig: _propTypes2.default.object, + /** + * Disables focus ripple when true. + */ + disableFocusRipple: _propTypes2.default.bool, + /** + * Override style prop for error. + */ + errorStyle: _propTypes2.default.object, + /** + * The error content to display. + */ + errorText: _propTypes2.default.node, + /** + * Callback function used to filter the auto complete. + * + * @param {string} searchText The text to search for within `dataSource`. + * @param {string} key `dataSource` element, or `text` property on that element if it's not a string. + * @returns {boolean} `true` indicates the auto complete list will include `key` when the input is `searchText`. + */ + filter: _propTypes2.default.func, + /** + * The content to use for adding floating label element. + */ + floatingLabelText: _propTypes2.default.node, + /** + * If true, the field receives the property `width: 100%`. + */ + fullWidth: _propTypes2.default.bool, + /** + * The hint content to display. + */ + hintText: _propTypes2.default.node, + /** + * Override style for list. + */ + listStyle: _propTypes2.default.object, + /** + * The max number of search results to be shown. + * By default it shows all the items which matches filter. + */ + maxSearchResults: _propTypes2.default.number, + /** + * Delay for closing time of the menu. + */ + menuCloseDelay: _propTypes2.default.number, + /** + * Props to be passed to menu. + */ + menuProps: _propTypes2.default.object, + /** + * Override style for menu. + */ + menuStyle: _propTypes2.default.object, + /** @ignore */ + onBlur: _propTypes2.default.func, + /** + * Callback function fired when the menu is closed. + */ + onClose: _propTypes2.default.func, + /** @ignore */ + onFocus: _propTypes2.default.func, + /** @ignore */ + onKeyDown: _propTypes2.default.func, + /** + * Callback function that is fired when a list item is selected, or enter is pressed in the `TextField`. + * + * @param {string} chosenRequest Either the `TextField` input value, if enter is pressed in the `TextField`, + * or the dataSource object corresponding to the list item that was selected. + * @param {number} index The index in `dataSource` of the list item selected, or `-1` if enter is pressed in the + * `TextField`. + */ + onNewRequest: _propTypes2.default.func, + /** + * Callback function that is fired when the user updates the `TextField`. + * + * @param {string} searchText The auto-complete's `searchText` value. + * @param {array} dataSource The auto-complete's `dataSource` array. + * @param {object} params Additional information linked the update. + */ + onUpdateInput: _propTypes2.default.func, + /** + * Auto complete menu is open if true. + */ + open: _propTypes2.default.bool, + /** + * If true, the list item is showed when a focus event triggers. + */ + openOnFocus: _propTypes2.default.bool, + /** + * Props to be passed to popover. + */ + popoverProps: _propTypes2.default.object, + /** + * Text being input to auto complete. + */ + searchText: _propTypes2.default.string, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Origin for location of target. + */ + targetOrigin: _propTypes4.default.origin, + /** + * Override the inline-styles of AutoComplete's TextField element. + */ + textFieldStyle: _propTypes2.default.object +} : void 0; + + +AutoComplete.levenshteinDistance = function (searchText, key) { + var current = []; + var prev = void 0; + var value = void 0; + + for (var i = 0; i <= key.length; i++) { + for (var j = 0; j <= searchText.length; j++) { + if (i && j) { + if (searchText.charAt(j - 1) === key.charAt(i - 1)) value = prev;else value = Math.min(current[j], current[j - 1], prev) + 1; + } else { + value = i + j; + } + prev = current[j]; + current[j] = value; + } + } + return current.pop(); +}; + +AutoComplete.noFilter = function () { + return true; +}; + +AutoComplete.defaultFilter = AutoComplete.caseSensitiveFilter = function (searchText, key) { + return searchText !== '' && key.indexOf(searchText) !== -1; +}; + +AutoComplete.caseInsensitiveFilter = function (searchText, key) { + return key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1; +}; + +AutoComplete.levenshteinDistanceFilter = function (distanceLessThan) { + if (distanceLessThan === undefined) { + return AutoComplete.levenshteinDistance; + } else if (typeof distanceLessThan !== 'number') { + throw 'Error: AutoComplete.levenshteinDistanceFilter is a filter generator, not a filter!'; + } + + return function (s, k) { + return AutoComplete.levenshteinDistance(s, k) < distanceLessThan; + }; +}; + +AutoComplete.fuzzyFilter = function (searchText, key) { + var compareString = key.toLowerCase(); + searchText = searchText.toLowerCase(); + + var searchTextIndex = 0; + for (var index = 0; index < key.length; index++) { + if (compareString[index] === searchText[searchTextIndex]) { + searchTextIndex += 1; + } + } + + return searchTextIndex === searchText.length; +}; + +AutoComplete.Item = _MenuItem2.default; +AutoComplete.Divider = _Divider2.default; + +exports.default = AutoComplete; \ No newline at end of file diff --git a/AutoComplete/index.js b/AutoComplete/index.js new file mode 100644 index 00000000000000..4d8f4d4b334a86 --- /dev/null +++ b/AutoComplete/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _AutoComplete = require('./AutoComplete'); + +var _AutoComplete2 = _interopRequireDefault(_AutoComplete); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _AutoComplete2.default; \ No newline at end of file diff --git a/Avatar/Avatar.js b/Avatar/Avatar.js new file mode 100644 index 00000000000000..478cdfdf0570f2 --- /dev/null +++ b/Avatar/Avatar.js @@ -0,0 +1,170 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var backgroundColor = props.backgroundColor, + color = props.color, + size = props.size; + var avatar = context.muiTheme.avatar; + + + var styles = { + root: { + color: color || avatar.color, + backgroundColor: backgroundColor || avatar.backgroundColor, + userSelect: 'none', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: size / 2, + borderRadius: '50%', + height: size, + width: size + }, + icon: { + color: color || avatar.color, + width: size * 0.6, + height: size * 0.6, + fontSize: size * 0.6, + margin: size * 0.2 + } + }; + + return styles; +} + +var Avatar = function (_Component) { + (0, _inherits3.default)(Avatar, _Component); + + function Avatar() { + (0, _classCallCheck3.default)(this, Avatar); + return (0, _possibleConstructorReturn3.default)(this, (Avatar.__proto__ || (0, _getPrototypeOf2.default)(Avatar)).apply(this, arguments)); + } + + (0, _createClass3.default)(Avatar, [{ + key: 'render', + value: function render() { + var _props = this.props, + backgroundColor = _props.backgroundColor, + icon = _props.icon, + src = _props.src, + style = _props.style, + className = _props.className, + other = (0, _objectWithoutProperties3.default)(_props, ['backgroundColor', 'icon', 'src', 'style', 'className']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + if (src) { + return _react2.default.createElement('img', (0, _extends3.default)({ + style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) + }, other, { + src: src, + className: className + })); + } else { + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { + style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)), + className: className + }), + icon && _react2.default.cloneElement(icon, { + color: styles.icon.color, + style: (0, _simpleAssign2.default)(styles.icon, icon.props.style) + }), + this.props.children + ); + } + } + }]); + return Avatar; +}(_react.Component); + +Avatar.muiName = 'Avatar'; +Avatar.defaultProps = { + size: 40 +}; +Avatar.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Avatar.propTypes = { + /** + * The backgroundColor of the avatar. Does not apply to image avatars. + */ + backgroundColor: _propTypes2.default.string, + /** + * Can be used, for instance, to render a letter inside the avatar. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root `div` or `img` element. + */ + className: _propTypes2.default.string, + /** + * The icon or letter's color. + */ + color: _propTypes2.default.string, + /** + * This is the SvgIcon or FontIcon to be used inside the avatar. + */ + icon: _propTypes2.default.element, + /** + * This is the size of the avatar in pixels. + */ + size: _propTypes2.default.number, + /** + * If passed in, this component will render an img element. Otherwise, a div will be rendered. + */ + src: _propTypes2.default.string, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Avatar; \ No newline at end of file diff --git a/Avatar/index.js b/Avatar/index.js new file mode 100644 index 00000000000000..c3882ec8f123b4 --- /dev/null +++ b/Avatar/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Avatar = require('./Avatar'); + +var _Avatar2 = _interopRequireDefault(_Avatar); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Avatar2.default; \ No newline at end of file diff --git a/Badge/Badge.js b/Badge/Badge.js new file mode 100644 index 00000000000000..6be901ff0675ac --- /dev/null +++ b/Badge/Badge.js @@ -0,0 +1,174 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var primary = props.primary, + secondary = props.secondary; + var badge = context.muiTheme.badge; + + + var badgeBackgroundColor = void 0; + var badgeTextColor = void 0; + + if (primary) { + badgeBackgroundColor = badge.primaryColor; + badgeTextColor = badge.primaryTextColor; + } else if (secondary) { + badgeBackgroundColor = badge.secondaryColor; + badgeTextColor = badge.secondaryTextColor; + } else { + badgeBackgroundColor = badge.color; + badgeTextColor = badge.textColor; + } + + var radius = 12; + var radius2x = Math.floor(2 * radius); + + return { + root: { + position: 'relative', + display: 'inline-block', + padding: radius2x + 'px ' + radius2x + 'px ' + radius + 'px ' + radius + 'px' + }, + badge: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'center', + alignContent: 'center', + alignItems: 'center', + position: 'absolute', + top: 0, + right: 0, + fontWeight: badge.fontWeight, + fontSize: radius, + width: radius2x, + height: radius2x, + borderRadius: '50%', + backgroundColor: badgeBackgroundColor, + color: badgeTextColor + } + }; +} + +var Badge = function (_Component) { + (0, _inherits3.default)(Badge, _Component); + + function Badge() { + (0, _classCallCheck3.default)(this, Badge); + return (0, _possibleConstructorReturn3.default)(this, (Badge.__proto__ || (0, _getPrototypeOf2.default)(Badge)).apply(this, arguments)); + } + + (0, _createClass3.default)(Badge, [{ + key: 'render', + value: function render() { + var _props = this.props, + badgeContent = _props.badgeContent, + badgeStyle = _props.badgeStyle, + children = _props.children, + primary = _props.primary, + secondary = _props.secondary, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['badgeContent', 'badgeStyle', 'children', 'primary', 'secondary', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), + children, + _react2.default.createElement( + 'span', + { style: prepareStyles((0, _simpleAssign2.default)({}, styles.badge, badgeStyle)) }, + badgeContent + ) + ); + } + }]); + return Badge; +}(_react.Component); + +Badge.defaultProps = { + primary: false, + secondary: false +}; +Badge.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Badge.propTypes = { + /** + * This is the content rendered within the badge. + */ + badgeContent: _propTypes2.default.node.isRequired, + /** + * Override the inline-styles of the badge element. + */ + badgeStyle: _propTypes2.default.object, + /** + * The badge will be added relativelty to this node. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * If true, the badge will use the primary badge colors. + */ + primary: _propTypes2.default.bool, + /** + * If true, the badge will use the secondary badge colors. + */ + secondary: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Badge; \ No newline at end of file diff --git a/Badge/index.js b/Badge/index.js new file mode 100644 index 00000000000000..f23dcf949ba9f1 --- /dev/null +++ b/Badge/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Badge = require('./Badge'); + +var _Badge2 = _interopRequireDefault(_Badge); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Badge2.default; \ No newline at end of file diff --git a/BottomNavigation/BottomNavigation.js b/BottomNavigation/BottomNavigation.js new file mode 100644 index 00000000000000..f3ec5464d808f3 --- /dev/null +++ b/BottomNavigation/BottomNavigation.js @@ -0,0 +1,97 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var bottomNavigation = context.muiTheme.bottomNavigation; + + + var styles = { + root: { + position: 'relative', + width: '100%', + display: 'flex', + justifyContent: 'center', + backgroundColor: bottomNavigation.backgroundColor, + height: bottomNavigation.height + }, + item: { + flex: '1' + } + }; + + return styles; +} + +var BottomNavigation = function BottomNavigation(props, context) { + var children = props.children, + style = props.style, + selectedIndex = props.selectedIndex, + other = (0, _objectWithoutProperties3.default)(props, ['children', 'style', 'selectedIndex']); + var prepareStyles = context.muiTheme.prepareStyles; + + var styles = getStyles(props, context); + + var preparedChildren = _react.Children.map(children, function (child, index) { + if (!child) { + return null; + } + + return (0, _react.cloneElement)(child, { + style: (0, _simpleAssign2.default)({}, styles.item, child.props.style), + selected: index === selectedIndex + }); + }); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), + preparedChildren + ); +}; + +process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes = { + /** + * The `BottomNavigationItem`s to populate the element with. + */ + children: _propTypes2.default.node, + /** + * The index of the currently selected navigation item. + */ + selectedIndex: _propTypes2.default.number, + /** + * @ignore + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; + +BottomNavigation.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; + +exports.default = BottomNavigation; \ No newline at end of file diff --git a/BottomNavigation/BottomNavigationItem.js b/BottomNavigation/BottomNavigationItem.js new file mode 100644 index 00000000000000..b4f6cae0432858 --- /dev/null +++ b/BottomNavigation/BottomNavigationItem.js @@ -0,0 +1,114 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var selected = props.selected; + var bottomNavigation = context.muiTheme.bottomNavigation; + + + var color = selected ? bottomNavigation.selectedColor : bottomNavigation.unselectedColor; + + var styles = { + root: { + transition: 'padding-top 0.3s', + paddingTop: selected ? 6 : 8, + paddingBottom: 10, + paddingLeft: 12, + paddingRight: 12, + minWidth: 80, + maxWidth: 168 + }, + label: { + fontSize: selected ? bottomNavigation.selectedFontSize : bottomNavigation.unselectedFontSize, + transition: 'color 0.3s, font-size 0.3s', + color: color + }, + icon: { + display: 'block', + /** + * Used to ensure SVG icons are centered + */ + width: '100%' + }, + iconColor: color + }; + + return styles; +} + +var BottomNavigationItem = function BottomNavigationItem(props, context) { + var label = props.label, + icon = props.icon, + style = props.style, + other = (0, _objectWithoutProperties3.default)(props, ['label', 'icon', 'style']); + var prepareStyles = context.muiTheme.prepareStyles; + + var styles = getStyles(props, context); + + var styledIcon = (0, _react.cloneElement)(icon, { + style: (0, _simpleAssign2.default)({}, styles.icon, icon.props.style), + color: icon.props.color || styles.iconColor + }); + + return _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, { style: (0, _simpleAssign2.default)({}, styles.root, style) }), + styledIcon, + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.label) }, + label + ) + ); +}; + +process.env.NODE_ENV !== "production" ? BottomNavigationItem.propTypes = { + /** + * Set the icon representing the view for this item. + */ + icon: _propTypes2.default.node, + /** + * Set the label describing the view for this item. + */ + label: _propTypes2.default.node, + /** + * @ignore + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; + +BottomNavigationItem.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; + +exports.default = BottomNavigationItem; \ No newline at end of file diff --git a/BottomNavigation/index.js b/BottomNavigation/index.js new file mode 100644 index 00000000000000..71e266c4299206 --- /dev/null +++ b/BottomNavigation/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.BottomNavigationItem = exports.BottomNavigation = undefined; + +var _BottomNavigation2 = require('./BottomNavigation'); + +var _BottomNavigation3 = _interopRequireDefault(_BottomNavigation2); + +var _BottomNavigationItem2 = require('./BottomNavigationItem'); + +var _BottomNavigationItem3 = _interopRequireDefault(_BottomNavigationItem2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.BottomNavigation = _BottomNavigation3.default; +exports.BottomNavigationItem = _BottomNavigationItem3.default; +exports.default = _BottomNavigation3.default; \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 819b16052e2a32..00000000000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,12 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -Don't be an arse! - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] - -[homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 221e86ebca683b..00000000000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,101 +0,0 @@ -# Contributing - -If you're reading this, you're awesome! Thank you for helping us make this project great and being a part of the Material-UI community. Here are a few guidelines that will help you along the way. - -## Asking Questions - -For how-to questions and other non-issues, please use [StackOverflow](http://stackoverflow.com/questions/tagged/material-ui) or [Gitter](https://gitter.im/callemall/material-ui) chat instead of Github issues. There is a StackOverflow tag called "material-ui" that you can use to tag your questions. - -## Opening an Issue - -If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported or fixed](https://github.com/callemall/material-ui/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed). You can search through existing issues and PRs to see if someone has reported one similar to yours. - -Next, create a new issue that briefly explains the problem, and provides a bit of background as to the circumstances that triggered it, and steps to reproduce it. - -For code issues please include: -* Material-UI version -* React version -* Browser version -* A code example or link to a repo, gist or running site. - -For visual or layout problems, images or animated gifs can help explain your issue. -It's even better with a live reproduction test case. Have a look at the [`ISSUE_TEMPLATE.md`](https://raw.githubusercontent.com/callemall/material-ui/master/.github/ISSUE_TEMPLATE.md) file for a live playground example. - -For feature requests please include a link to the relevant section of Material Design spec, or a screenshot. - -### Issue Guidelines - -Please begin the title with '[ComponentName]' where appropriate, and use a succint description. "doesn't work" doesn't help others find similar issues. - -Please don't group multiple topics into one issue, but instead each should be its own issue. - -And please don't just '+1' an issue. It spams the maintainers and doesn't help move the issue forward. - -## Submitting a Pull Request - -Material-UI is a community project, so pull requests are always welcome, but before working on a large change, it is best to open an issue first to discuss it with the maintainers. - -When in doubt, keep your pull requests small. To give a PR the best chance of getting accepted, don't bundle more than one feature or bug fix per pull request. It's always best to create two smaller PRs than one big one. - -As with issues, please begin the title with [ComponentName]. - -When adding new features or modifying existing code, please attempt to include tests to confirm the new behaviour. You can read more about our test setup [here](https://github.com/mui-org/material-ui/blob/v0.x/test/README.md). - -### Branch Structure - -All stable releases are tagged ([view tags](https://github.com/callemall/material-ui/tags)). At any given time, `master` represents the latest development version of the library. - -Work towards rebuilding Material-UI with a new styling system is underway on the `v1-alpha` branch. Please refer to the [roadmap](https://github.com/mui-org/material-ui/blob/v0.x/ROADMAP.md) for more details. - -#### `master` is unsafe - -We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. - - -## Getting started - -Please create a new branch from an up to date master on your fork. (Note, urgent hotfixes should be branched off the latest stable release rather than master) - -1. Fork the Material-UI repository on Github -2. Clone your fork to your local machine `git clone --depth 1 git@github.com:/material-ui.git` -(For the `v1-alpha` branch, add the `-b v1-alpha` flag to the above command.) -3. Create a branch `git checkout -b my-topic-branch` -4. Make your changes, lint, then push to github with `git push --set-upstream origin my-topic-branch`. -5. Visit github and make your pull request. - -If you have an existing local repository, please update it before you start, to minimise the chance of merge conflicts. -```js -git remote add upstream git@github.com:callemall/material-ui.git -git checkout master -git pull upstream master -git checkout -b my-topic-branch -npm update -``` - -### Testing the documentation site - -The documentation site is built with Material-UI, and contains examples of all the components. To get started: -```js -npm install -cd docs -npm install -npm start -``` -You can now access the documentation site [locally](http://localhost:3000). - -Test coverage is limited at present, but where possible, please add tests for any changes you make. Tests can be run with `npm run test`. - -### Coding style - -Please follow the coding style of the current code base. Material-UI uses eslint, so if possible, enable linting in your editor to get realtime feedback. Linting can be run manually with `npm run lint`. - -Finally, when you submit a pull request, linting is run again by Continuous Integration testing, but hopefully by then your code is already clean! - -## Roadmap - -To get a sense of where Material-UI is heading, or for ideas on where you could contribute, take a look at the [roadmap](https://github.com/mui-org/material-ui/blob/v0.x/ROADMAP.md) and the list of [Material Design components](https://github.com/callemall/material-ui/issues/2863). - - -## License - -By contributing your code to the callemall/material-ui GitHub repository, you agree to license your contribution under the MIT license. diff --git a/Card/Card.js b/Card/Card.js new file mode 100644 index 00000000000000..4614cf40051a91 --- /dev/null +++ b/Card/Card.js @@ -0,0 +1,219 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _CardExpandable = require('./CardExpandable'); + +var _CardExpandable2 = _interopRequireDefault(_CardExpandable); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var Card = function (_Component) { + (0, _inherits3.default)(Card, _Component); + + function Card() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Card); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Card.__proto__ || (0, _getPrototypeOf2.default)(Card)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + expanded: null + }, _this.handleExpanding = function (event) { + event.preventDefault(); + var newExpandedState = !_this.state.expanded; + // no automatic state update when the component is controlled + if (_this.props.expanded === null) { + _this.setState({ expanded: newExpandedState }); + } + if (_this.props.onExpandChange) { + _this.props.onExpandChange(newExpandedState); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Card, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + expanded: this.props.expanded === null ? this.props.initiallyExpanded === true : this.props.expanded + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + // update the state when the component is controlled. + if (nextProps.expanded !== null) this.setState({ expanded: nextProps.expanded }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + style = _props.style, + containerStyle = _props.containerStyle, + children = _props.children, + expandable = _props.expandable, + expandedProp = _props.expanded, + initiallyExpanded = _props.initiallyExpanded, + onExpandChange = _props.onExpandChange, + other = (0, _objectWithoutProperties3.default)(_props, ['style', 'containerStyle', 'children', 'expandable', 'expanded', 'initiallyExpanded', 'onExpandChange']); + + + var lastElement = void 0; + var expanded = this.state.expanded; + var newChildren = _react2.default.Children.map(children, function (currentChild) { + var doClone = false; + var newChild = undefined; + var newProps = {}; + var element = currentChild; + if (!currentChild || !currentChild.props) { + return null; + } + if (expanded === false && currentChild.props.expandable === true) return; + if (currentChild.props.actAsExpander === true) { + doClone = true; + newProps.onClick = _this2.handleExpanding; + newProps.style = (0, _simpleAssign2.default)({ cursor: 'pointer' }, currentChild.props.style); + } + if (currentChild.props.showExpandableButton === true) { + doClone = true; + newChild = _react2.default.createElement(_CardExpandable2.default, { + closeIcon: currentChild.props.closeIcon, + expanded: expanded, + onExpanding: _this2.handleExpanding, + openIcon: currentChild.props.openIcon, + iconStyle: currentChild.props.iconStyle + }); + } + if (doClone) { + element = _react2.default.cloneElement(currentChild, newProps, currentChild.props.children, newChild); + } + lastElement = element; + return element; + }, this); + + // If the last element is text or a title we should add + // 8px padding to the bottom of the card + var addBottomPadding = lastElement && (lastElement.type.muiName === 'CardText' || lastElement.type.muiName === 'CardTitle'); + + var mergedStyles = (0, _simpleAssign2.default)({ + zIndex: 1 + }, style); + var containerMergedStyles = (0, _simpleAssign2.default)({ + paddingBottom: addBottomPadding ? 8 : 0 + }, containerStyle); + + return _react2.default.createElement( + _Paper2.default, + (0, _extends3.default)({}, other, { style: mergedStyles }), + _react2.default.createElement( + 'div', + { style: containerMergedStyles }, + newChildren + ) + ); + } + }]); + return Card; +}(_react.Component); + +Card.defaultProps = { + expandable: false, + expanded: null, + initiallyExpanded: false +}; +process.env.NODE_ENV !== "production" ? Card.propTypes = { + /** + * Can be used to render elements inside the Card. + */ + children: _propTypes2.default.node, + /** + * Override the inline-styles of the container element. + */ + containerStyle: _propTypes2.default.object, + /** + * If true, this card component is expandable. Can be set on any child of the `Card` component. + */ + expandable: _propTypes2.default.bool, + /** + * Whether this card is expanded. + * If `true` or `false` the component is controlled. + * if `null` the component is uncontrolled. + */ + expanded: _propTypes2.default.bool, + /** + * Whether this card is initially expanded. + */ + initiallyExpanded: _propTypes2.default.bool, + /** + * Callback function fired when the `expandable` state of the card has changed. + * + * @param {boolean} newExpandedState Represents the new `expanded` state of the card. + */ + onExpandChange: _propTypes2.default.func, + /** + * If true, this card component will include a button to expand the card. `CardTitle`, + * `CardHeader` and `CardActions` implement `showExpandableButton`. Any child component + * of `Card` can implements `showExpandableButton` or forwards the property to a child + * component supporting it. + */ + showExpandableButton: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Card; \ No newline at end of file diff --git a/Card/CardActions.js b/Card/CardActions.js new file mode 100644 index 00000000000000..838e5babd06760 --- /dev/null +++ b/Card/CardActions.js @@ -0,0 +1,126 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles() { + return { + root: { + padding: 8, + position: 'relative' + }, + action: { + marginRight: 8 + } + }; +} + +var CardActions = function (_Component) { + (0, _inherits3.default)(CardActions, _Component); + + function CardActions() { + (0, _classCallCheck3.default)(this, CardActions); + return (0, _possibleConstructorReturn3.default)(this, (CardActions.__proto__ || (0, _getPrototypeOf2.default)(CardActions)).apply(this, arguments)); + } + + (0, _createClass3.default)(CardActions, [{ + key: 'render', + value: function render() { + var _props = this.props, + actAsExpander = _props.actAsExpander, + children = _props.children, + expandable = _props.expandable, + showExpandableButton = _props.showExpandableButton, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['actAsExpander', 'children', 'expandable', 'showExpandableButton', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var styledChildren = _react2.default.Children.map(children, function (child) { + if (_react2.default.isValidElement(child)) { + return _react2.default.cloneElement(child, { + style: (0, _simpleAssign2.default)({}, styles.action, child.props.style) + }); + } + }); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + styledChildren + ); + } + }]); + return CardActions; +}(_react.Component); + +CardActions.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CardActions.propTypes = { + /** + * If true, a click on this card component expands the card. + */ + actAsExpander: _propTypes2.default.bool, + /** + * Can be used to render elements inside the Card Action. + */ + children: _propTypes2.default.node, + /** + * If true, this card component is expandable. + */ + expandable: _propTypes2.default.bool, + /** + * If true, this card component will include a button to expand the card. + */ + showExpandableButton: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = CardActions; \ No newline at end of file diff --git a/Card/CardExpandable.js b/Card/CardExpandable.js new file mode 100644 index 00000000000000..ee514ff7becfa7 --- /dev/null +++ b/Card/CardExpandable.js @@ -0,0 +1,107 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _keyboardArrowUp = require('../svg-icons/hardware/keyboard-arrow-up'); + +var _keyboardArrowUp2 = _interopRequireDefault(_keyboardArrowUp); + +var _keyboardArrowDown = require('../svg-icons/hardware/keyboard-arrow-down'); + +var _keyboardArrowDown2 = _interopRequireDefault(_keyboardArrowDown); + +var _IconButton = require('../IconButton'); + +var _IconButton2 = _interopRequireDefault(_IconButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles() { + return { + root: { + top: 0, + bottom: 0, + right: 4, + margin: 'auto', + position: 'absolute' + } + }; +} + +var CardExpandable = function (_Component) { + (0, _inherits3.default)(CardExpandable, _Component); + + function CardExpandable() { + (0, _classCallCheck3.default)(this, CardExpandable); + return (0, _possibleConstructorReturn3.default)(this, (CardExpandable.__proto__ || (0, _getPrototypeOf2.default)(CardExpandable)).apply(this, arguments)); + } + + (0, _createClass3.default)(CardExpandable, [{ + key: 'render', + value: function render() { + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + _IconButton2.default, + { + style: (0, _simpleAssign2.default)(styles.root, this.props.style), + onClick: this.props.onExpanding, + iconStyle: this.props.iconStyle + }, + this.props.expanded ? this.props.openIcon : this.props.closeIcon + ); + } + }]); + return CardExpandable; +}(_react.Component); + +CardExpandable.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +CardExpandable.defaultProps = { + closeIcon: _react2.default.createElement(_keyboardArrowDown2.default, null), + openIcon: _react2.default.createElement(_keyboardArrowUp2.default, null) +}; +process.env.NODE_ENV !== "production" ? CardExpandable.propTypes = { + closeIcon: _propTypes2.default.node, + expanded: _propTypes2.default.bool, + iconStyle: _propTypes2.default.object, + onExpanding: _propTypes2.default.func.isRequired, + openIcon: _propTypes2.default.node, + style: _propTypes2.default.object +} : void 0; +exports.default = CardExpandable; \ No newline at end of file diff --git a/Card/CardHeader.js b/Card/CardHeader.js new file mode 100644 index 00000000000000..73991f36d50e0d --- /dev/null +++ b/Card/CardHeader.js @@ -0,0 +1,230 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Avatar = require('../Avatar'); + +var _Avatar2 = _interopRequireDefault(_Avatar); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var card = context.muiTheme.card; + + + return { + root: { + padding: 16, + fontWeight: card.fontWeight, + boxSizing: 'border-box', + position: 'relative', + whiteSpace: 'nowrap' + }, + text: { + display: 'inline-block', + verticalAlign: 'top', + whiteSpace: 'normal', + paddingRight: '90px' + }, + avatar: { + marginRight: 16 + }, + title: { + color: props.titleColor || card.titleColor, + display: 'block', + fontSize: 15 + }, + subtitle: { + color: props.subtitleColor || card.subtitleColor, + display: 'block', + fontSize: 14 + } + }; +} + +var CardHeader = function (_Component) { + (0, _inherits3.default)(CardHeader, _Component); + + function CardHeader() { + (0, _classCallCheck3.default)(this, CardHeader); + return (0, _possibleConstructorReturn3.default)(this, (CardHeader.__proto__ || (0, _getPrototypeOf2.default)(CardHeader)).apply(this, arguments)); + } + + (0, _createClass3.default)(CardHeader, [{ + key: 'render', + value: function render() { + var _props = this.props, + actAsExpander = _props.actAsExpander, + avatarProp = _props.avatar, + children = _props.children, + closeIcon = _props.closeIcon, + expandable = _props.expandable, + openIcon = _props.openIcon, + showExpandableButton = _props.showExpandableButton, + style = _props.style, + subtitle = _props.subtitle, + subtitleColor = _props.subtitleColor, + subtitleStyle = _props.subtitleStyle, + textStyle = _props.textStyle, + title = _props.title, + titleColor = _props.titleColor, + titleStyle = _props.titleStyle, + iconStyle = _props.iconStyle, + other = (0, _objectWithoutProperties3.default)(_props, ['actAsExpander', 'avatar', 'children', 'closeIcon', 'expandable', 'openIcon', 'showExpandableButton', 'style', 'subtitle', 'subtitleColor', 'subtitleStyle', 'textStyle', 'title', 'titleColor', 'titleStyle', 'iconStyle']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var avatar = avatarProp; + + if ((0, _react.isValidElement)(avatarProp)) { + avatar = _react2.default.cloneElement(avatar, { + style: (0, _simpleAssign2.default)(styles.avatar, avatar.props.style) + }); + } else if (avatar !== null) { + avatar = _react2.default.createElement(_Avatar2.default, { src: avatarProp, style: styles.avatar }); + } + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + avatar, + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.text, textStyle)) }, + _react2.default.createElement( + 'span', + { style: prepareStyles((0, _simpleAssign2.default)(styles.title, titleStyle)) }, + title + ), + _react2.default.createElement( + 'span', + { style: prepareStyles((0, _simpleAssign2.default)(styles.subtitle, subtitleStyle)) }, + subtitle + ) + ), + children + ); + } + }]); + return CardHeader; +}(_react.Component); + +CardHeader.muiName = 'CardHeader'; +CardHeader.defaultProps = { + avatar: null +}; +CardHeader.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CardHeader.propTypes = { + /** + * If true, a click on this card component expands the card. + */ + actAsExpander: _propTypes2.default.bool, + /** + * This is the [Avatar](/#/components/avatar) element to be displayed on the Card Header. + * If `avatar` is an `Avatar` or other element, it will be rendered. + * If `avatar` is a string, it will be used as the image `src` for an `Avatar`. + */ + avatar: _propTypes2.default.node, + /** + * Can be used to render elements inside the Card Header. + */ + children: _propTypes2.default.node, + /** + * Can be used to pass a closeIcon if you don't like the default expandable close Icon. + */ + closeIcon: _propTypes2.default.node, + /** + * If true, this card component is expandable. + */ + expandable: _propTypes2.default.bool, + /** + * Override the iconStyle of the Icon Button. + */ + iconStyle: _propTypes2.default.object, + /** + * Can be used to pass a openIcon if you don't like the default expandable open Icon. + */ + openIcon: _propTypes2.default.node, + /** + * If true, this card component will include a button to expand the card. + */ + showExpandableButton: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Can be used to render a subtitle in Card Header. + */ + subtitle: _propTypes2.default.node, + /** + * Override the subtitle color. + */ + subtitleColor: _propTypes2.default.string, + /** + * Override the inline-styles of the subtitle. + */ + subtitleStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the text. + */ + textStyle: _propTypes2.default.object, + /** + * Can be used to render a title in Card Header. + */ + title: _propTypes2.default.node, + /** + * Override the title color. + */ + titleColor: _propTypes2.default.string, + /** + * Override the inline-styles of the title. + */ + titleStyle: _propTypes2.default.object +} : void 0; +exports.default = CardHeader; \ No newline at end of file diff --git a/Card/CardMedia.js b/Card/CardMedia.js new file mode 100644 index 00000000000000..a69dda659d9bc9 --- /dev/null +++ b/Card/CardMedia.js @@ -0,0 +1,215 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var cardMedia = context.muiTheme.cardMedia; + + + return { + root: { + position: 'relative' + }, + overlayContainer: { + position: 'absolute', + top: 0, + bottom: 0, + right: 0, + left: 0 + }, + overlay: { + height: '100%', + position: 'relative' + }, + overlayContent: { + position: 'absolute', + bottom: 0, + right: 0, + left: 0, + paddingTop: 8, + background: cardMedia.overlayContentBackground + }, + media: {}, + mediaChild: { + verticalAlign: 'top', + maxWidth: '100%', + minWidth: '100%', + width: '100%' + } + }; +} + +var CardMedia = function (_Component) { + (0, _inherits3.default)(CardMedia, _Component); + + function CardMedia() { + (0, _classCallCheck3.default)(this, CardMedia); + return (0, _possibleConstructorReturn3.default)(this, (CardMedia.__proto__ || (0, _getPrototypeOf2.default)(CardMedia)).apply(this, arguments)); + } + + (0, _createClass3.default)(CardMedia, [{ + key: 'render', + value: function render() { + var _props = this.props, + actAsExpander = _props.actAsExpander, + children = _props.children, + expandable = _props.expandable, + mediaStyle = _props.mediaStyle, + overlay = _props.overlay, + overlayContainerStyle = _props.overlayContainerStyle, + overlayContentStyle = _props.overlayContentStyle, + overlayStyle = _props.overlayStyle, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['actAsExpander', 'children', 'expandable', 'mediaStyle', 'overlay', 'overlayContainerStyle', 'overlayContentStyle', 'overlayStyle', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var rootStyle = (0, _simpleAssign2.default)(styles.root, style); + var extendedMediaStyle = (0, _simpleAssign2.default)(styles.media, mediaStyle); + var extendedOverlayContainerStyle = (0, _simpleAssign2.default)(styles.overlayContainer, overlayContainerStyle); + var extendedOverlayContentStyle = (0, _simpleAssign2.default)(styles.overlayContent, overlayContentStyle); + var extendedOverlayStyle = (0, _simpleAssign2.default)(styles.overlay, overlayStyle); + var titleColor = this.context.muiTheme.cardMedia.titleColor; + var subtitleColor = this.context.muiTheme.cardMedia.subtitleColor; + var color = this.context.muiTheme.cardMedia.color; + + var styledChildren = _react2.default.Children.map(children, function (child) { + if (!child) { + return child; + } + + return _react2.default.cloneElement(child, { + style: prepareStyles((0, _simpleAssign2.default)({}, styles.mediaChild, child.props.style)) + }); + }); + + var overlayChildren = _react2.default.Children.map(overlay, function (child) { + var childMuiName = child && child.type ? child.type.muiName : null; + + if (childMuiName === 'CardHeader' || childMuiName === 'CardTitle') { + return _react2.default.cloneElement(child, { + titleColor: titleColor, + subtitleColor: subtitleColor + }); + } else if (childMuiName === 'CardText') { + return _react2.default.cloneElement(child, { + color: color + }); + } else { + return child; + } + }); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles(rootStyle) }), + _react2.default.createElement( + 'div', + { style: prepareStyles(extendedMediaStyle) }, + styledChildren + ), + overlay ? _react2.default.createElement( + 'div', + { style: prepareStyles(extendedOverlayContainerStyle) }, + _react2.default.createElement( + 'div', + { style: prepareStyles(extendedOverlayStyle) }, + _react2.default.createElement( + 'div', + { style: prepareStyles(extendedOverlayContentStyle) }, + overlayChildren + ) + ) + ) : '' + ); + } + }]); + return CardMedia; +}(_react.Component); + +CardMedia.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CardMedia.propTypes = { + /** + * If true, a click on this card component expands the card. + */ + actAsExpander: _propTypes2.default.bool, + /** + * Can be used to render elements inside the Card Media. + */ + children: _propTypes2.default.node, + /** + * If true, this card component is expandable. + */ + expandable: _propTypes2.default.bool, + /** + * Override the inline-styles of the Card Media. + */ + mediaStyle: _propTypes2.default.object, + /** + * Can be used to render overlay element in Card Media. + */ + overlay: _propTypes2.default.node, + /** + * Override the inline-styles of the overlay container. + */ + overlayContainerStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the overlay content. + */ + overlayContentStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the overlay element. + */ + overlayStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = CardMedia; \ No newline at end of file diff --git a/Card/CardText.js b/Card/CardText.js new file mode 100644 index 00000000000000..a72e2e075cd6f9 --- /dev/null +++ b/Card/CardText.js @@ -0,0 +1,121 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var cardText = context.muiTheme.cardText; + + + return { + root: { + padding: 16, + fontSize: 14, + color: props.color || cardText.textColor + } + }; +} + +var CardText = function (_Component) { + (0, _inherits3.default)(CardText, _Component); + + function CardText() { + (0, _classCallCheck3.default)(this, CardText); + return (0, _possibleConstructorReturn3.default)(this, (CardText.__proto__ || (0, _getPrototypeOf2.default)(CardText)).apply(this, arguments)); + } + + (0, _createClass3.default)(CardText, [{ + key: 'render', + value: function render() { + var _props = this.props, + actAsExpander = _props.actAsExpander, + children = _props.children, + color = _props.color, + expandable = _props.expandable, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['actAsExpander', 'children', 'color', 'expandable', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var rootStyle = (0, _simpleAssign2.default)(styles.root, style); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles(rootStyle) }), + children + ); + } + }]); + return CardText; +}(_react.Component); + +CardText.muiName = 'CardText'; +CardText.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CardText.propTypes = { + /** + * If true, a click on this card component expands the card. + */ + actAsExpander: _propTypes2.default.bool, + /** + * Can be used to render elements inside the Card Text. + */ + children: _propTypes2.default.node, + /** + * Override the CardText color. + */ + color: _propTypes2.default.string, + /** + * If true, this card component is expandable. + */ + expandable: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = CardText; \ No newline at end of file diff --git a/Card/CardTitle.js b/Card/CardTitle.js new file mode 100644 index 00000000000000..1c18a713999fbf --- /dev/null +++ b/Card/CardTitle.js @@ -0,0 +1,178 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var card = context.muiTheme.card; + + + return { + root: { + padding: 16, + position: 'relative' + }, + title: { + fontSize: 24, + color: props.titleColor || card.titleColor, + display: 'block', + lineHeight: '36px' + }, + subtitle: { + fontSize: 14, + color: props.subtitleColor || card.subtitleColor, + display: 'block' + } + }; +} + +var CardTitle = function (_Component) { + (0, _inherits3.default)(CardTitle, _Component); + + function CardTitle() { + (0, _classCallCheck3.default)(this, CardTitle); + return (0, _possibleConstructorReturn3.default)(this, (CardTitle.__proto__ || (0, _getPrototypeOf2.default)(CardTitle)).apply(this, arguments)); + } + + (0, _createClass3.default)(CardTitle, [{ + key: 'render', + value: function render() { + var _props = this.props, + actAsExpander = _props.actAsExpander, + children = _props.children, + closeIcon = _props.closeIcon, + expandable = _props.expandable, + showExpandableButton = _props.showExpandableButton, + style = _props.style, + subtitle = _props.subtitle, + subtitleColor = _props.subtitleColor, + subtitleStyle = _props.subtitleStyle, + title = _props.title, + titleColor = _props.titleColor, + titleStyle = _props.titleStyle, + other = (0, _objectWithoutProperties3.default)(_props, ['actAsExpander', 'children', 'closeIcon', 'expandable', 'showExpandableButton', 'style', 'subtitle', 'subtitleColor', 'subtitleStyle', 'title', 'titleColor', 'titleStyle']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var rootStyle = (0, _simpleAssign2.default)({}, styles.root, style); + var extendedTitleStyle = (0, _simpleAssign2.default)({}, styles.title, titleStyle); + var extendedSubtitleStyle = (0, _simpleAssign2.default)({}, styles.subtitle, subtitleStyle); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles(rootStyle) }), + _react2.default.createElement( + 'span', + { style: prepareStyles(extendedTitleStyle) }, + title + ), + _react2.default.createElement( + 'span', + { style: prepareStyles(extendedSubtitleStyle) }, + subtitle + ), + children + ); + } + }]); + return CardTitle; +}(_react.Component); + +CardTitle.muiName = 'CardTitle'; +CardTitle.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CardTitle.propTypes = { + /** + * If true, a click on this card component expands the card. + */ + actAsExpander: _propTypes2.default.bool, + /** + * Can be used to render elements inside the Card Title. + */ + children: _propTypes2.default.node, + /** + * Can be used to pass a closeIcon if you don't like the default expandable close Icon. + */ + closeIcon: _propTypes2.default.node, + /** + * If true, this card component is expandable. + */ + expandable: _propTypes2.default.bool, + /** + * If true, this card component will include a button to expand the card. + */ + showExpandableButton: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Can be used to render a subtitle in the Card Title. + */ + subtitle: _propTypes2.default.node, + /** + * Override the subtitle color. + */ + subtitleColor: _propTypes2.default.string, + /** + * Override the inline-styles of the subtitle. + */ + subtitleStyle: _propTypes2.default.object, + /** + * Can be used to render a title in the Card Title. + */ + title: _propTypes2.default.node, + /** + * Override the title color. + */ + titleColor: _propTypes2.default.string, + /** + * Override the inline-styles of the title. + */ + titleStyle: _propTypes2.default.object +} : void 0; +exports.default = CardTitle; \ No newline at end of file diff --git a/Card/index.js b/Card/index.js new file mode 100644 index 00000000000000..23e1a00f4d0380 --- /dev/null +++ b/Card/index.js @@ -0,0 +1,45 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.CardExpandable = exports.CardActions = exports.CardText = exports.CardMedia = exports.CardTitle = exports.CardHeader = exports.Card = undefined; + +var _Card2 = require('./Card'); + +var _Card3 = _interopRequireDefault(_Card2); + +var _CardHeader2 = require('./CardHeader'); + +var _CardHeader3 = _interopRequireDefault(_CardHeader2); + +var _CardTitle2 = require('./CardTitle'); + +var _CardTitle3 = _interopRequireDefault(_CardTitle2); + +var _CardMedia2 = require('./CardMedia'); + +var _CardMedia3 = _interopRequireDefault(_CardMedia2); + +var _CardText2 = require('./CardText'); + +var _CardText3 = _interopRequireDefault(_CardText2); + +var _CardActions2 = require('./CardActions'); + +var _CardActions3 = _interopRequireDefault(_CardActions2); + +var _CardExpandable2 = require('./CardExpandable'); + +var _CardExpandable3 = _interopRequireDefault(_CardExpandable2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Card = _Card3.default; +exports.CardHeader = _CardHeader3.default; +exports.CardTitle = _CardTitle3.default; +exports.CardMedia = _CardMedia3.default; +exports.CardText = _CardText3.default; +exports.CardActions = _CardActions3.default; +exports.CardExpandable = _CardExpandable3.default; +exports.default = _Card3.default; \ No newline at end of file diff --git a/Checkbox/Checkbox.js b/Checkbox/Checkbox.js new file mode 100644 index 00000000000000..959a2a823a58fe --- /dev/null +++ b/Checkbox/Checkbox.js @@ -0,0 +1,294 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _EnhancedSwitch = require('../internal/EnhancedSwitch'); + +var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _checkBoxOutlineBlank = require('../svg-icons/toggle/check-box-outline-blank'); + +var _checkBoxOutlineBlank2 = _interopRequireDefault(_checkBoxOutlineBlank); + +var _checkBox = require('../svg-icons/toggle/check-box'); + +var _checkBox2 = _interopRequireDefault(_checkBox); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var checkbox = context.muiTheme.checkbox; + + var checkboxSize = 24; + + return { + icon: { + height: checkboxSize, + width: checkboxSize + }, + check: { + position: 'absolute', + opacity: 0, + transform: 'scale(0)', + transitionOrigin: '50% 50%', + transition: _transitions2.default.easeOut('450ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('0ms', 'transform', '450ms'), + fill: checkbox.checkedColor + }, + checkWhenSwitched: { + opacity: 1, + transform: 'scale(1)', + transition: _transitions2.default.easeOut('0ms', 'opacity', '0ms') + ', ' + _transitions2.default.easeOut('800ms', 'transform', '0ms') + }, + checkWhenDisabled: { + fill: checkbox.disabledColor + }, + box: { + position: 'absolute', + opacity: 1, + fill: checkbox.boxColor, + transition: _transitions2.default.easeOut('1000ms', 'opacity', '200ms') + }, + boxWhenSwitched: { + opacity: 0, + transition: _transitions2.default.easeOut('650ms', 'opacity', '150ms'), + fill: checkbox.checkedColor + }, + boxWhenDisabled: { + fill: props.checked ? 'transparent' : checkbox.disabledColor + }, + label: { + color: props.disabled ? checkbox.labelDisabledColor : checkbox.labelColor + } + }; +} + +var Checkbox = function (_Component) { + (0, _inherits3.default)(Checkbox, _Component); + + function Checkbox() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Checkbox); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Checkbox.__proto__ || (0, _getPrototypeOf2.default)(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + switched: false + }, _this.handleStateChange = function (newSwitched) { + _this.setState({ + switched: newSwitched + }); + }, _this.handleCheck = function (event, isInputChecked) { + if (_this.props.onCheck) { + _this.props.onCheck(event, isInputChecked); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Checkbox, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var _props = this.props, + checked = _props.checked, + defaultChecked = _props.defaultChecked, + valueLink = _props.valueLink; + + + if (checked || defaultChecked || valueLink && valueLink.value) { + this.setState({ + switched: true + }); + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.checked !== nextProps.checked) { + this.setState({ + switched: nextProps.checked + }); + } + } + }, { + key: 'isChecked', + value: function isChecked() { + return this.refs.enhancedSwitch.isSwitched(); + } + }, { + key: 'setChecked', + value: function setChecked(newCheckedValue) { + this.refs.enhancedSwitch.setSwitched(newCheckedValue); + } + }, { + key: 'render', + value: function render() { + var _props2 = this.props, + iconStyle = _props2.iconStyle, + onCheck = _props2.onCheck, + checkedIcon = _props2.checkedIcon, + uncheckedIcon = _props2.uncheckedIcon, + other = (0, _objectWithoutProperties3.default)(_props2, ['iconStyle', 'onCheck', 'checkedIcon', 'uncheckedIcon']); + + var styles = getStyles(this.props, this.context); + var boxStyles = (0, _simpleAssign2.default)(styles.box, this.state.switched && styles.boxWhenSwitched, iconStyle, this.props.disabled && styles.boxWhenDisabled); + var checkStyles = (0, _simpleAssign2.default)(styles.check, this.state.switched && styles.checkWhenSwitched, iconStyle, this.props.disabled && styles.checkWhenDisabled); + + var checkedElement = checkedIcon ? _react2.default.cloneElement(checkedIcon, { + style: (0, _simpleAssign2.default)(checkStyles, checkedIcon.props.style) + }) : _react2.default.createElement(_checkBox2.default, { + style: checkStyles + }); + + var unCheckedElement = uncheckedIcon ? _react2.default.cloneElement(uncheckedIcon, { + style: (0, _simpleAssign2.default)(boxStyles, uncheckedIcon.props.style) + }) : _react2.default.createElement(_checkBoxOutlineBlank2.default, { + style: boxStyles + }); + + var checkboxElement = _react2.default.createElement( + 'div', + null, + unCheckedElement, + checkedElement + ); + + var rippleColor = this.state.switched ? checkStyles.fill : boxStyles.fill; + var mergedIconStyle = (0, _simpleAssign2.default)(styles.icon, iconStyle); + + var labelStyle = (0, _simpleAssign2.default)(styles.label, this.props.labelStyle); + + var enhancedSwitchProps = { + ref: 'enhancedSwitch', + inputType: 'checkbox', + switched: this.state.switched, + switchElement: checkboxElement, + rippleColor: rippleColor, + iconStyle: mergedIconStyle, + onSwitch: this.handleCheck, + labelStyle: labelStyle, + onParentShouldUpdate: this.handleStateChange, + labelPosition: this.props.labelPosition + }; + + return _react2.default.createElement(_EnhancedSwitch2.default, (0, _extends3.default)({}, other, enhancedSwitchProps)); + } + }]); + return Checkbox; +}(_react.Component); + +Checkbox.defaultProps = { + labelPosition: 'right', + disabled: false +}; +Checkbox.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Checkbox.propTypes = { + /** + * Checkbox is checked if true. + */ + checked: _propTypes2.default.bool, + /** + * The SvgIcon to use for the checked state. + * This is useful to create icon toggles. + */ + checkedIcon: _propTypes2.default.element, + /** + * The default state of our checkbox component. + * **Warning:** This cannot be used in conjunction with `checked`. + * Decide between using a controlled or uncontrolled input element and remove one of these props. + * More info: https://fb.me/react-controlled-components + */ + defaultChecked: _propTypes2.default.bool, + /** + * Disabled if true. + */ + disabled: _propTypes2.default.bool, + /** + * Overrides the inline-styles of the icon element. + */ + iconStyle: _propTypes2.default.object, + /** + * Overrides the inline-styles of the input element. + */ + inputStyle: _propTypes2.default.object, + /** + * Where the label will be placed next to the checkbox. + */ + labelPosition: _propTypes2.default.oneOf(['left', 'right']), + /** + * Overrides the inline-styles of the Checkbox element label. + */ + labelStyle: _propTypes2.default.object, + /** + * Callback function that is fired when the checkbox is checked. + * + * @param {object} event `change` event targeting the underlying checkbox `input`. + * @param {boolean} isInputChecked The `checked` value of the underlying checkbox `input`. + */ + onCheck: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The SvgIcon to use for the unchecked state. + * This is useful to create icon toggles. + */ + uncheckedIcon: _propTypes2.default.element, + /** + * ValueLink for when using controlled checkbox. + */ + valueLink: _propTypes2.default.object +} : void 0; +exports.default = Checkbox; \ No newline at end of file diff --git a/Checkbox/index.js b/Checkbox/index.js new file mode 100644 index 00000000000000..bf74988ef99be6 --- /dev/null +++ b/Checkbox/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Checkbox = require('./Checkbox'); + +var _Checkbox2 = _interopRequireDefault(_Checkbox); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Checkbox2.default; \ No newline at end of file diff --git a/Chip/Chip.js b/Chip/Chip.js new file mode 100644 index 00000000000000..1a501bbe867c96 --- /dev/null +++ b/Chip/Chip.js @@ -0,0 +1,352 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _colorManipulator = require('../utils/colorManipulator'); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +var _cancel = require('../svg-icons/navigation/cancel'); + +var _cancel2 = _interopRequireDefault(_cancel); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var chip = context.muiTheme.chip; + + + var backgroundColor = props.backgroundColor || chip.backgroundColor; + var focusColor = (0, _colorManipulator.emphasize)(backgroundColor, 0.08); + var pressedColor = (0, _colorManipulator.emphasize)(backgroundColor, 0.12); + + return { + avatar: { + marginRight: -4 + }, + deleteIcon: { + color: state.deleteHovered ? (0, _colorManipulator.fade)(chip.deleteIconColor, 0.4) : chip.deleteIconColor, + cursor: 'pointer', + margin: '4px 4px 0px -8px' + }, + label: { + color: props.labelColor || chip.textColor, + fontSize: chip.fontSize, + fontWeight: chip.fontWeight, + lineHeight: '32px', + paddingLeft: 12, + paddingRight: 12, + userSelect: 'none', + whiteSpace: 'nowrap' + }, + root: { + backgroundColor: state.clicked ? pressedColor : state.focused || state.hovered ? focusColor : backgroundColor, + borderRadius: 16, + boxShadow: state.clicked ? chip.shadow : null, + cursor: props.onClick ? 'pointer' : 'default', + display: 'flex', + whiteSpace: 'nowrap', + width: 'fit-content' + } + }; +} + +var Chip = function (_Component) { + (0, _inherits3.default)(Chip, _Component); + + function Chip() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Chip); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Chip.__proto__ || (0, _getPrototypeOf2.default)(Chip)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + clicked: false, + deleteHovered: false, + focused: false, + hovered: false + }, _this.handleBlur = function (event) { + _this.setState({ clicked: false, focused: false }); + _this.props.onBlur(event); + }, _this.handleFocus = function (event) { + if (_this.props.onClick || _this.props.onRequestDelete) { + _this.setState({ focused: true }); + } + _this.props.onFocus(event); + }, _this.handleKeyboardFocus = function (event, keyboardFocused) { + if (keyboardFocused) { + _this.handleFocus(); + _this.props.onFocus(event); + } else { + _this.handleBlur(); + } + + _this.props.onKeyboardFocus(event, keyboardFocused); + }, _this.handleKeyDown = function (event) { + if ((0, _keycode2.default)(event) === 'backspace') { + event.preventDefault(); + if (_this.props.onRequestDelete) { + _this.props.onRequestDelete(event); + } + } + _this.props.onKeyDown(event); + }, _this.handleMouseDown = function (event) { + // Only listen to left clicks + if (event.button === 0) { + event.stopPropagation(); + if (_this.props.onClick) { + _this.setState({ clicked: true }); + } + } + _this.props.onMouseDown(event); + }, _this.handleMouseEnter = function (event) { + if (_this.props.onClick) { + _this.setState({ hovered: true }); + } + _this.props.onMouseEnter(event); + }, _this.handleMouseEnterDeleteIcon = function () { + _this.setState({ deleteHovered: true }); + }, _this.handleMouseLeave = function (event) { + _this.setState({ + clicked: false, + hovered: false + }); + _this.props.onMouseLeave(event); + }, _this.handleMouseLeaveDeleteIcon = function () { + _this.setState({ deleteHovered: false }); + }, _this.handleMouseUp = function (event) { + _this.setState({ clicked: false }); + _this.props.onMouseUp(event); + }, _this.handleClickDeleteIcon = function (event) { + // Stop the event from bubbling up to the `Chip` + event.stopPropagation(); + _this.props.onRequestDelete(event); + }, _this.handleTouchEnd = function (event) { + _this.setState({ clicked: false }); + _this.props.onTouchEnd(event); + }, _this.handleTouchStart = function (event) { + event.stopPropagation(); + if (_this.props.onClick) { + _this.setState({ clicked: true }); + } + _this.props.onTouchStart(event); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Chip, [{ + key: 'render', + value: function render() { + var buttonEventHandlers = { + onBlur: this.handleBlur, + onFocus: this.handleFocus, + onKeyDown: this.handleKeyDown, + onMouseDown: this.handleMouseDown, + onMouseEnter: this.handleMouseEnter, + onMouseLeave: this.handleMouseLeave, + onMouseUp: this.handleMouseUp, + onTouchEnd: this.handleTouchEnd, + onTouchStart: this.handleTouchStart, + onKeyboardFocus: this.handleKeyboardFocus + }; + + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + var _props = this.props, + childrenProp = _props.children, + containerElement = _props.containerElement, + style = _props.style, + className = _props.className, + deleteIconStyle = _props.deleteIconStyle, + labelStyle = _props.labelStyle, + labelColor = _props.labelColor, + backgroundColor = _props.backgroundColor, + onRequestDelete = _props.onRequestDelete, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'containerElement', 'style', 'className', 'deleteIconStyle', 'labelStyle', 'labelColor', 'backgroundColor', 'onRequestDelete']); + + + var deletable = this.props.onRequestDelete; + var avatar = null; + + var deleteIcon = deletable ? _react2.default.createElement(_cancel2.default, { + color: styles.deleteIcon.color, + style: (0, _simpleAssign2.default)(styles.deleteIcon, deleteIconStyle), + onClick: this.handleClickDeleteIcon, + onMouseEnter: this.handleMouseEnterDeleteIcon, + onMouseLeave: this.handleMouseLeaveDeleteIcon + }) : null; + + var children = childrenProp; + var childCount = _react2.default.Children.count(children); + + // If the first child is an avatar, extract it and style it + if (childCount > 1) { + children = _react2.default.Children.toArray(children); + + if (_react2.default.isValidElement(children[0]) && children[0].type.muiName === 'Avatar') { + avatar = children.shift(); + + avatar = _react2.default.cloneElement(avatar, { + style: (0, _simpleAssign2.default)(styles.avatar, avatar.props.style), + size: 32 + }); + } + } + + return _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, buttonEventHandlers, { + className: className, + containerElement: containerElement, + disableTouchRipple: true, + disableFocusRipple: true, + style: (0, _simpleAssign2.default)(styles.root, style) + }), + avatar, + _react2.default.createElement( + 'span', + { style: prepareStyles((0, _simpleAssign2.default)(styles.label, labelStyle)) }, + children + ), + deleteIcon + ); + } + }]); + return Chip; +}(_react.Component); + +Chip.defaultProps = { + containerElement: 'div', // Firefox doesn't support nested buttons + onBlur: function onBlur() {}, + onFocus: function onFocus() {}, + onKeyDown: function onKeyDown() {}, + onKeyboardFocus: function onKeyboardFocus() {}, + onMouseDown: function onMouseDown() {}, + onMouseEnter: function onMouseEnter() {}, + onMouseLeave: function onMouseLeave() {}, + onMouseUp: function onMouseUp() {}, + onTouchEnd: function onTouchEnd() {}, + onTouchStart: function onTouchStart() {} +}; +Chip.contextTypes = { muiTheme: _propTypes2.default.object.isRequired }; +process.env.NODE_ENV !== "production" ? Chip.propTypes = { + /** + * Override the background color of the chip. + */ + backgroundColor: _propTypes2.default.string, + /** + * Used to render elements inside the Chip. + */ + children: _propTypes2.default.node, + /** + * CSS `className` of the root element. + */ + className: _propTypes2.default.node, + /** + * The element to use as the container for the Chip. Either a string to + * use a DOM element or a ReactElement. + */ + containerElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]), + /** + * Override the inline-styles of the delete icon. + */ + deleteIconStyle: _propTypes2.default.object, + /** + * Override the label color. + */ + labelColor: _propTypes2.default.string, + /** + * Override the inline-styles of the label. + */ + labelStyle: _propTypes2.default.object, + /** @ignore */ + onBlur: _propTypes2.default.func, + /** + * Callback function fired when the `Chip` element is clicked. + * + * @param {object} event Click event targeting the element. + */ + onClick: _propTypes2.default.func, + /** @ignore */ + onFocus: _propTypes2.default.func, + /** @ignore */ + onKeyDown: _propTypes2.default.func, + /** @ignore */ + onKeyboardFocus: _propTypes2.default.func, + /** @ignore */ + onMouseDown: _propTypes2.default.func, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** @ignore */ + onMouseUp: _propTypes2.default.func, + /** + * Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. + * @param {object} event `click` event targeting the element. + */ + onRequestDelete: _propTypes2.default.func, + /** @ignore */ + onTouchEnd: _propTypes2.default.func, + /** @ignore */ + onTouchStart: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Chip; \ No newline at end of file diff --git a/Chip/index.js b/Chip/index.js new file mode 100644 index 00000000000000..034e978b8684b5 --- /dev/null +++ b/Chip/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Chip = require('./Chip'); + +var _Chip2 = _interopRequireDefault(_Chip); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Chip2.default; \ No newline at end of file diff --git a/CircularProgress/CircularProgress.js b/CircularProgress/CircularProgress.js new file mode 100644 index 00000000000000..f9e4a233644498 --- /dev/null +++ b/CircularProgress/CircularProgress.js @@ -0,0 +1,271 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _autoPrefix = require('../utils/autoPrefix'); + +var _autoPrefix2 = _interopRequireDefault(_autoPrefix); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getRelativeValue(value, min, max) { + var clampedValue = Math.min(Math.max(min, value), max); + return clampedValue / (max - min); +} + +function getArcLength(fraction, props) { + return fraction * Math.PI * (props.size - props.thickness); +} + +function getStyles(props, context) { + var max = props.max, + min = props.min, + size = props.size, + value = props.value; + var palette = context.muiTheme.baseTheme.palette; + + + var styles = { + root: { + position: 'relative', + display: 'inline-block', + width: size, + height: size + }, + wrapper: { + width: size, + height: size, + display: 'inline-block', + transition: _transitions2.default.create('transform', '20s', null, 'linear'), + transitionTimingFunction: 'linear' + }, + svg: { + width: size, + height: size, + position: 'relative' + }, + path: { + stroke: props.color || palette.primary1Color, + strokeLinecap: 'round', + transition: _transitions2.default.create('all', '1.5s', null, 'ease-in-out') + } + }; + + if (props.mode === 'determinate') { + var relVal = getRelativeValue(value, min, max); + styles.path.transition = _transitions2.default.create('all', '0.3s', null, 'linear'); + styles.path.strokeDasharray = getArcLength(relVal, props) + ', ' + getArcLength(1, props); + } + + return styles; +} + +var CircularProgress = function (_Component) { + (0, _inherits3.default)(CircularProgress, _Component); + + function CircularProgress() { + (0, _classCallCheck3.default)(this, CircularProgress); + return (0, _possibleConstructorReturn3.default)(this, (CircularProgress.__proto__ || (0, _getPrototypeOf2.default)(CircularProgress)).apply(this, arguments)); + } + + (0, _createClass3.default)(CircularProgress, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.scalePath(this.refs.path); + this.rotateWrapper(this.refs.wrapper); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.scalePathTimer); + clearTimeout(this.rotateWrapperTimer); + } + }, { + key: 'scalePath', + value: function scalePath(path) { + var _this2 = this; + + var step = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + + if (this.props.mode !== 'indeterminate') return; + + step %= 3; + + if (step === 0) { + path.style.strokeDasharray = getArcLength(0, this.props) + ', ' + getArcLength(1, this.props); + path.style.strokeDashoffset = 0; + path.style.transitionDuration = '0ms'; + } else if (step === 1) { + path.style.strokeDasharray = getArcLength(0.7, this.props) + ', ' + getArcLength(1, this.props); + path.style.strokeDashoffset = getArcLength(-0.3, this.props); + path.style.transitionDuration = '750ms'; + } else { + path.style.strokeDasharray = getArcLength(0.7, this.props) + ', ' + getArcLength(1, this.props); + path.style.strokeDashoffset = getArcLength(-1, this.props); + path.style.transitionDuration = '850ms'; + } + + this.scalePathTimer = setTimeout(function () { + return _this2.scalePath(path, step + 1); + }, step ? 750 : 250); + } + }, { + key: 'rotateWrapper', + value: function rotateWrapper(wrapper) { + var _this3 = this; + + if (this.props.mode !== 'indeterminate') return; + + _autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(0deg)'); + _autoPrefix2.default.set(wrapper.style, 'transitionDuration', '0ms'); + + setTimeout(function () { + _autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(1800deg)'); + _autoPrefix2.default.set(wrapper.style, 'transitionDuration', '10s'); + _autoPrefix2.default.set(wrapper.style, 'transitionTimingFunction', 'linear'); + }, 50); + + this.rotateWrapperTimer = setTimeout(function () { + return _this3.rotateWrapper(wrapper); + }, 10050); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + style = _props.style, + innerStyle = _props.innerStyle, + size = _props.size, + thickness = _props.thickness, + other = (0, _objectWithoutProperties3.default)(_props, ['style', 'innerStyle', 'size', 'thickness']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + _react2.default.createElement( + 'div', + { ref: 'wrapper', style: prepareStyles((0, _simpleAssign2.default)(styles.wrapper, innerStyle)) }, + _react2.default.createElement( + 'svg', + { + viewBox: '0 0 ' + size + ' ' + size, + style: prepareStyles(styles.svg) + }, + _react2.default.createElement('circle', { + ref: 'path', + style: prepareStyles(styles.path), + cx: size / 2, + cy: size / 2, + r: (size - thickness) / 2, + fill: 'none', + strokeWidth: thickness, + strokeMiterlimit: '20' + }) + ) + ) + ); + } + }]); + return CircularProgress; +}(_react.Component); + +CircularProgress.defaultProps = { + mode: 'indeterminate', + value: 0, + min: 0, + max: 100, + size: 40, + thickness: 3.5 +}; +CircularProgress.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CircularProgress.propTypes = { + /** + * Override the progress's color. + */ + color: _propTypes2.default.string, + /** + * Style for inner wrapper div. + */ + innerStyle: _propTypes2.default.object, + /** + * The max value of progress, only works in determinate mode. + */ + max: _propTypes2.default.number, + /** + * The min value of progress, only works in determinate mode. + */ + min: _propTypes2.default.number, + /** + * The mode of show your progress, indeterminate + * for when there is no value for progress. + */ + mode: _propTypes2.default.oneOf(['determinate', 'indeterminate']), + /** + * The diameter of the progress in pixels. + */ + size: _propTypes2.default.number, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Stroke width in pixels. + */ + thickness: _propTypes2.default.number, + /** + * The value of progress, only works in determinate mode. + */ + value: _propTypes2.default.number +} : void 0; +exports.default = CircularProgress; \ No newline at end of file diff --git a/CircularProgress/index.js b/CircularProgress/index.js new file mode 100644 index 00000000000000..f84bda03e1ec96 --- /dev/null +++ b/CircularProgress/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _CircularProgress = require('./CircularProgress'); + +var _CircularProgress2 = _interopRequireDefault(_CircularProgress); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _CircularProgress2.default; \ No newline at end of file diff --git a/DatePicker/Calendar.js b/DatePicker/Calendar.js new file mode 100644 index 00000000000000..c30d07560f7af5 --- /dev/null +++ b/DatePicker/Calendar.js @@ -0,0 +1,496 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); + +var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactEventListener = require('react-event-listener'); + +var _reactEventListener2 = _interopRequireDefault(_reactEventListener); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _CalendarActionButtons = require('./CalendarActionButtons'); + +var _CalendarActionButtons2 = _interopRequireDefault(_CalendarActionButtons); + +var _CalendarMonth = require('./CalendarMonth'); + +var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth); + +var _CalendarYear = require('./CalendarYear'); + +var _CalendarYear2 = _interopRequireDefault(_CalendarYear); + +var _CalendarToolbar = require('./CalendarToolbar'); + +var _CalendarToolbar2 = _interopRequireDefault(_CalendarToolbar); + +var _DateDisplay = require('./DateDisplay'); + +var _DateDisplay2 = _interopRequireDefault(_DateDisplay); + +var _SlideIn = require('../internal/SlideIn'); + +var _SlideIn2 = _interopRequireDefault(_SlideIn); + +var _dateUtils = require('./dateUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var daysArray = [].concat((0, _toConsumableArray3.default)(Array(7))); + +var Calendar = function (_Component) { + (0, _inherits3.default)(Calendar, _Component); + + function Calendar() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Calendar); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Calendar.__proto__ || (0, _getPrototypeOf2.default)(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + displayDate: undefined, + displayMonthDay: undefined, + selectedDate: undefined, + transitionDirection: 'left', + transitionEnter: true + }, _this.calendarRefs = {}, _this.handleClickDay = function (event, date) { + _this.setSelectedDate(date); + if (_this.props.onClickDay) _this.props.onClickDay(event, date); + }, _this.handleMonthChange = function (months) { + var nextDirection = _this.context.muiTheme.isRtl ? 'right' : 'left'; + var prevDirection = _this.context.muiTheme.isRtl ? 'left' : 'right'; + var direction = months >= 0 ? nextDirection : prevDirection; + _this.setState({ + transitionDirection: direction, + displayDate: _this.props.utils.addMonths(_this.state.displayDate, months) + }); + }, _this.handleClickYear = function (event, year) { + _this.setSelectedDate(_this.props.utils.setYear(_this.state.selectedDate, year), event); + _this.handleClickDateDisplayMonthDay(); + }, _this.handleClickDateDisplayMonthDay = function () { + _this.setState({ + displayMonthDay: true + }); + }, _this.handleClickDateDisplayYear = function () { + _this.setState({ + displayMonthDay: false + }); + }, _this.handleWindowKeyDown = function (event) { + if (_this.props.open) { + var nextArrow = _this.context.muiTheme.isRtl ? 'left' : 'right'; + var prevArrow = _this.context.muiTheme.isRtl ? 'right' : 'left'; + switch ((0, _keycode2.default)(event)) { + case 'up': + if (event.altKey && event.shiftKey) { + _this.addSelectedYears(-1); + } else if (event.shiftKey) { + _this.addSelectedMonths(-1); + } else { + _this.addSelectedDays(-7); + } + break; + + case 'down': + if (event.altKey && event.shiftKey) { + _this.addSelectedYears(1); + } else if (event.shiftKey) { + _this.addSelectedMonths(1); + } else { + _this.addSelectedDays(7); + } + break; + + case nextArrow: + if (event.altKey && event.shiftKey) { + _this.addSelectedYears(1); + } else if (event.shiftKey) { + _this.addSelectedMonths(1); + } else { + _this.addSelectedDays(1); + } + break; + + case prevArrow: + if (event.altKey && event.shiftKey) { + _this.addSelectedYears(-1); + } else if (event.shiftKey) { + _this.addSelectedMonths(-1); + } else { + _this.addSelectedDays(-1); + } + break; + } + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Calendar, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + displayDate: this.props.utils.getFirstDayOfMonth(this.props.initialDate), + selectedDate: this.props.initialDate, + displayMonthDay: !this.props.openToYearSelection + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.initialDate !== this.props.initialDate) { + var date = nextProps.initialDate || new Date(); + this.setState({ + displayDate: this.props.utils.getFirstDayOfMonth(date), + selectedDate: date + }); + } + } + }, { + key: 'getMinDate', + value: function getMinDate() { + return this.props.minDate || this.props.utils.addYears(new Date(), -100); + } + }, { + key: 'getMaxDate', + value: function getMaxDate() { + return this.props.maxDate || this.props.utils.addYears(new Date(), 100); + } + }, { + key: 'getSelectedDate', + value: function getSelectedDate() { + return this.state.selectedDate; + } + }, { + key: 'isSelectedDateDisabled', + value: function isSelectedDateDisabled() { + if (!this.state.displayMonthDay) { + return false; + } + + if (this.calendarRefs.calendar) { + return this.calendarRefs.calendar.isSelectedDateDisabled(); + } else { + return false; + } + } + }, { + key: 'addSelectedDays', + value: function addSelectedDays(days) { + this.setSelectedDate(this.props.utils.addDays(this.state.selectedDate, days)); + } + }, { + key: 'addSelectedMonths', + value: function addSelectedMonths(months) { + this.setSelectedDate(this.props.utils.addMonths(this.state.selectedDate, months)); + } + }, { + key: 'addSelectedYears', + value: function addSelectedYears(years) { + this.setSelectedDate(this.props.utils.addYears(this.state.selectedDate, years)); + } + }, { + key: 'setDisplayDate', + value: function setDisplayDate(date, newSelectedDate) { + var newDisplayDate = this.props.utils.getFirstDayOfMonth(date); + + if (newDisplayDate !== this.state.displayDate) { + var nextDirection = this.context.muiTheme.isRtl ? 'right' : 'left'; + var prevDirection = this.context.muiTheme.isRtl ? 'left' : 'right'; + var direction = newDisplayDate > this.state.displayDate ? nextDirection : prevDirection; + this.setState({ + displayDate: newDisplayDate, + transitionDirection: direction, + selectedDate: newSelectedDate || this.state.selectedDate + }); + } + } + }, { + key: 'setSelectedDate', + value: function setSelectedDate(date) { + var adjustedDate = date; + var minDate = this.getMinDate(); + var maxDate = this.getMaxDate(); + if ((0, _dateUtils.isBeforeDate)(date, minDate)) { + adjustedDate = minDate; + } else if ((0, _dateUtils.isAfterDate)(date, maxDate)) { + adjustedDate = maxDate; + } + + var newDisplayDate = this.props.utils.getFirstDayOfMonth(adjustedDate); + if (newDisplayDate !== this.state.displayDate) { + this.setDisplayDate(newDisplayDate, adjustedDate); + } else { + this.setState({ + selectedDate: adjustedDate + }); + } + } + }, { + key: 'getToolbarInteractions', + value: function getToolbarInteractions() { + return { + prevMonth: this.props.utils.monthDiff(this.state.displayDate, this.getMinDate()) > 0, + nextMonth: this.props.utils.monthDiff(this.state.displayDate, this.getMaxDate()) < 0 + }; + } + }, { + key: 'yearSelector', + value: function yearSelector() { + if (!this.props.disableYearSelection) { + return _react2.default.createElement(_CalendarYear2.default, { + key: 'years', + DateTimeFormat: this.props.DateTimeFormat, + locale: this.props.locale, + onClickYear: this.handleClickYear, + selectedDate: this.state.selectedDate, + minDate: this.getMinDate(), + maxDate: this.getMaxDate(), + utils: this.props.utils + }); + } + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var prepareStyles = this.context.muiTheme.prepareStyles; + var hideCalendarDate = this.props.hideCalendarDate; + + var toolbarInteractions = this.getToolbarInteractions(); + var isLandscape = this.props.mode === 'landscape'; + var calendarTextColor = this.context.muiTheme.datePicker.calendarTextColor; + + + var styles = { + root: { + color: calendarTextColor, + userSelect: 'none', + width: !hideCalendarDate && isLandscape ? 479 : 310 + }, + calendar: { + display: 'flex', + flexDirection: 'column' + }, + calendarContainer: { + display: 'flex', + alignContent: 'space-between', + justifyContent: 'space-between', + flexDirection: 'column', + fontSize: 12, + fontWeight: 400, + padding: '0px 8px', + transition: _transitions2.default.easeOut() + }, + yearContainer: { + display: 'flex', + justifyContent: 'space-between', + flexDirection: 'column', + height: 272, + marginTop: 10, + overflow: 'hidden', + width: 310 + }, + weekTitle: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + fontWeight: '500', + height: 20, + lineHeight: '15px', + opacity: '0.5', + textAlign: 'center' + }, + weekTitleDay: { + width: 42 + }, + transitionSlide: { + height: 214 + } + }; + + var weekTitleDayStyle = prepareStyles(styles.weekTitleDay); + + var _props = this.props, + minDate = _props.minDate, + maxDate = _props.maxDate, + cancelClassName = _props.cancelClassName, + cancelLabel = _props.cancelLabel, + cancelStyle = _props.cancelStyle, + DateTimeFormat = _props.DateTimeFormat, + firstDayOfWeek = _props.firstDayOfWeek, + locale = _props.locale, + okClassName = _props.okClassName, + okLabel = _props.okLabel, + okStyle = _props.okStyle, + onTouchTapCancel = _props.onTouchTapCancel, + onTouchTapOk = _props.onTouchTapOk, + onClickCancel = _props.onClickCancel, + onClickOk = _props.onClickOk, + utils = _props.utils; + + + return _react2.default.createElement( + 'div', + { style: prepareStyles(styles.root) }, + _react2.default.createElement(_reactEventListener2.default, { + target: 'window', + onKeyDown: this.handleWindowKeyDown + }), + !hideCalendarDate && _react2.default.createElement(_DateDisplay2.default, { + DateTimeFormat: DateTimeFormat, + disableYearSelection: this.props.disableYearSelection, + onClickMonthDay: this.handleClickDateDisplayMonthDay, + onClickYear: this.handleClickDateDisplayYear, + locale: locale, + monthDaySelected: this.state.displayMonthDay, + mode: this.props.mode, + selectedDate: this.state.selectedDate + }), + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.calendar) }, + this.state.displayMonthDay && _react2.default.createElement( + 'div', + { style: prepareStyles(styles.calendarContainer) }, + _react2.default.createElement(_CalendarToolbar2.default, { + DateTimeFormat: DateTimeFormat, + locale: locale, + displayDate: this.state.displayDate, + onMonthChange: this.handleMonthChange, + prevMonth: toolbarInteractions.prevMonth, + nextMonth: toolbarInteractions.nextMonth + }), + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.weekTitle) }, + daysArray.map(function (event, i) { + return _react2.default.createElement( + 'span', + { key: i, style: weekTitleDayStyle }, + (0, _dateUtils.localizedWeekday)(DateTimeFormat, locale, i, firstDayOfWeek) + ); + }) + ), + _react2.default.createElement( + _SlideIn2.default, + { direction: this.state.transitionDirection, style: styles.transitionSlide }, + _react2.default.createElement(_CalendarMonth2.default, { + DateTimeFormat: DateTimeFormat, + locale: locale, + displayDate: this.state.displayDate, + firstDayOfWeek: this.props.firstDayOfWeek, + key: this.state.displayDate.toDateString(), + minDate: this.getMinDate(), + maxDate: this.getMaxDate(), + onClickDay: this.handleClickDay, + ref: function ref(_ref2) { + return _this2.calendarRefs.calendar = _ref2; + }, + selectedDate: this.state.selectedDate, + shouldDisableDate: this.props.shouldDisableDate, + utils: utils + }) + ) + ), + !this.state.displayMonthDay && _react2.default.createElement( + 'div', + { style: prepareStyles(styles.yearContainer) }, + this.yearSelector() + ), + okLabel && _react2.default.createElement(_CalendarActionButtons2.default, { + autoOk: this.props.autoOk, + cancelClassName: cancelClassName, + cancelLabel: cancelLabel, + cancelStyle: cancelStyle, + okClassName: okClassName, + okLabel: okLabel, + okStyle: okStyle, + onTouchTapCancel: onTouchTapCancel, + onTouchTapOk: onTouchTapOk, + onClickCancel: onClickCancel, + onClickOk: onClickOk + }) + ) + ); + } + }]); + return Calendar; +}(_react.Component); + +Calendar.defaultProps = { + DateTimeFormat: _dateUtils.dateTimeFormat, + disableYearSelection: false, + initialDate: new Date(), + locale: 'en-US', + utils: _dateUtils.defaultUtils +}; +Calendar.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Calendar.propTypes = { + DateTimeFormat: _propTypes2.default.func.isRequired, + autoOk: _propTypes2.default.bool, + cancelLabel: _propTypes2.default.node, + disableYearSelection: _propTypes2.default.bool, + firstDayOfWeek: _propTypes2.default.number, + hideCalendarDate: _propTypes2.default.bool, + initialDate: _propTypes2.default.object, + locale: _propTypes2.default.string.isRequired, + maxDate: _propTypes2.default.object, + minDate: _propTypes2.default.object, + mode: _propTypes2.default.oneOf(['portrait', 'landscape']), + okLabel: _propTypes2.default.node, + onClickCancel: _propTypes2.default.func, + onClickDay: _propTypes2.default.func, + onClickOk: _propTypes2.default.func, + open: _propTypes2.default.bool, + openToYearSelection: _propTypes2.default.bool, + shouldDisableDate: _propTypes2.default.func, + utils: _propTypes2.default.object +} : void 0; +exports.default = Calendar; \ No newline at end of file diff --git a/DatePicker/CalendarActionButtons.js b/DatePicker/CalendarActionButtons.js new file mode 100644 index 00000000000000..4327a130d44bd7 --- /dev/null +++ b/DatePicker/CalendarActionButtons.js @@ -0,0 +1,120 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _FlatButton = require('../FlatButton'); + +var _FlatButton2 = _interopRequireDefault(_FlatButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var CalendarActionButton = function (_Component) { + (0, _inherits3.default)(CalendarActionButton, _Component); + + function CalendarActionButton() { + (0, _classCallCheck3.default)(this, CalendarActionButton); + return (0, _possibleConstructorReturn3.default)(this, (CalendarActionButton.__proto__ || (0, _getPrototypeOf2.default)(CalendarActionButton)).apply(this, arguments)); + } + + (0, _createClass3.default)(CalendarActionButton, [{ + key: 'render', + value: function render() { + var _props = this.props, + cancelClassName = _props.cancelClassName, + cancelLabel = _props.cancelLabel, + cancelStyle = _props.cancelStyle, + okClassName = _props.okClassName, + okLabel = _props.okLabel, + okStyle = _props.okStyle, + wordings = _props.wordings; + + + var styles = { + root: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-end', + margin: 0, + maxHeight: 48, + padding: 0 + }, + flatButtons: { + fontsize: 14, + margin: '4px 8px 8px 0px', + maxHeight: 36, + minWidth: 64, + padding: 0 + } + }; + + return _react2.default.createElement( + 'div', + { style: styles.root }, + _react2.default.createElement(_FlatButton2.default, { + className: cancelClassName, + label: wordings ? wordings.cancel : cancelLabel, + onTouchTap: this.props.onTouchTapCancel, + onClick: this.props.onClickCancel, + primary: true, + style: (0, _extends3.default)({}, styles.flatButtons, cancelStyle) + }), + !this.props.autoOk && _react2.default.createElement(_FlatButton2.default, { + className: okClassName, + disabled: this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled(), + label: okLabel, + onClick: this.props.onClickOk, + primary: true, + style: (0, _extends3.default)({}, styles.flatButtons, okStyle) + }) + ); + } + }]); + return CalendarActionButton; +}(_react.Component); + +CalendarActionButton.defaultProps = { + okStyle: {}, + cancelStyle: {} +}; +process.env.NODE_ENV !== "production" ? CalendarActionButton.propTypes = { + autoOk: _propTypes2.default.bool, + cancelLabel: _propTypes2.default.node, + okLabel: _propTypes2.default.node, + onClickCancel: _propTypes2.default.func, + onClickOk: _propTypes2.default.func +} : void 0; +exports.default = CalendarActionButton; \ No newline at end of file diff --git a/DatePicker/CalendarMonth.js b/DatePicker/CalendarMonth.js new file mode 100644 index 00000000000000..0fe9ae2a45620e --- /dev/null +++ b/DatePicker/CalendarMonth.js @@ -0,0 +1,171 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _dateUtils = require('./dateUtils'); + +var _DayButton = require('./DayButton'); + +var _DayButton2 = _interopRequireDefault(_DayButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var styles = { + root: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-start', + fontWeight: 400, + height: 228, + lineHeight: 2, + position: 'relative', + textAlign: 'center', + MozPaddingStart: 0 + }, + week: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-around', + height: 34, + marginBottom: 2 + } +}; + +var CalendarMonth = function (_Component) { + (0, _inherits3.default)(CalendarMonth, _Component); + + function CalendarMonth() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, CalendarMonth); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = CalendarMonth.__proto__ || (0, _getPrototypeOf2.default)(CalendarMonth)).call.apply(_ref, [this].concat(args))), _this), _this.handleClickDay = function (event, date) { + if (_this.props.onClickDay) { + _this.props.onClickDay(event, date); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(CalendarMonth, [{ + key: 'isSelectedDateDisabled', + value: function isSelectedDateDisabled() { + return this.selectedDateDisabled; + } + }, { + key: 'shouldDisableDate', + value: function shouldDisableDate(day) { + if (day === null) return false; + var disabled = !(0, _dateUtils.isBetweenDates)(day, this.props.minDate, this.props.maxDate); + if (!disabled && this.props.shouldDisableDate) disabled = this.props.shouldDisableDate(day); + + return disabled; + } + }, { + key: 'getWeekElements', + value: function getWeekElements() { + var _this2 = this; + + var weekArray = this.props.utils.getWeekArray(this.props.displayDate, this.props.firstDayOfWeek); + + return weekArray.map(function (week, i) { + return _react2.default.createElement( + 'div', + { key: i, style: styles.week }, + _this2.getDayElements(week, i) + ); + }, this); + } + }, { + key: 'getDayElements', + value: function getDayElements(week, i) { + var _this3 = this; + + var _props = this.props, + DateTimeFormat = _props.DateTimeFormat, + locale = _props.locale, + selectedDate = _props.selectedDate; + + + return week.map(function (day, j) { + var isSameDate = (0, _dateUtils.isEqualDate)(selectedDate, day); + var disabled = _this3.shouldDisableDate(day); + var selected = !disabled && isSameDate; + + if (isSameDate) { + _this3.selectedDateDisabled = disabled; + } + + return _react2.default.createElement(_DayButton2.default, { + DateTimeFormat: DateTimeFormat, + locale: locale, + date: day, + disabled: disabled, + key: 'db' + (i + j), + onClick: _this3.handleClickDay, + selected: selected + }); + }, this); + } + }, { + key: 'render', + value: function render() { + return _react2.default.createElement( + 'div', + { style: styles.root }, + this.getWeekElements() + ); + } + }]); + return CalendarMonth; +}(_react.Component); + +process.env.NODE_ENV !== "production" ? CalendarMonth.propTypes = { + DateTimeFormat: _propTypes2.default.func.isRequired, + autoOk: _propTypes2.default.bool, + displayDate: _propTypes2.default.object.isRequired, + firstDayOfWeek: _propTypes2.default.number, + locale: _propTypes2.default.string.isRequired, + maxDate: _propTypes2.default.object, + minDate: _propTypes2.default.object, + onClickDay: _propTypes2.default.func, + selectedDate: _propTypes2.default.object.isRequired, + shouldDisableDate: _propTypes2.default.func, + utils: _propTypes2.default.object.isRequired +} : void 0; +exports.default = CalendarMonth; \ No newline at end of file diff --git a/DatePicker/CalendarToolbar.js b/DatePicker/CalendarToolbar.js new file mode 100644 index 00000000000000..4cda905b9c40dd --- /dev/null +++ b/DatePicker/CalendarToolbar.js @@ -0,0 +1,180 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _IconButton = require('../IconButton'); + +var _IconButton2 = _interopRequireDefault(_IconButton); + +var _chevronLeft = require('../svg-icons/navigation/chevron-left'); + +var _chevronLeft2 = _interopRequireDefault(_chevronLeft); + +var _chevronRight = require('../svg-icons/navigation/chevron-right'); + +var _chevronRight2 = _interopRequireDefault(_chevronRight); + +var _SlideIn = require('../internal/SlideIn'); + +var _SlideIn2 = _interopRequireDefault(_SlideIn); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var styles = { + root: { + display: 'flex', + justifyContent: 'space-between', + backgroundColor: 'inherit', + height: 48 + }, + titleDiv: { + fontSize: 14, + fontWeight: '500', + textAlign: 'center', + width: '100%' + }, + titleText: { + height: 'inherit', + paddingTop: 12 + } +}; + +var CalendarToolbar = function (_Component) { + (0, _inherits3.default)(CalendarToolbar, _Component); + + function CalendarToolbar() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, CalendarToolbar); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = CalendarToolbar.__proto__ || (0, _getPrototypeOf2.default)(CalendarToolbar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + transitionDirection: 'up' + }, _this.handleClickPrevMonth = function () { + if (_this.props.onMonthChange) { + _this.props.onMonthChange(-1); + } + }, _this.handleClickNextMonth = function () { + if (_this.props.onMonthChange) { + _this.props.onMonthChange(1); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(CalendarToolbar, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.displayDate !== this.props.displayDate) { + var nextDirection = this.context.muiTheme.isRtl ? 'right' : 'left'; + var prevDirection = this.context.muiTheme.isRtl ? 'left' : 'right'; + var direction = nextProps.displayDate > this.props.displayDate ? nextDirection : prevDirection; + this.setState({ + transitionDirection: direction + }); + } + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + DateTimeFormat = _props.DateTimeFormat, + locale = _props.locale, + displayDate = _props.displayDate; + + + var dateTimeFormatted = new DateTimeFormat(locale, { + month: 'long', + year: 'numeric' + }).format(displayDate); + + var nextButtonIcon = this.context.muiTheme.isRtl ? _react2.default.createElement(_chevronLeft2.default, null) : _react2.default.createElement(_chevronRight2.default, null); + var prevButtonIcon = this.context.muiTheme.isRtl ? _react2.default.createElement(_chevronRight2.default, null) : _react2.default.createElement(_chevronLeft2.default, null); + + return _react2.default.createElement( + 'div', + { style: styles.root }, + _react2.default.createElement( + _IconButton2.default, + { + disabled: !this.props.prevMonth, + onClick: this.handleClickPrevMonth + }, + prevButtonIcon + ), + _react2.default.createElement( + _SlideIn2.default, + { + direction: this.state.transitionDirection, + style: styles.titleDiv + }, + _react2.default.createElement( + 'div', + { key: dateTimeFormatted, style: styles.titleText }, + dateTimeFormatted + ) + ), + _react2.default.createElement( + _IconButton2.default, + { + disabled: !this.props.nextMonth, + onClick: this.handleClickNextMonth + }, + nextButtonIcon + ) + ); + } + }]); + return CalendarToolbar; +}(_react.Component); + +CalendarToolbar.defaultProps = { + nextMonth: true, + prevMonth: true +}; +CalendarToolbar.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CalendarToolbar.propTypes = { + DateTimeFormat: _propTypes2.default.func.isRequired, + displayDate: _propTypes2.default.object.isRequired, + locale: _propTypes2.default.string.isRequired, + nextMonth: _propTypes2.default.bool, + onMonthChange: _propTypes2.default.func, + prevMonth: _propTypes2.default.bool +} : void 0; +exports.default = CalendarToolbar; \ No newline at end of file diff --git a/DatePicker/CalendarYear.js b/DatePicker/CalendarYear.js new file mode 100644 index 00000000000000..559a50c54b1b33 --- /dev/null +++ b/DatePicker/CalendarYear.js @@ -0,0 +1,192 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _YearButton = require('./YearButton'); + +var _YearButton2 = _interopRequireDefault(_YearButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var CalendarYear = function (_Component) { + (0, _inherits3.default)(CalendarYear, _Component); + + function CalendarYear() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, CalendarYear); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = CalendarYear.__proto__ || (0, _getPrototypeOf2.default)(CalendarYear)).call.apply(_ref, [this].concat(args))), _this), _this.handleClickYear = function (event, year) { + if (_this.props.onClickYear) { + _this.props.onClickYear(event, year); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(CalendarYear, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.scrollToSelectedYear(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.scrollToSelectedYear(); + } + }, { + key: 'getYears', + value: function getYears() { + var _props = this.props, + DateTimeFormat = _props.DateTimeFormat, + locale = _props.locale, + minDate = _props.minDate, + maxDate = _props.maxDate, + selectedDate = _props.selectedDate, + utils = _props.utils; + + + var minYear = utils.getYear(minDate); + var maxYear = utils.getYear(maxDate); + var years = []; + + for (var year = minYear; year <= maxYear; year++) { + var selected = utils.getYear(selectedDate) === year; + var selectedProps = {}; + if (selected) { + selectedProps.ref = 'selectedYearButton'; + } + + var yearFormated = new DateTimeFormat(locale, { + year: 'numeric' + }).format(utils.setYear(selectedDate, year)); + + var yearButton = _react2.default.createElement( + _YearButton2.default, + (0, _extends3.default)({ + key: 'yb' + year, + onClick: this.handleClickYear, + selected: selected, + year: year, + utils: utils + }, selectedProps), + yearFormated + ); + + years.push(yearButton); + } + + return years; + } + }, { + key: 'scrollToSelectedYear', + value: function scrollToSelectedYear() { + if (this.refs.selectedYearButton === undefined) { + return; + } + + var container = _reactDom2.default.findDOMNode(this); + var yearButtonNode = _reactDom2.default.findDOMNode(this.refs.selectedYearButton); + + var containerHeight = container.clientHeight; + var yearButtonNodeHeight = yearButtonNode.clientHeight || 32; + + var scrollYOffset = yearButtonNode.offsetTop + yearButtonNodeHeight / 2 - containerHeight / 2; + container.scrollTop = scrollYOffset; + } + }, { + key: 'render', + value: function render() { + var _context$muiTheme = this.context.muiTheme, + prepareStyles = _context$muiTheme.prepareStyles, + calendarYearBackgroundColor = _context$muiTheme.datePicker.calendarYearBackgroundColor; + + + var styles = { + root: { + backgroundColor: calendarYearBackgroundColor, + height: 'inherit', + lineHeight: '35px', + overflowX: 'hidden', + overflowY: 'scroll', + position: 'relative' + }, + child: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + minHeight: '100%' + } + }; + + return _react2.default.createElement( + 'div', + { style: prepareStyles(styles.root) }, + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.child) }, + this.getYears() + ) + ); + } + }]); + return CalendarYear; +}(_react.Component); + +CalendarYear.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? CalendarYear.propTypes = { + DateTimeFormat: _propTypes2.default.func.isRequired, + locale: _propTypes2.default.string.isRequired, + maxDate: _propTypes2.default.object.isRequired, + minDate: _propTypes2.default.object.isRequired, + onClickYear: _propTypes2.default.func, + selectedDate: _propTypes2.default.object.isRequired, + utils: _propTypes2.default.object.isRequired, + wordings: _propTypes2.default.object +} : void 0; +exports.default = CalendarYear; \ No newline at end of file diff --git a/DatePicker/DateDisplay.js b/DatePicker/DateDisplay.js new file mode 100644 index 00000000000000..8f3c51ff390e5b --- /dev/null +++ b/DatePicker/DateDisplay.js @@ -0,0 +1,241 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _SlideIn = require('../internal/SlideIn'); + +var _SlideIn2 = _interopRequireDefault(_SlideIn); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var datePicker = context.muiTheme.datePicker; + var selectedYear = state.selectedYear; + + var isLandscape = props.mode === 'landscape'; + + var styles = { + root: { + width: isLandscape ? 165 : '100%', + height: isLandscape ? 330 : 'auto', + float: isLandscape ? 'left' : 'none', + fontWeight: 700, + display: 'inline-block', + backgroundColor: datePicker.headerColor, + borderTopLeftRadius: 2, + borderTopRightRadius: isLandscape ? 0 : 2, + borderBottomLeftRadius: isLandscape ? 2 : 0, + color: datePicker.textColor, + padding: 20, + boxSizing: 'border-box' + }, + monthDay: { + display: 'block', + fontSize: 36, + lineHeight: '36px', + height: props.mode === 'landscape' ? '100%' : 38, + opacity: selectedYear ? 0.7 : 1, + transition: _transitions2.default.easeOut(), + width: '100%', + fontWeight: '500' + }, + monthDayTitle: { + cursor: !selectedYear ? 'default' : 'pointer', + width: '100%', + display: 'block' + }, + year: { + margin: 0, + fontSize: 16, + fontWeight: '500', + lineHeight: '16px', + height: 16, + opacity: selectedYear ? 1 : 0.7, + transition: _transitions2.default.easeOut(), + marginBottom: 10 + }, + yearTitle: { + cursor: props.disableYearSelection || selectedYear ? 'default' : 'pointer' + } + }; + + return styles; +} + +var DateDisplay = function (_Component) { + (0, _inherits3.default)(DateDisplay, _Component); + + function DateDisplay() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, DateDisplay); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DateDisplay.__proto__ || (0, _getPrototypeOf2.default)(DateDisplay)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + selectedYear: false, + transitionDirection: 'up' + }, _this.handleClickMonthDay = function () { + if (_this.props.onClickMonthDay && _this.state.selectedYear) { + _this.props.onClickMonthDay(); + } + + _this.setState({ selectedYear: false }); + }, _this.handleClickYear = function () { + if (_this.props.onClickYear && !_this.props.disableYearSelection && !_this.state.selectedYear) { + _this.props.onClickYear(); + } + + if (!_this.props.disableYearSelection) { + _this.setState({ selectedYear: true }); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(DateDisplay, [{ + key: 'componentWillMount', + value: function componentWillMount() { + if (!this.props.monthDaySelected) { + this.setState({ selectedYear: true }); + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.selectedDate !== this.props.selectedDate) { + var direction = nextProps.selectedDate > this.props.selectedDate ? 'up' : 'down'; + this.setState({ + transitionDirection: direction + }); + } + + if (nextProps.monthDaySelected !== undefined) { + this.setState({ + selectedYear: !nextProps.monthDaySelected + }); + } + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + DateTimeFormat = _props.DateTimeFormat, + disableYearSelection = _props.disableYearSelection, + locale = _props.locale, + mode = _props.mode, + monthDaySelected = _props.monthDaySelected, + onClickMonthDay = _props.onClickMonthDay, + onClickYear = _props.onClickYear, + selectedDate = _props.selectedDate, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['DateTimeFormat', 'disableYearSelection', 'locale', 'mode', 'monthDaySelected', 'onClickMonthDay', 'onClickYear', 'selectedDate', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + var year = new DateTimeFormat(locale, { + year: 'numeric' + }).format(selectedDate); + + var dateTime = new DateTimeFormat(locale, { + month: 'short', + weekday: 'short', + day: '2-digit' + }).format(selectedDate); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles(styles.root, style) }), + _react2.default.createElement( + _SlideIn2.default, + { style: styles.year, direction: this.state.transitionDirection }, + _react2.default.createElement( + 'div', + { key: year, style: styles.yearTitle, onClick: this.handleClickYear }, + year + ) + ), + _react2.default.createElement( + _SlideIn2.default, + { style: styles.monthDay, direction: this.state.transitionDirection }, + _react2.default.createElement( + 'div', + { + key: dateTime, + onClick: this.handleClickMonthDay, + style: styles.monthDayTitle + }, + dateTime + ) + ) + ); + } + }]); + return DateDisplay; +}(_react.Component); + +DateDisplay.defaultProps = { + disableYearSelection: false, + monthDaySelected: true +}; +DateDisplay.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? DateDisplay.propTypes = { + DateTimeFormat: _propTypes2.default.func.isRequired, + disableYearSelection: _propTypes2.default.bool, + locale: _propTypes2.default.string.isRequired, + mode: _propTypes2.default.oneOf(['portrait', 'landscape']), + monthDaySelected: _propTypes2.default.bool, + onClickMonthDay: _propTypes2.default.func, + onClickYear: _propTypes2.default.func, + selectedDate: _propTypes2.default.object.isRequired, + style: _propTypes2.default.object +} : void 0; +exports.default = DateDisplay; \ No newline at end of file diff --git a/DatePicker/DatePicker.js b/DatePicker/DatePicker.js new file mode 100644 index 00000000000000..43c817fd042c95 --- /dev/null +++ b/DatePicker/DatePicker.js @@ -0,0 +1,441 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _dateUtils = require('./dateUtils'); + +var _DatePickerDialog = require('./DatePickerDialog'); + +var _DatePickerDialog2 = _interopRequireDefault(_DatePickerDialog); + +var _TextField = require('../TextField'); + +var _TextField2 = _interopRequireDefault(_TextField); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var DatePicker = function (_Component) { + (0, _inherits3.default)(DatePicker, _Component); + + function DatePicker() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, DatePicker); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DatePicker.__proto__ || (0, _getPrototypeOf2.default)(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + date: undefined + }, _this.handleAccept = function (date) { + if (!_this.isControlled()) { + _this.setState({ + date: date + }); + } + if (_this.props.onChange) { + _this.props.onChange(null, date); + } + }, _this.handleFocus = function (event) { + event.target.blur(); + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + }, _this.handleClick = function (event) { + if (_this.props.onClick) { + _this.props.onClick(event); + } + + if (!_this.props.disabled) { + setTimeout(function () { + _this.openDialog(); + }, 0); + } + }, _this.formatDate = function (date) { + if (_this.props.locale) { + var DateTimeFormat = _this.props.DateTimeFormat || _dateUtils.dateTimeFormat; + return new DateTimeFormat(_this.props.locale, { + day: 'numeric', + month: 'numeric', + year: 'numeric' + }).format(date); + } else { + return (0, _dateUtils.formatIso)(date); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(DatePicker, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + date: this.isControlled() ? this.getControlledDate() : this.props.defaultDate + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.isControlled()) { + var newDate = this.getControlledDate(nextProps); + if (!(0, _dateUtils.isEqualDate)(this.state.date, newDate)) { + this.setState({ + date: newDate + }); + } + } + } + }, { + key: 'getDate', + value: function getDate() { + return this.state.date; + } + + /** + * Open the date-picker dialog programmatically from a parent. + */ + + }, { + key: 'openDialog', + value: function openDialog() { + /** + * if the date is not selected then set it to new date + * (get the current system date while doing so) + * else set it to the currently selected date + */ + if (this.state.date !== undefined) { + this.setState({ + dialogDate: this.getDate() + }, this.refs.dialogWindow.show); + } else { + this.setState({ + dialogDate: new Date() + }, this.refs.dialogWindow.show); + } + } + + /** + * Alias for `openDialog()` for an api consistent with TextField. + */ + + }, { + key: 'focus', + value: function focus() { + this.openDialog(); + } + }, { + key: 'isControlled', + value: function isControlled() { + return this.props.hasOwnProperty('value'); + } + }, { + key: 'getControlledDate', + value: function getControlledDate() { + var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props; + + if (props.value instanceof Date) { + return props.value; + } + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + DateTimeFormat = _props.DateTimeFormat, + autoOk = _props.autoOk, + cancelClassName = _props.cancelClassName, + cancelLabel = _props.cancelLabel, + cancelStyle = _props.cancelStyle, + className = _props.className, + container = _props.container, + defaultDate = _props.defaultDate, + dialogContainerStyle = _props.dialogContainerStyle, + disableYearSelection = _props.disableYearSelection, + firstDayOfWeek = _props.firstDayOfWeek, + formatDateProp = _props.formatDate, + locale = _props.locale, + maxDate = _props.maxDate, + minDate = _props.minDate, + mode = _props.mode, + okClassName = _props.okClassName, + okLabel = _props.okLabel, + okStyle = _props.okStyle, + onDismiss = _props.onDismiss, + onFocus = _props.onFocus, + onShow = _props.onShow, + onClick = _props.onClick, + openToYearSelection = _props.openToYearSelection, + shouldDisableDate = _props.shouldDisableDate, + hideCalendarDate = _props.hideCalendarDate, + style = _props.style, + textFieldStyle = _props.textFieldStyle, + utils = _props.utils, + other = (0, _objectWithoutProperties3.default)(_props, ['DateTimeFormat', 'autoOk', 'cancelClassName', 'cancelLabel', 'cancelStyle', 'className', 'container', 'defaultDate', 'dialogContainerStyle', 'disableYearSelection', 'firstDayOfWeek', 'formatDate', 'locale', 'maxDate', 'minDate', 'mode', 'okClassName', 'okLabel', 'okStyle', 'onDismiss', 'onFocus', 'onShow', 'onClick', 'openToYearSelection', 'shouldDisableDate', 'hideCalendarDate', 'style', 'textFieldStyle', 'utils']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var formatDate = formatDateProp || this.formatDate; + + return _react2.default.createElement( + 'div', + { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, + _react2.default.createElement(_TextField2.default, (0, _extends3.default)({}, other, { + onFocus: this.handleFocus, + onClick: this.handleClick, + ref: 'input', + style: textFieldStyle, + value: this.state.date ? formatDate(this.state.date) : '' + })), + _react2.default.createElement(_DatePickerDialog2.default, { + DateTimeFormat: DateTimeFormat, + autoOk: autoOk, + cancelClassName: cancelClassName, + cancelLabel: cancelLabel, + cancelStyle: cancelStyle, + container: container, + containerStyle: dialogContainerStyle, + disableYearSelection: disableYearSelection, + firstDayOfWeek: firstDayOfWeek, + initialDate: this.state.dialogDate, + locale: locale, + maxDate: maxDate, + minDate: minDate, + mode: mode, + okClassName: okClassName, + okLabel: okLabel, + okStyle: okStyle, + onAccept: this.handleAccept, + onShow: onShow, + onDismiss: onDismiss, + ref: 'dialogWindow', + shouldDisableDate: shouldDisableDate, + hideCalendarDate: hideCalendarDate, + openToYearSelection: openToYearSelection, + utils: utils + }) + ); + } + }]); + return DatePicker; +}(_react.Component); + +DatePicker.defaultProps = { + autoOk: false, + container: 'dialog', + disabled: false, + disableYearSelection: false, + firstDayOfWeek: 1, + hideCalendarDate: false, + style: {}, + openToYearSelection: false +}; +DatePicker.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? DatePicker.propTypes = { + /** + * Constructor for date formatting for the specified `locale`. + * The constructor must follow this specification: ECMAScript Internationalization API 1.0 (ECMA-402). + * `Intl.DateTimeFormat` is supported by most modern browsers, see http://caniuse.com/#search=intl, + * otherwise https://github.com/andyearnshaw/Intl.js is a good polyfill. + * + * By default, a built-in `DateTimeFormat` is used which supports the 'en-US' `locale`. + */ + DateTimeFormat: _propTypes2.default.func, + /** + * If true, automatically accept and close the picker on select a date. + */ + autoOk: _propTypes2.default.bool, + /** + * The css class name of the 'Cancel' button. + */ + cancelClassName: _propTypes2.default.string, + /** + * Override the default text of the 'Cancel' button. + */ + cancelLabel: _propTypes2.default.node, + /** + * Override the inline-styles of the 'Cancel' button. + */ + cancelStyle: _propTypes2.default.object, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Used to control how the Date Picker will be displayed when the input field is focused. + * `dialog` (default) displays the DatePicker as a dialog with a modal. + * `inline` displays the DatePicker below the input field (similar to auto complete). + */ + container: _propTypes2.default.oneOf(['dialog', 'inline']), + /** + * This is the initial date value of the component. + * If either `value` or `valueLink` is provided they will override this + * prop with `value` taking precedence. + */ + defaultDate: _propTypes2.default.object, + /** + * Override the inline-styles of DatePickerDialog's Container element. + */ + dialogContainerStyle: _propTypes2.default.object, + /** + * Disables the year selection in the date picker. + */ + disableYearSelection: _propTypes2.default.bool, + /** + * Disables the DatePicker. + */ + disabled: _propTypes2.default.bool, + /** + * Used to change the first day of week. It varies from + * Saturday to Monday between different locales. + * The allowed range is 0 (Sunday) to 6 (Saturday). + * The default is `1`, Monday, as per ISO 8601. + */ + firstDayOfWeek: _propTypes2.default.number, + /** + * This function is called to format the date displayed in the input field, and should return a string. + * By default if no `locale` and `DateTimeFormat` is provided date objects are formatted to ISO 8601 YYYY-MM-DD. + * + * @param {object} date Date object to be formatted. + * @returns {any} The formatted date. + */ + formatDate: _propTypes2.default.func, + /** + * Hide date display + */ + hideCalendarDate: _propTypes2.default.bool, + /** + * Locale used for formatting the `DatePicker` date strings. Other than for 'en-US', you + * must provide a `DateTimeFormat` that supports the chosen `locale`. + */ + locale: _propTypes2.default.string, + /** + * The ending of a range of valid dates. The range includes the endDate. + * The default value is current date + 100 years. + */ + maxDate: _propTypes2.default.object, + /** + * The beginning of a range of valid dates. The range includes the startDate. + * The default value is current date - 100 years. + */ + minDate: _propTypes2.default.object, + /** + * Tells the component to display the picker in portrait or landscape mode. + */ + mode: _propTypes2.default.oneOf(['portrait', 'landscape']), + /** + * The css class name of the 'OK' button + */ + okClassName: _propTypes2.default.string, + /** + * Override the default text of the 'OK' button. + */ + okLabel: _propTypes2.default.node, + /** + * Override the inline-styles of the 'OK' button. + */ + okStyle: _propTypes2.default.object, + /** + * Callback function that is fired when the date value changes. + * + * @param {null} null Since there is no particular event associated with the change, + * the first argument will always be null. + * @param {object} date The new date. + */ + onChange: _propTypes2.default.func, + /** + * Callback function that is fired when a click event occurs on the Date Picker's `TextField`. + * + * @param {object} event Click event targeting the `TextField`. + */ + onClick: _propTypes2.default.func, + /** + * Callback function that is fired when the Date Picker's dialog is dismissed. + */ + onDismiss: _propTypes2.default.func, + /** + * Callback function that is fired when the Date Picker's `TextField` gains focus. + */ + onFocus: _propTypes2.default.func, + /** + * Callback function that is fired when the Date Picker's dialog is shown. + */ + onShow: _propTypes2.default.func, + /** + * If true sets the datepicker to open to year selection first. + */ + openToYearSelection: _propTypes2.default.bool, + /** + * Callback function used to determine if a day's entry should be disabled on the calendar. + * + * @param {object} day Date object of a day. + * @returns {boolean} Indicates whether the day should be disabled. + */ + shouldDisableDate: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Override the inline-styles of DatePicker's TextField element. + */ + textFieldStyle: _propTypes2.default.object, + /** + * This object should contain methods needed to build the calendar system. + * + * Useful for building a custom calendar system. Refer to the + * [source code](https://github.com/mui-org/material-ui/blob/v0.x/src/DatePicker/dateUtils.js) + * and an [example implementation](https://github.com/alitaheri/material-ui-persian-date-picker-utils) + * for more information. + */ + utils: _propTypes2.default.object, + /** + * Sets the date for the Date Picker programmatically. + */ + value: _propTypes2.default.object +} : void 0; +exports.default = DatePicker; \ No newline at end of file diff --git a/DatePicker/DatePickerDialog.js b/DatePicker/DatePickerDialog.js new file mode 100644 index 00000000000000..95b4483f2fe244 --- /dev/null +++ b/DatePicker/DatePickerDialog.js @@ -0,0 +1,255 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); + +var _defineProperty3 = _interopRequireDefault(_defineProperty2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactEventListener = require('react-event-listener'); + +var _reactEventListener2 = _interopRequireDefault(_reactEventListener); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _Calendar = require('./Calendar'); + +var _Calendar2 = _interopRequireDefault(_Calendar); + +var _Dialog = require('../Dialog'); + +var _Dialog2 = _interopRequireDefault(_Dialog); + +var _Popover = require('../Popover/Popover'); + +var _Popover2 = _interopRequireDefault(_Popover); + +var _PopoverAnimationVertical = require('../Popover/PopoverAnimationVertical'); + +var _PopoverAnimationVertical2 = _interopRequireDefault(_PopoverAnimationVertical); + +var _dateUtils = require('./dateUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var DatePickerDialog = function (_Component) { + (0, _inherits3.default)(DatePickerDialog, _Component); + + function DatePickerDialog() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, DatePickerDialog); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DatePickerDialog.__proto__ || (0, _getPrototypeOf2.default)(DatePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + open: false + }, _this.show = function () { + if (_this.props.onShow && !_this.state.open) { + _this.props.onShow(); + } + + _this.setState({ + open: true + }); + }, _this.dismiss = function () { + if (_this.props.onDismiss && _this.state.open) { + _this.props.onDismiss(); + } + + _this.setState({ + open: false + }); + }, _this.handleClickDay = function () { + if (_this.props.autoOk) { + setTimeout(_this.handleClickOk, 300); + } + }, _this.handleClickCancel = function () { + _this.dismiss(); + }, _this.handleRequestClose = function () { + _this.dismiss(); + }, _this.handleClickOk = function () { + if (_this.props.onAccept && !_this.refs.calendar.isSelectedDateDisabled()) { + _this.props.onAccept(_this.refs.calendar.getSelectedDate()); + } + + _this.setState({ + open: false + }); + }, _this.handleWindowKeyUp = function (event) { + switch ((0, _keycode2.default)(event)) { + case 'enter': + _this.handleClickOk(); + break; + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(DatePickerDialog, [{ + key: 'render', + value: function render() { + var _React$createElement; + + var _props = this.props, + DateTimeFormat = _props.DateTimeFormat, + autoOk = _props.autoOk, + cancelClassName = _props.cancelClassName, + cancelLabel = _props.cancelLabel, + cancelStyle = _props.cancelStyle, + container = _props.container, + containerStyle = _props.containerStyle, + disableYearSelection = _props.disableYearSelection, + initialDate = _props.initialDate, + firstDayOfWeek = _props.firstDayOfWeek, + locale = _props.locale, + maxDate = _props.maxDate, + minDate = _props.minDate, + mode = _props.mode, + okClassName = _props.okClassName, + okLabel = _props.okLabel, + okStyle = _props.okStyle, + onAccept = _props.onAccept, + onDismiss = _props.onDismiss, + onShow = _props.onShow, + openToYearSelection = _props.openToYearSelection, + shouldDisableDate = _props.shouldDisableDate, + hideCalendarDate = _props.hideCalendarDate, + style = _props.style, + animation = _props.animation, + utils = _props.utils, + other = (0, _objectWithoutProperties3.default)(_props, ['DateTimeFormat', 'autoOk', 'cancelClassName', 'cancelLabel', 'cancelStyle', 'container', 'containerStyle', 'disableYearSelection', 'initialDate', 'firstDayOfWeek', 'locale', 'maxDate', 'minDate', 'mode', 'okClassName', 'okLabel', 'okStyle', 'onAccept', 'onDismiss', 'onShow', 'openToYearSelection', 'shouldDisableDate', 'hideCalendarDate', 'style', 'animation', 'utils']); + var open = this.state.open; + + + var styles = { + dialogContent: { + width: !hideCalendarDate && mode === 'landscape' ? 479 : 310 + }, + dialogBodyContent: { + padding: 0, + minHeight: hideCalendarDate || mode === 'landscape' ? 330 : 434, + minWidth: hideCalendarDate || mode !== 'landscape' ? 310 : 479 + } + }; + + var Container = container === 'inline' ? _Popover2.default : _Dialog2.default; + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { ref: 'root' }), + _react2.default.createElement( + Container, + { + anchorEl: this.refs.root // For Popover + , animation: animation || _PopoverAnimationVertical2.default // For Popover + , bodyStyle: styles.dialogBodyContent, + contentStyle: styles.dialogContent, + ref: 'dialog', + repositionOnUpdate: true, + open: open, + onRequestClose: this.handleRequestClose, + style: (0, _simpleAssign2.default)(styles.dialogBodyContent, containerStyle) + }, + _react2.default.createElement(_reactEventListener2.default, { + target: 'window', + onKeyUp: this.handleWindowKeyUp + }), + _react2.default.createElement(_Calendar2.default, (_React$createElement = { + autoOk: autoOk, + DateTimeFormat: DateTimeFormat, + cancelClassName: cancelClassName, + cancelLabel: cancelLabel, + cancelStyle: cancelStyle + }, (0, _defineProperty3.default)(_React$createElement, 'DateTimeFormat', DateTimeFormat), (0, _defineProperty3.default)(_React$createElement, 'disableYearSelection', disableYearSelection), (0, _defineProperty3.default)(_React$createElement, 'firstDayOfWeek', firstDayOfWeek), (0, _defineProperty3.default)(_React$createElement, 'initialDate', initialDate), (0, _defineProperty3.default)(_React$createElement, 'locale', locale), (0, _defineProperty3.default)(_React$createElement, 'onClickDay', this.handleClickDay), (0, _defineProperty3.default)(_React$createElement, 'maxDate', maxDate), (0, _defineProperty3.default)(_React$createElement, 'minDate', minDate), (0, _defineProperty3.default)(_React$createElement, 'mode', mode), (0, _defineProperty3.default)(_React$createElement, 'open', open), (0, _defineProperty3.default)(_React$createElement, 'ref', 'calendar'), (0, _defineProperty3.default)(_React$createElement, 'onTouchTapCancel', this.handleTouchTapCancel), (0, _defineProperty3.default)(_React$createElement, 'onTouchTapOk', this.handleTouchTapOk), (0, _defineProperty3.default)(_React$createElement, 'okClassName', okClassName), (0, _defineProperty3.default)(_React$createElement, 'okLabel', okLabel), (0, _defineProperty3.default)(_React$createElement, 'okStyle', okStyle), (0, _defineProperty3.default)(_React$createElement, 'onClickCancel', this.handleClickCancel), (0, _defineProperty3.default)(_React$createElement, 'onClickOk', this.handleClickOk), (0, _defineProperty3.default)(_React$createElement, 'openToYearSelection', openToYearSelection), (0, _defineProperty3.default)(_React$createElement, 'shouldDisableDate', shouldDisableDate), (0, _defineProperty3.default)(_React$createElement, 'hideCalendarDate', hideCalendarDate), (0, _defineProperty3.default)(_React$createElement, 'utils', utils), _React$createElement)) + ) + ); + } + }]); + return DatePickerDialog; +}(_react.Component); + +DatePickerDialog.defaultProps = { + DateTimeFormat: _dateUtils.dateTimeFormat, + cancelLabel: 'Cancel', + container: 'dialog', + locale: 'en-US', + okLabel: 'OK', + openToYearSelection: false +}; +DatePickerDialog.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? DatePickerDialog.propTypes = { + DateTimeFormat: _propTypes2.default.func, + animation: _propTypes2.default.func, + autoOk: _propTypes2.default.bool, + cancelLabel: _propTypes2.default.node, + container: _propTypes2.default.oneOf(['dialog', 'inline']), + containerStyle: _propTypes2.default.object, + disableYearSelection: _propTypes2.default.bool, + firstDayOfWeek: _propTypes2.default.number, + hideCalendarDate: _propTypes2.default.bool, + initialDate: _propTypes2.default.object, + locale: _propTypes2.default.string, + maxDate: _propTypes2.default.object, + minDate: _propTypes2.default.object, + mode: _propTypes2.default.oneOf(['portrait', 'landscape']), + okLabel: _propTypes2.default.node, + onAccept: _propTypes2.default.func, + onDismiss: _propTypes2.default.func, + onShow: _propTypes2.default.func, + open: _propTypes2.default.bool, + openToYearSelection: _propTypes2.default.bool, + shouldDisableDate: _propTypes2.default.func, + style: _propTypes2.default.object, + utils: _propTypes2.default.object +} : void 0; +exports.default = DatePickerDialog; \ No newline at end of file diff --git a/DatePicker/DayButton.js b/DatePicker/DayButton.js new file mode 100644 index 00000000000000..e4e6ef4a5b2eb0 --- /dev/null +++ b/DatePicker/DayButton.js @@ -0,0 +1,199 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _dateUtils = require('./dateUtils'); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var date = props.date, + disabled = props.disabled, + selected = props.selected; + var hover = state.hover; + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + datePicker = _context$muiTheme.datePicker; + + + var labelColor = baseTheme.palette.textColor; + var buttonStateOpacity = 0; + var buttonStateTransform = 'scale(0)'; + + if (hover || selected) { + labelColor = datePicker.selectTextColor; + buttonStateOpacity = selected ? 1 : 0.6; + buttonStateTransform = 'scale(1)'; + } else if ((0, _dateUtils.isEqualDate)(date, new Date())) { + labelColor = datePicker.color; + } + + return { + root: { + boxSizing: 'border-box', + fontWeight: '400', + opacity: disabled && '0.4', + padding: '4px 0px', + position: 'relative', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) + width: 42 + }, + label: { + color: labelColor, + fontWeight: '400', + position: 'relative' + }, + buttonState: { + backgroundColor: datePicker.selectColor, + borderRadius: '50%', + height: 34, + left: 4, + opacity: buttonStateOpacity, + position: 'absolute', + top: 0, + transform: buttonStateTransform, + transition: _transitions2.default.easeOut(), + width: 34 + } + }; +} + +var DayButton = function (_Component) { + (0, _inherits3.default)(DayButton, _Component); + + function DayButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, DayButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DayButton.__proto__ || (0, _getPrototypeOf2.default)(DayButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hover: false + }, _this.handleMouseEnter = function () { + if (!_this.props.disabled) { + _this.setState({ hover: true }); + } + }, _this.handleMouseLeave = function () { + if (!_this.props.disabled) { + _this.setState({ hover: false }); + } + }, _this.handleClick = function (event) { + if (!_this.props.disabled && _this.props.onClick) { + _this.props.onClick(event, _this.props.date); + } + }, _this.handleKeyboardFocus = function (event, keyboardFocused) { + if (!_this.props.disabled && _this.props.onKeyboardFocus) { + _this.props.onKeyboardFocus(event, keyboardFocused, _this.props.date); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(DayButton, [{ + key: 'render', + value: function render() { + var _props = this.props, + DateTimeFormat = _props.DateTimeFormat, + date = _props.date, + disabled = _props.disabled, + locale = _props.locale, + onClick = _props.onClick, + selected = _props.selected, + other = (0, _objectWithoutProperties3.default)(_props, ['DateTimeFormat', 'date', 'disabled', 'locale', 'onClick', 'selected']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + return date ? _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, { + disabled: disabled, + disableFocusRipple: true, + disableTouchRipple: true, + onKeyboardFocus: this.handleKeyboardFocus, + onMouseEnter: this.handleMouseEnter, + onMouseLeave: this.handleMouseLeave, + onClick: this.handleClick, + style: styles.root + }), + _react2.default.createElement('div', { style: prepareStyles(styles.buttonState) }), + _react2.default.createElement( + 'span', + { style: prepareStyles(styles.label) }, + new DateTimeFormat(locale, { + day: 'numeric' + }).format(date) + ) + ) : _react2.default.createElement('span', { style: prepareStyles(styles.root) }); + } + }]); + return DayButton; +}(_react.Component); + +DayButton.defaultProps = { + selected: false, + disabled: false +}; +DayButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? DayButton.propTypes = { + DateTimeFormat: _propTypes2.default.func.isRequired, + date: _propTypes2.default.object, + disabled: _propTypes2.default.bool, + locale: _propTypes2.default.string.isRequired, + onClick: _propTypes2.default.func, + onKeyboardFocus: _propTypes2.default.func, + selected: _propTypes2.default.bool +} : void 0; +exports.default = DayButton; \ No newline at end of file diff --git a/DatePicker/YearButton.js b/DatePicker/YearButton.js new file mode 100644 index 00000000000000..998eb97d49c0af --- /dev/null +++ b/DatePicker/YearButton.js @@ -0,0 +1,162 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var selected = props.selected, + year = props.year, + utils = props.utils; + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + datePicker = _context$muiTheme.datePicker; + var hover = state.hover; + + + return { + root: { + boxSizing: 'border-box', + color: year === utils.getYear(new Date()) && datePicker.color, + display: 'block', + fontSize: 14, + margin: '0 auto', + position: 'relative', + textAlign: 'center', + lineHeight: 'inherit', + WebkitTapHighlightColor: 'rgba(0,0,0,0)' // Remove mobile color flashing (deprecated) + }, + label: { + alignSelf: 'center', + color: hover || selected ? datePicker.color : baseTheme.palette.textColor, + fontSize: selected ? 26 : 17, + fontWeight: hover ? 450 : selected ? 500 : 400, + position: 'relative', + top: -1 + } + }; +} + +var YearButton = function (_Component) { + (0, _inherits3.default)(YearButton, _Component); + + function YearButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, YearButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = YearButton.__proto__ || (0, _getPrototypeOf2.default)(YearButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hover: false + }, _this.handleMouseEnter = function () { + _this.setState({ hover: true }); + }, _this.handleMouseLeave = function () { + _this.setState({ hover: false }); + }, _this.handleClick = function (event) { + if (_this.props.onClick) { + _this.props.onClick(event, _this.props.year); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(YearButton, [{ + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + className = _props.className, + onClick = _props.onClick, + selected = _props.selected, + year = _props.year, + utils = _props.utils, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'onClick', 'selected', 'year', 'utils']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + return _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, { + disableFocusRipple: true, + disableTouchRipple: true, + onMouseEnter: this.handleMouseEnter, + onMouseLeave: this.handleMouseLeave, + onClick: this.handleClick, + style: styles.root + }), + _react2.default.createElement( + 'span', + { style: prepareStyles(styles.label) }, + children + ) + ); + } + }]); + return YearButton; +}(_react.Component); + +YearButton.defaultProps = { + selected: false +}; +YearButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? YearButton.propTypes = { + children: _propTypes2.default.node.isRequired, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + onClick: _propTypes2.default.func, + selected: _propTypes2.default.bool, + utils: _propTypes2.default.object.isRequired, + year: _propTypes2.default.number.isRequired +} : void 0; +exports.default = YearButton; \ No newline at end of file diff --git a/DatePicker/dateUtils.js b/DatePicker/dateUtils.js new file mode 100644 index 00000000000000..454e78b03085c6 --- /dev/null +++ b/DatePicker/dateUtils.js @@ -0,0 +1,204 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.defaultUtils = undefined; +exports.dateTimeFormat = dateTimeFormat; +exports.getYear = getYear; +exports.setYear = setYear; +exports.addDays = addDays; +exports.addMonths = addMonths; +exports.addYears = addYears; +exports.cloneDate = cloneDate; +exports.cloneAsDate = cloneAsDate; +exports.getDaysInMonth = getDaysInMonth; +exports.getFirstDayOfMonth = getFirstDayOfMonth; +exports.getFirstDayOfWeek = getFirstDayOfWeek; +exports.getWeekArray = getWeekArray; +exports.localizedWeekday = localizedWeekday; +exports.formatIso = formatIso; +exports.isEqualDate = isEqualDate; +exports.isBeforeDate = isBeforeDate; +exports.isAfterDate = isAfterDate; +exports.isBetweenDates = isBetweenDates; +exports.monthDiff = monthDiff; +exports.yearDiff = yearDiff; + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var dayAbbreviation = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; +var dayList = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; +var monthList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; +var monthLongList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; + +function dateTimeFormat(locale, options) { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(locale === 'en-US', 'Material-UI: The ' + locale + ' locale is not supported by the built-in DateTimeFormat.\n Use the `DateTimeFormat` prop to supply an alternative implementation.') : void 0; + + this.format = function (date) { + if (options.month === 'short' && options.weekday === 'short' && options.day === '2-digit') { + return dayList[date.getDay()] + ', ' + monthList[date.getMonth()] + ' ' + date.getDate(); + } else if (options.year === 'numeric' && options.month === 'numeric' && options.day === 'numeric') { + return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear(); + } else if (options.year === 'numeric' && options.month === 'long') { + return monthLongList[date.getMonth()] + ' ' + date.getFullYear(); + } else if (options.weekday === 'narrow') { + return dayAbbreviation[date.getDay()]; + } else if (options.year === 'numeric') { + return date.getFullYear().toString(); + } else if (options.day === 'numeric') { + return date.getDate(); + } else { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Wrong usage of DateTimeFormat') : void 0; + } + }; +} + +function getYear(d) { + return d.getFullYear(); +} + +function setYear(d, year) { + var newDate = cloneDate(d); + newDate.setFullYear(year); + return newDate; +} + +function addDays(d, days) { + var newDate = cloneDate(d); + newDate.setDate(d.getDate() + days); + return newDate; +} + +function addMonths(d, months) { + var newDate = cloneDate(d); + newDate.setMonth(d.getMonth() + months); + return newDate; +} + +function addYears(d, years) { + var newDate = cloneDate(d); + newDate.setFullYear(d.getFullYear() + years); + return newDate; +} + +function cloneDate(d) { + return new Date(d.getTime()); +} + +function cloneAsDate(d) { + var clonedDate = cloneDate(d); + clonedDate.setHours(0, 0, 0, 0); + return clonedDate; +} + +function getDaysInMonth(d) { + var resultDate = getFirstDayOfMonth(d); + + resultDate.setMonth(resultDate.getMonth() + 1); + resultDate.setDate(resultDate.getDate() - 1); + + return resultDate.getDate(); +} + +function getFirstDayOfMonth(d) { + return new Date(d.getFullYear(), d.getMonth(), 1); +} + +function getFirstDayOfWeek() { + var now = new Date(); + return new Date(now.setDate(now.getDate() - now.getDay())); +} + +function getWeekArray(d, firstDayOfWeek) { + var dayArray = []; + var daysInMonth = getDaysInMonth(d); + var weekArray = []; + var week = []; + + for (var i = 1; i <= daysInMonth; i++) { + dayArray.push(new Date(d.getFullYear(), d.getMonth(), i)); + } + + var addWeek = function addWeek(week) { + var emptyDays = 7 - week.length; + for (var _i = 0; _i < emptyDays; ++_i) { + week[weekArray.length ? 'push' : 'unshift'](null); + } + weekArray.push(week); + }; + + dayArray.forEach(function (day) { + if (week.length > 0 && day.getDay() === firstDayOfWeek) { + addWeek(week); + week = []; + } + week.push(day); + if (dayArray.indexOf(day) === dayArray.length - 1) { + addWeek(week); + } + }); + + return weekArray; +} + +function localizedWeekday(DateTimeFormat, locale, day, firstDayOfWeek) { + var weekdayFormatter = new DateTimeFormat(locale, { weekday: 'narrow' }); + var firstDayDate = getFirstDayOfWeek(); + + return weekdayFormatter.format(addDays(firstDayDate, day + firstDayOfWeek)); +} + +// Convert date to ISO 8601 (YYYY-MM-DD) date string, accounting for current timezone +function formatIso(date) { + return new Date(date.toDateString() + ' 12:00:00 +0000').toISOString().substring(0, 10); +} + +function isEqualDate(d1, d2) { + return d1 && d2 && d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate(); +} + +function isBeforeDate(d1, d2) { + var date1 = cloneAsDate(d1); + var date2 = cloneAsDate(d2); + + return date1.getTime() < date2.getTime(); +} + +function isAfterDate(d1, d2) { + var date1 = cloneAsDate(d1); + var date2 = cloneAsDate(d2); + + return date1.getTime() > date2.getTime(); +} + +function isBetweenDates(dateToCheck, startDate, endDate) { + return !isBeforeDate(dateToCheck, startDate) && !isAfterDate(dateToCheck, endDate); +} + +function monthDiff(d1, d2) { + var m = void 0; + m = (d1.getFullYear() - d2.getFullYear()) * 12; + m += d1.getMonth(); + m -= d2.getMonth(); + return m; +} + +function yearDiff(d1, d2) { + return ~~(monthDiff(d1, d2) / 12); +} + +var defaultUtils = exports.defaultUtils = { + getYear: getYear, + setYear: setYear, + addDays: addDays, + addMonths: addMonths, + addYears: addYears, + getFirstDayOfMonth: getFirstDayOfMonth, + getWeekArray: getWeekArray, + monthDiff: monthDiff +}; \ No newline at end of file diff --git a/DatePicker/index.js b/DatePicker/index.js new file mode 100644 index 00000000000000..23482225750fdb --- /dev/null +++ b/DatePicker/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _DatePicker = require('./DatePicker'); + +var _DatePicker2 = _interopRequireDefault(_DatePicker); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _DatePicker2.default; \ No newline at end of file diff --git a/Dialog/Dialog.js b/Dialog/Dialog.js new file mode 100644 index 00000000000000..9a94742325aac6 --- /dev/null +++ b/Dialog/Dialog.js @@ -0,0 +1,607 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _reactEventListener = require('react-event-listener'); + +var _reactEventListener2 = _interopRequireDefault(_reactEventListener); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _Overlay = require('../internal/Overlay'); + +var _Overlay2 = _interopRequireDefault(_Overlay); + +var _RenderToLayer = require('../internal/RenderToLayer'); + +var _RenderToLayer2 = _interopRequireDefault(_RenderToLayer); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _TransitionGroup = require('react-transition-group/TransitionGroup'); + +var _TransitionGroup2 = _interopRequireDefault(_TransitionGroup); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var TransitionItem = function (_Component) { + (0, _inherits3.default)(TransitionItem, _Component); + + function TransitionItem() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TransitionItem); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TransitionItem.__proto__ || (0, _getPrototypeOf2.default)(TransitionItem)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + style: {} + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TransitionItem, [{ + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.enterTimeout); + clearTimeout(this.leaveTimeout); + } + }, { + key: 'componentWillEnter', + value: function componentWillEnter(callback) { + this.componentWillAppear(callback); + } + }, { + key: 'componentWillAppear', + value: function componentWillAppear(callback) { + var spacing = this.context.muiTheme.baseTheme.spacing; + + this.setState({ + style: { + opacity: 1, + transform: 'translate(0, ' + spacing.desktopKeylineIncrement + 'px)' + } + }); + + this.enterTimeout = setTimeout(callback, 450); // matches transition duration + } + }, { + key: 'componentWillLeave', + value: function componentWillLeave(callback) { + this.setState({ + style: { + opacity: 0, + transform: 'translate(0, 0)' + } + }); + + this.leaveTimeout = setTimeout(callback, 450); // matches transition duration + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + style = _props.style, + children = _props.children, + other = (0, _objectWithoutProperties3.default)(_props, ['style', 'children']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, this.state.style, style)) }), + children + ); + } + }]); + return TransitionItem; +}(_react.Component); + +TransitionItem.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TransitionItem.propTypes = { + children: _propTypes2.default.node, + style: _propTypes2.default.object +} : void 0; + + +function getStyles(props, context) { + var autoScrollBodyContent = props.autoScrollBodyContent, + open = props.open; + var _context$muiTheme = context.muiTheme, + _context$muiTheme$bas = _context$muiTheme.baseTheme, + spacing = _context$muiTheme$bas.spacing, + palette = _context$muiTheme$bas.palette, + dialog = _context$muiTheme.dialog, + zIndex = _context$muiTheme.zIndex; + + + var gutter = spacing.desktopGutter; + var borderScroll = '1px solid ' + palette.borderColor; + + return { + root: { + position: 'fixed', + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) + zIndex: zIndex.dialog, + top: 0, + left: open ? 0 : -10000, + width: '100%', + height: '100%', + transition: open ? _transitions2.default.easeOut('0ms', 'left', '0ms') : _transitions2.default.easeOut('0ms', 'left', '450ms') + }, + content: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) + transition: _transitions2.default.easeOut(), + position: 'relative', + width: '75%', + maxWidth: spacing.desktopKeylineIncrement * 12, + margin: '0 auto', + zIndex: zIndex.dialog + }, + actionsContainer: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) + padding: 8, + width: '100%', + textAlign: 'right', + marginTop: autoScrollBodyContent ? -1 : 0 + }, + overlay: { + zIndex: zIndex.dialogOverlay + }, + title: { + margin: 0, + padding: gutter + 'px ' + gutter + 'px 20px ' + gutter + 'px', + color: palette.textColor, + fontSize: dialog.titleFontSize, + lineHeight: '32px', + fontWeight: 400, + marginBottom: autoScrollBodyContent ? -1 : 0 + }, + body: { + fontSize: dialog.bodyFontSize, + color: dialog.bodyColor, + padding: (props.title ? 0 : gutter) + 'px ' + gutter + 'px ' + gutter + 'px', + boxSizing: 'border-box', + overflowY: autoScrollBodyContent ? 'auto' : 'hidden', + borderTop: autoScrollBodyContent ? borderScroll : 'none', + borderBottom: autoScrollBodyContent ? borderScroll : 'none' + } + }; +} + +var DialogInline = function (_Component2) { + (0, _inherits3.default)(DialogInline, _Component2); + + function DialogInline() { + var _ref2; + + var _temp2, _this2, _ret2; + + (0, _classCallCheck3.default)(this, DialogInline); + + for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + return _ret2 = (_temp2 = (_this2 = (0, _possibleConstructorReturn3.default)(this, (_ref2 = DialogInline.__proto__ || (0, _getPrototypeOf2.default)(DialogInline)).call.apply(_ref2, [this].concat(args))), _this2), _this2.handleClickOverlay = function () { + _this2.requestClose(false); + }, _this2.handleKeyUp = function (event) { + if ((0, _keycode2.default)(event) === 'esc') { + _this2.requestClose(false); + } + }, _this2.handleResize = function () { + _this2.positionDialog(); + }, _temp2), (0, _possibleConstructorReturn3.default)(_this2, _ret2); + } + + (0, _createClass3.default)(DialogInline, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.positionDialog(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.positionDialog(); + } + }, { + key: 'positionDialog', + value: function positionDialog() { + var _props2 = this.props, + actions = _props2.actions, + autoDetectWindowHeight = _props2.autoDetectWindowHeight, + autoScrollBodyContent = _props2.autoScrollBodyContent, + bodyStyle = _props2.bodyStyle, + open = _props2.open, + repositionOnUpdate = _props2.repositionOnUpdate, + title = _props2.title; + + + if (!open) { + return; + } + + var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; + var container = _reactDom2.default.findDOMNode(this); + var dialogWindow = _reactDom2.default.findDOMNode(this.refs.dialogWindow); + var dialogContent = _reactDom2.default.findDOMNode(this.refs.dialogContent); + var minPaddingTop = 16; + + // Reset the height in case the window was resized. + dialogWindow.style.height = ''; + dialogContent.style.height = ''; + + var dialogWindowHeight = dialogWindow.offsetHeight; + var paddingTop = (clientHeight - dialogWindowHeight) / 2 - 64; + if (paddingTop < minPaddingTop) paddingTop = minPaddingTop; + + // Vertically center the dialog window, but make sure it doesn't + // transition to that position. + if (repositionOnUpdate || !container.style.paddingTop) { + container.style.paddingTop = paddingTop + 'px'; + } + + // Force a height if the dialog is taller than clientHeight + if (autoDetectWindowHeight || autoScrollBodyContent) { + var styles = getStyles(this.props, this.context); + styles.body = (0, _simpleAssign2.default)(styles.body, bodyStyle); + var maxDialogContentHeight = clientHeight - 2 * 64; + + if (title) maxDialogContentHeight -= dialogContent.previousSibling.offsetHeight; + + if (_react2.default.Children.count(actions)) { + maxDialogContentHeight -= dialogContent.nextSibling.offsetHeight; + } + + dialogContent.style.maxHeight = maxDialogContentHeight + 'px'; + if (maxDialogContentHeight > dialogWindowHeight) { + dialogContent.style.borderBottom = 'none'; + dialogContent.style.borderTop = 'none'; + } + } + } + }, { + key: 'requestClose', + value: function requestClose(buttonClicked) { + if (!buttonClicked && this.props.modal) { + return; + } + + if (this.props.onRequestClose) { + this.props.onRequestClose(!!buttonClicked); + } + } + }, { + key: 'render', + value: function render() { + var _props3 = this.props, + actions = _props3.actions, + actionsContainerClassName = _props3.actionsContainerClassName, + actionsContainerStyle = _props3.actionsContainerStyle, + bodyClassName = _props3.bodyClassName, + bodyStyle = _props3.bodyStyle, + children = _props3.children, + className = _props3.className, + contentClassName = _props3.contentClassName, + contentStyle = _props3.contentStyle, + overlayClassName = _props3.overlayClassName, + overlayStyle = _props3.overlayStyle, + open = _props3.open, + paperClassName = _props3.paperClassName, + paperProps = _props3.paperProps, + style = _props3.style, + titleClassName = _props3.titleClassName, + titleStyle = _props3.titleStyle, + title = _props3.title; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + styles.root = (0, _simpleAssign2.default)(styles.root, style); + styles.content = (0, _simpleAssign2.default)(styles.content, contentStyle); + styles.body = (0, _simpleAssign2.default)(styles.body, bodyStyle); + styles.actionsContainer = (0, _simpleAssign2.default)(styles.actionsContainer, actionsContainerStyle); + styles.overlay = (0, _simpleAssign2.default)(styles.overlay, overlayStyle); + styles.title = (0, _simpleAssign2.default)(styles.title, titleStyle); + + var actionsContainer = _react2.default.Children.count(actions) > 0 && _react2.default.createElement( + 'div', + { className: actionsContainerClassName, style: prepareStyles(styles.actionsContainer) }, + _react2.default.Children.toArray(actions) + ); + + var titleElement = title; + if (_react2.default.isValidElement(title)) { + titleElement = _react2.default.cloneElement(title, { + className: title.props.className || titleClassName, + style: prepareStyles((0, _simpleAssign2.default)(styles.title, title.props.style)) + }); + } else if (typeof title === 'string') { + titleElement = _react2.default.createElement( + 'h3', + { className: titleClassName, style: prepareStyles(styles.title) }, + title + ); + } + + return _react2.default.createElement( + 'div', + { className: className, style: prepareStyles(styles.root) }, + open && _react2.default.createElement(_reactEventListener2.default, { + target: 'window', + onKeyUp: this.handleKeyUp, + onResize: this.handleResize + }), + _react2.default.createElement( + _TransitionGroup2.default, + { + component: 'div', + ref: 'dialogWindow', + transitionAppear: true, + transitionAppearTimeout: 450, + transitionEnter: true, + transitionEnterTimeout: 450 + }, + open && _react2.default.createElement( + TransitionItem, + { + className: contentClassName, + style: styles.content + }, + _react2.default.createElement( + _Paper2.default, + (0, _extends3.default)({ className: paperClassName, zDepth: 4 }, paperProps), + titleElement, + _react2.default.createElement( + 'div', + { + ref: 'dialogContent', + className: bodyClassName, + style: prepareStyles(styles.body) + }, + children + ), + actionsContainer + ) + ) + ), + _react2.default.createElement(_Overlay2.default, { + show: open, + className: overlayClassName, + style: styles.overlay, + onClick: this.handleClickOverlay + }) + ); + } + }]); + return DialogInline; +}(_react.Component); + +DialogInline.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? DialogInline.propTypes = { + actions: _propTypes2.default.node, + actionsContainerClassName: _propTypes2.default.string, + actionsContainerStyle: _propTypes2.default.object, + autoDetectWindowHeight: _propTypes2.default.bool, + autoScrollBodyContent: _propTypes2.default.bool, + bodyClassName: _propTypes2.default.string, + bodyStyle: _propTypes2.default.object, + children: _propTypes2.default.node, + className: _propTypes2.default.string, + contentClassName: _propTypes2.default.string, + contentStyle: _propTypes2.default.object, + modal: _propTypes2.default.bool, + onRequestClose: _propTypes2.default.func, + open: _propTypes2.default.bool.isRequired, + overlayClassName: _propTypes2.default.string, + overlayStyle: _propTypes2.default.object, + paperClassName: _propTypes2.default.string, + paperProps: _propTypes2.default.object, + repositionOnUpdate: _propTypes2.default.bool, + style: _propTypes2.default.object, + title: _propTypes2.default.node, + titleClassName: _propTypes2.default.string, + titleStyle: _propTypes2.default.object +} : void 0; + +var Dialog = function (_Component3) { + (0, _inherits3.default)(Dialog, _Component3); + + function Dialog() { + var _ref3; + + var _temp3, _this3, _ret3; + + (0, _classCallCheck3.default)(this, Dialog); + + for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { + args[_key3] = arguments[_key3]; + } + + return _ret3 = (_temp3 = (_this3 = (0, _possibleConstructorReturn3.default)(this, (_ref3 = Dialog.__proto__ || (0, _getPrototypeOf2.default)(Dialog)).call.apply(_ref3, [this].concat(args))), _this3), _this3.renderLayer = function () { + return _react2.default.createElement(DialogInline, _this3.props); + }, _temp3), (0, _possibleConstructorReturn3.default)(_this3, _ret3); + } + + (0, _createClass3.default)(Dialog, [{ + key: 'render', + value: function render() { + return _react2.default.createElement(_RenderToLayer2.default, { render: this.renderLayer, open: true, useLayerForClickAway: false }); + } + }]); + return Dialog; +}(_react.Component); + +Dialog.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +Dialog.defaultProps = { + autoDetectWindowHeight: true, + autoScrollBodyContent: false, + modal: false, + repositionOnUpdate: true +}; +process.env.NODE_ENV !== "production" ? Dialog.propTypes = { + /** + * Action buttons to display below the Dialog content (`children`). + * This property accepts either a React element, or an array of React elements. + */ + actions: _propTypes2.default.node, + /** + * The `className` to add to the actions container's root element. + */ + actionsContainerClassName: _propTypes2.default.string, + /** + * Overrides the inline-styles of the actions container's root element. + */ + actionsContainerStyle: _propTypes2.default.object, + /** + * If set to true, the height of the `Dialog` will be auto detected. A max height + * will be enforced so that the content does not extend beyond the viewport. + */ + autoDetectWindowHeight: _propTypes2.default.bool, + /** + * If set to true, the body content of the `Dialog` will be scrollable. + */ + autoScrollBodyContent: _propTypes2.default.bool, + /** + * The `className` to add to the content's root element under the title. + */ + bodyClassName: _propTypes2.default.string, + /** + * Overrides the inline-styles of the content's root element under the title. + */ + bodyStyle: _propTypes2.default.object, + /** + * The contents of the `Dialog`. + */ + children: _propTypes2.default.node, + /** + * @ignore + */ + className: _propTypes2.default.string, + /** + * The `className` to add to the content container. + */ + contentClassName: _propTypes2.default.string, + /** + * Overrides the inline-styles of the content container. + */ + contentStyle: _propTypes2.default.object, + /** + * Force the user to use one of the actions in the `Dialog`. + * Clicking outside the `Dialog` will not trigger the `onRequestClose`. + */ + modal: _propTypes2.default.bool, + /** + * Fired when the `Dialog` is requested to be closed by a click outside the `Dialog` or on the buttons. + * + * @param {bool} buttonClicked Determines whether a button click triggered this request. + */ + onRequestClose: _propTypes2.default.func, + /** + * Controls whether the Dialog is opened or not. + */ + open: _propTypes2.default.bool.isRequired, + /** + * The `className` to add to the `Overlay` component that is rendered behind the `Dialog`. + */ + overlayClassName: _propTypes2.default.string, + /** + * Overrides the inline-styles of the `Overlay` component that is rendered behind the `Dialog`. + */ + overlayStyle: _propTypes2.default.object, + /** + * The CSS class name of the `Paper` element. + */ + paperClassName: _propTypes2.default.string, + /** + * Properties applied to the `Paper` element. + */ + paperProps: _propTypes2.default.object, + /** + * Determines whether the `Dialog` should be repositioned when it's contents are updated. + */ + repositionOnUpdate: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The title to display on the `Dialog`. Could be number, string, element or an array containing these types. + */ + title: _propTypes2.default.node, + /** + * The `className` to add to the title's root container element. + */ + titleClassName: _propTypes2.default.string, + /** + * Overrides the inline-styles of the title's root container element. + */ + titleStyle: _propTypes2.default.object +} : void 0; +exports.default = Dialog; \ No newline at end of file diff --git a/Dialog/index.js b/Dialog/index.js new file mode 100644 index 00000000000000..c81be41cd17c68 --- /dev/null +++ b/Dialog/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Dialog = require('./Dialog'); + +var _Dialog2 = _interopRequireDefault(_Dialog); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Dialog2.default; \ No newline at end of file diff --git a/Divider/Divider.js b/Divider/Divider.js new file mode 100644 index 00000000000000..f31b1ed4238411 --- /dev/null +++ b/Divider/Divider.js @@ -0,0 +1,73 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var Divider = function Divider(props, context) { + var inset = props.inset, + style = props.style, + other = (0, _objectWithoutProperties3.default)(props, ['inset', 'style']); + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + prepareStyles = _context$muiTheme.prepareStyles; + + + var styles = { + root: { + margin: 0, + marginTop: -1, + marginLeft: inset ? 72 : 0, + height: 1, + border: 'none', + backgroundColor: baseTheme.palette.borderColor + } + }; + + return _react2.default.createElement('hr', (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) })); +}; + +Divider.muiName = 'Divider'; + +process.env.NODE_ENV !== "production" ? Divider.propTypes = { + /** + * If true, the `Divider` will be indented. + */ + inset: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; + +Divider.defaultProps = { + inset: false +}; + +Divider.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; + +exports.default = Divider; \ No newline at end of file diff --git a/Divider/index.js b/Divider/index.js new file mode 100644 index 00000000000000..860bb70927946a --- /dev/null +++ b/Divider/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Divider = require('./Divider'); + +var _Divider2 = _interopRequireDefault(_Divider); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Divider2.default; \ No newline at end of file diff --git a/Drawer/Drawer.js b/Drawer/Drawer.js new file mode 100644 index 00000000000000..fe6c5c3c296f97 --- /dev/null +++ b/Drawer/Drawer.js @@ -0,0 +1,489 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _reactEventListener = require('react-event-listener'); + +var _reactEventListener2 = _interopRequireDefault(_reactEventListener); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _autoPrefix = require('../utils/autoPrefix'); + +var _autoPrefix2 = _interopRequireDefault(_autoPrefix); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _Overlay = require('../internal/Overlay'); + +var _Overlay2 = _interopRequireDefault(_Overlay); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var openNavEventHandler = null; + +var Drawer = function (_Component) { + (0, _inherits3.default)(Drawer, _Component); + + function Drawer() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Drawer); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Drawer.__proto__ || (0, _getPrototypeOf2.default)(Drawer)).call.apply(_ref, [this].concat(args))), _this), _this.handleClickOverlay = function (event) { + event.preventDefault(); + _this.close('clickaway'); + }, _this.handleKeyUp = function (event) { + if (_this.state.open && !_this.props.docked && (0, _keycode2.default)(event) === 'esc') { + _this.close('escape'); + } + }, _this.onBodyTouchStart = function (event) { + var swipeAreaWidth = _this.props.swipeAreaWidth; + + var touchStartX = _this.context.muiTheme.isRtl ? document.body.offsetWidth - event.touches[0].pageX : event.touches[0].pageX; + var touchStartY = event.touches[0].pageY; + + // Open only if swiping from far left (or right) while closed + if (swipeAreaWidth !== null && !_this.state.open) { + if (_this.props.openSecondary) { + // If openSecondary is true calculate from the far right + if (touchStartX < document.body.offsetWidth - swipeAreaWidth) return; + } else { + // If openSecondary is false calculate from the far left + if (touchStartX > swipeAreaWidth) return; + } + } + + if (!_this.state.open && (openNavEventHandler !== _this.onBodyTouchStart || _this.props.disableSwipeToOpen)) { + return; + } + + _this.maybeSwiping = true; + _this.touchStartX = touchStartX; + _this.touchStartY = touchStartY; + + document.body.addEventListener('touchmove', _this.onBodyTouchMove); + document.body.addEventListener('touchend', _this.onBodyTouchEnd); + document.body.addEventListener('touchcancel', _this.onBodyTouchEnd); + }, _this.onBodyTouchMove = function (event) { + var currentX = _this.context.muiTheme.isRtl ? document.body.offsetWidth - event.touches[0].pageX : event.touches[0].pageX; + var currentY = event.touches[0].pageY; + + if (_this.state.swiping) { + event.preventDefault(); + _this.setPosition(_this.getTranslateX(currentX)); + } else if (_this.maybeSwiping) { + var dXAbs = Math.abs(currentX - _this.touchStartX); + var dYAbs = Math.abs(currentY - _this.touchStartY); + // If the user has moved his thumb ten pixels in either direction, + // we can safely make an assumption about whether he was intending + // to swipe or scroll. + var threshold = 10; + + if (dXAbs > threshold && dYAbs <= threshold) { + _this.swipeStartX = currentX; + _this.setState({ + swiping: _this.state.open ? 'closing' : 'opening' + }); + _this.setPosition(_this.getTranslateX(currentX)); + } else if (dXAbs <= threshold && dYAbs > threshold) { + _this.onBodyTouchEnd(); + } + } + }, _this.onBodyTouchEnd = function (event) { + if (_this.state.swiping) { + var currentX = _this.context.muiTheme.isRtl ? document.body.offsetWidth - event.changedTouches[0].pageX : event.changedTouches[0].pageX; + var translateRatio = _this.getTranslateX(currentX) / _this.getMaxTranslateX(); + + _this.maybeSwiping = false; + var swiping = _this.state.swiping; + _this.setState({ + swiping: null + }); + + // We have to open or close after setting swiping to null, + // because only then CSS transition is enabled. + if (translateRatio > 0.5) { + if (swiping === 'opening') { + _this.setPosition(_this.getMaxTranslateX()); + } else { + _this.close('swipe'); + } + } else { + if (swiping === 'opening') { + _this.open('swipe'); + } else { + _this.setPosition(0); + } + } + } else { + _this.maybeSwiping = false; + } + + _this.removeBodyTouchListeners(); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Drawer, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.maybeSwiping = false; + this.touchStartX = null; + this.touchStartY = null; + this.swipeStartX = null; + + this.setState({ + open: this.props.open !== null ? this.props.open : this.props.docked, + swiping: null + }); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.enableSwipeHandling(); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + // If controlled then the open prop takes precedence. + if (nextProps.open !== null) { + this.setState({ + open: nextProps.open + }); + // Otherwise, if docked is changed, change the open state for when uncontrolled. + } else if (this.props.docked !== nextProps.docked) { + this.setState({ + open: nextProps.docked + }); + } + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.enableSwipeHandling(); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.disableSwipeHandling(); + this.removeBodyTouchListeners(); + } + }, { + key: 'getStyles', + value: function getStyles() { + var muiTheme = this.context.muiTheme; + var theme = muiTheme.drawer; + + var x = this.getTranslateMultiplier() * (this.state.open ? 0 : this.getMaxTranslateX()); + + var styles = { + root: { + height: '100%', + width: this.getTranslatedWidth() || theme.width, + position: 'fixed', + zIndex: muiTheme.zIndex.drawer, + left: 0, + top: 0, + transform: 'translate(' + x + 'px, 0)', + transition: !this.state.swiping && _transitions2.default.easeOut(null, 'transform', null), + backgroundColor: theme.color, + overflow: 'auto', + WebkitOverflowScrolling: 'touch' // iOS momentum scrolling + }, + overlay: { + zIndex: muiTheme.zIndex.drawerOverlay, + pointerEvents: this.state.open ? 'auto' : 'none' // Bypass mouse events when left nav is closing. + }, + rootWhenOpenRight: { + left: 'auto', + right: 0 + } + }; + + return styles; + } + }, { + key: 'shouldShow', + value: function shouldShow() { + return this.state.open || !!this.state.swiping; // component is swiping + } + }, { + key: 'close', + value: function close(reason) { + if (this.props.open === null) this.setState({ open: false }); + if (this.props.onRequestChange) this.props.onRequestChange(false, reason); + return this; + } + }, { + key: 'open', + value: function open(reason) { + if (this.props.open === null) this.setState({ open: true }); + if (this.props.onRequestChange) this.props.onRequestChange(true, reason); + return this; + } + }, { + key: 'getTranslatedWidth', + value: function getTranslatedWidth() { + if (typeof this.props.width === 'string') { + if (!/^\d+(\.\d+)?%$/.test(this.props.width)) { + throw new Error('Not a valid percentage format.'); + } + var width = parseFloat(this.props.width) / 100.0; + // We are doing our best on the Server to render a consistent UI, hence the + // default value of 10000 + return typeof window !== 'undefined' ? width * window.innerWidth : 10000; + } else { + return this.props.width; + } + } + }, { + key: 'getMaxTranslateX', + value: function getMaxTranslateX() { + var width = this.getTranslatedWidth() || this.context.muiTheme.drawer.width; + return width + 10; + } + }, { + key: 'getTranslateMultiplier', + value: function getTranslateMultiplier() { + return this.props.openSecondary ? 1 : -1; + } + }, { + key: 'enableSwipeHandling', + value: function enableSwipeHandling() { + if (!this.props.docked) { + document.body.addEventListener('touchstart', this.onBodyTouchStart); + if (!openNavEventHandler) { + openNavEventHandler = this.onBodyTouchStart; + } + } else { + this.disableSwipeHandling(); + } + } + }, { + key: 'disableSwipeHandling', + value: function disableSwipeHandling() { + document.body.removeEventListener('touchstart', this.onBodyTouchStart); + if (openNavEventHandler === this.onBodyTouchStart) { + openNavEventHandler = null; + } + } + }, { + key: 'removeBodyTouchListeners', + value: function removeBodyTouchListeners() { + document.body.removeEventListener('touchmove', this.onBodyTouchMove); + document.body.removeEventListener('touchend', this.onBodyTouchEnd); + document.body.removeEventListener('touchcancel', this.onBodyTouchEnd); + } + }, { + key: 'setPosition', + value: function setPosition(translateX) { + var rtlTranslateMultiplier = this.context.muiTheme.isRtl ? -1 : 1; + var drawer = _reactDom2.default.findDOMNode(this.refs.clickAwayableElement); + var transformCSS = 'translate(' + this.getTranslateMultiplier() * rtlTranslateMultiplier * translateX + 'px, 0)'; + this.refs.overlay.setOpacity(1 - translateX / this.getMaxTranslateX()); + _autoPrefix2.default.set(drawer.style, 'transform', transformCSS); + } + }, { + key: 'getTranslateX', + value: function getTranslateX(currentX) { + return Math.min(Math.max(this.state.swiping === 'closing' ? this.getTranslateMultiplier() * (currentX - this.swipeStartX) : this.getMaxTranslateX() - this.getTranslateMultiplier() * (this.swipeStartX - currentX), 0), this.getMaxTranslateX()); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + className = _props.className, + containerClassName = _props.containerClassName, + containerStyle = _props.containerStyle, + docked = _props.docked, + openSecondary = _props.openSecondary, + overlayClassName = _props.overlayClassName, + overlayStyle = _props.overlayStyle, + style = _props.style, + zDepth = _props.zDepth; + + + var styles = this.getStyles(); + + var overlay = void 0; + if (!docked) { + overlay = _react2.default.createElement(_Overlay2.default, { + ref: 'overlay', + show: this.shouldShow(), + className: overlayClassName, + style: (0, _simpleAssign2.default)(styles.overlay, overlayStyle), + transitionEnabled: !this.state.swiping, + onClick: this.handleClickOverlay + }); + } + + return _react2.default.createElement( + 'div', + { + className: className, + style: style + }, + _react2.default.createElement(_reactEventListener2.default, { target: 'window', onKeyUp: this.handleKeyUp }), + overlay, + _react2.default.createElement( + _Paper2.default, + { + ref: 'clickAwayableElement', + zDepth: zDepth, + rounded: false, + transitionEnabled: !this.state.swiping, + className: containerClassName, + style: (0, _simpleAssign2.default)(styles.root, openSecondary && styles.rootWhenOpenRight, containerStyle) + }, + children + ) + ); + } + }]); + return Drawer; +}(_react.Component); + +Drawer.defaultProps = { + disableSwipeToOpen: false, + docked: true, + open: null, + openSecondary: false, + swipeAreaWidth: 30, + width: null, + zDepth: 2 +}; +Drawer.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Drawer.propTypes = { + /** + * The contents of the `Drawer` + */ + children: _propTypes2.default.node, + /** + * The CSS class name of the root element. + */ + className: _propTypes2.default.string, + /** + * The CSS class name of the container element. + */ + containerClassName: _propTypes2.default.string, + /** + * Override the inline-styles of the container element. + */ + containerStyle: _propTypes2.default.object, + /** + * If true, swiping sideways when the `Drawer` is closed will not open it. + */ + disableSwipeToOpen: _propTypes2.default.bool, + /** + * If true, the `Drawer` will be docked. In this state, the overlay won't show and + * clicking on a menu item will not close the `Drawer`. + */ + docked: _propTypes2.default.bool, + /** + * Callback function fired when the `open` state of the `Drawer` is requested to be changed. + * + * @param {boolean} open If true, the `Drawer` was requested to be opened. + * @param {string} reason The reason for the open or close request. Possible values are + * 'swipe' for open requests; 'clickaway' (on overlay clicks), + * 'escape' (on escape key press), and 'swipe' for close requests. + */ + onRequestChange: _propTypes2.default.func, + /** + * If true, the `Drawer` is opened. Providing a value will turn the `Drawer` + * into a controlled component. + */ + open: _propTypes2.default.bool, + /** + * If true, the `Drawer` is positioned to open from the opposite side. + */ + openSecondary: _propTypes2.default.bool, + /** + * The CSS class name to add to the `Overlay` component that is rendered behind the `Drawer`. + */ + overlayClassName: _propTypes2.default.string, + /** + * Override the inline-styles of the `Overlay` component that is rendered behind the `Drawer`. + */ + overlayStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The width of the left most (or right most) area in pixels where the `Drawer` can be + * swiped open from. Setting this to `null` spans that area to the entire page + * (**CAUTION!** Setting this property to `null` might cause issues with sliders and + * swipeable `Tabs`: use at your own risk). + */ + swipeAreaWidth: _propTypes2.default.number, + /** + * The width of the `Drawer` in pixels or percentage in string format ex. `50%` to fill + * half of the window or `100%` and so on. Defaults to using the values from theme. + */ + width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]), + /** + * The zDepth of the `Drawer`. + */ + zDepth: _propTypes4.default.zDepth + +} : void 0; +exports.default = Drawer; \ No newline at end of file diff --git a/Drawer/index.js b/Drawer/index.js new file mode 100644 index 00000000000000..6a5d48729a684c --- /dev/null +++ b/Drawer/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Drawer = require('./Drawer'); + +var _Drawer2 = _interopRequireDefault(_Drawer); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Drawer2.default; \ No newline at end of file diff --git a/DropDownMenu/DropDownMenu.js b/DropDownMenu/DropDownMenu.js new file mode 100644 index 00000000000000..9ab62bd00be3fa --- /dev/null +++ b/DropDownMenu/DropDownMenu.js @@ -0,0 +1,592 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _arrowDropDown = require('../svg-icons/navigation/arrow-drop-down'); + +var _arrowDropDown2 = _interopRequireDefault(_arrowDropDown); + +var _Menu = require('../Menu/Menu'); + +var _Menu2 = _interopRequireDefault(_Menu); + +var _ClearFix = require('../internal/ClearFix'); + +var _ClearFix2 = _interopRequireDefault(_ClearFix); + +var _Popover = require('../Popover/Popover'); + +var _Popover2 = _interopRequireDefault(_Popover); + +var _PopoverAnimationVertical = require('../Popover/PopoverAnimationVertical'); + +var _PopoverAnimationVertical2 = _interopRequireDefault(_PopoverAnimationVertical); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _events = require('../utils/events'); + +var _events2 = _interopRequireDefault(_events); + +var _IconButton = require('../IconButton'); + +var _IconButton2 = _interopRequireDefault(_IconButton); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var disabled = props.disabled; + + var spacing = context.muiTheme.baseTheme.spacing; + var palette = context.muiTheme.baseTheme.palette; + var accentColor = context.muiTheme.dropDownMenu.accentColor; + return { + control: { + cursor: disabled ? 'not-allowed' : 'pointer', + height: '100%', + position: 'relative', + width: '100%' + }, + icon: { + fill: accentColor, + position: 'absolute', + right: spacing.desktopGutterLess, + top: (spacing.iconSize - 24) / 2 + spacing.desktopGutterMini / 2 + }, + iconChildren: { + fill: 'inherit' + }, + label: { + color: disabled ? palette.disabledColor : palette.textColor, + height: spacing.desktopToolbarHeight + 'px', + lineHeight: spacing.desktopToolbarHeight + 'px', + overflow: 'hidden', + opacity: 1, + position: 'relative', + paddingLeft: spacing.desktopGutter, + paddingRight: spacing.iconSize * 2 + spacing.desktopGutterMini, + textOverflow: 'ellipsis', + top: 0, + whiteSpace: 'nowrap' + }, + labelWhenOpen: { + opacity: 0, + top: spacing.desktopToolbarHeight / 8 + }, + root: { + display: 'inline-block', + fontSize: spacing.desktopDropDownMenuFontSize, + height: spacing.desktopSubheaderHeight, + fontFamily: context.muiTheme.baseTheme.fontFamily, + outline: 'none', + position: 'relative', + transition: _transitions2.default.easeOut() + }, + rootWhenOpen: { + opacity: 1 + }, + underline: { + borderTop: 'solid 1px ' + accentColor, + bottom: 1, + left: 0, + margin: '-1px ' + spacing.desktopGutter + 'px', + right: 0, + position: 'absolute' + } + }; +} + +var DropDownMenu = function (_Component) { + (0, _inherits3.default)(DropDownMenu, _Component); + + function DropDownMenu() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, DropDownMenu); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = DropDownMenu.__proto__ || (0, _getPrototypeOf2.default)(DropDownMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + open: false + }, _this.rootNode = undefined, _this.arrowNode = undefined, _this.handleClickControl = function (event) { + event.preventDefault(); + if (!_this.props.disabled) { + _this.setState({ + open: !_this.state.open, + anchorEl: _this.rootNode + }); + } + }, _this.handleRequestCloseMenu = function () { + _this.close(false); + }, _this.handleEscKeyDownMenu = function () { + _this.close(true); + }, _this.handleKeyDown = function (event) { + switch ((0, _keycode2.default)(event)) { + case 'up': + case 'down': + case 'space': + case 'enter': + event.preventDefault(); + _this.setState({ + open: true, + anchorEl: _this.rootNode + }); + break; + } + }, _this.handleItemClick = function (event, child, index) { + if (_this.props.multiple) { + if (!_this.state.open) { + _this.setState({ open: true }); + } + } else { + event.persist(); + _this.setState({ + open: false + }, function () { + if (_this.props.onChange) { + _this.props.onChange(event, index, child.props.value); + } + + _this.close(_events2.default.isKeyboard(event)); + }); + } + }, _this.handleChange = function (event, value) { + if (_this.props.multiple && _this.props.onChange) { + _this.props.onChange(event, undefined, value); + } + }, _this.close = function (isKeyboard) { + _this.setState({ + open: false + }, function () { + if (_this.props.onClose) { + _this.props.onClose(); + } + + if (isKeyboard) { + var dropArrow = _this.arrowNode; + var dropNode = _reactDom2.default.findDOMNode(dropArrow); + dropNode.focus(); + dropArrow.setKeyboardFocus(true); + } + }); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + // The nested styles for drop-down-menu are modified by toolbar and possibly + // other user components, so it will give full access to its js styles rather + // than just the parent. + + + (0, _createClass3.default)(DropDownMenu, [{ + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + if (this.props.autoWidth) { + this.setWidth(); + } + if (this.props.openImmediately) { + // TODO: Temporary fix to make openImmediately work with popover. + /* eslint-disable react/no-did-mount-set-state */ + setTimeout(function () { + return _this2.setState({ + open: true, + anchorEl: _this2.rootNode + }); + }, 0); + /* eslint-enable react/no-did-mount-set-state */ + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps() { + if (this.props.autoWidth) { + this.setWidth(); + } + } + }, { + key: 'getInputNode', + + + /** + * This method is deprecated but still here because the TextField + * need it in order to work. TODO: That will be addressed later. + */ + value: function getInputNode() { + var _this3 = this; + + var rootNode = this.rootNode; + + rootNode.focus = function () { + if (!_this3.props.disabled) { + _this3.setState({ + open: !_this3.state.open, + anchorEl: _this3.rootNode + }); + } + }; + + return rootNode; + } + }, { + key: 'setWidth', + value: function setWidth() { + var el = this.rootNode; + if (!this.props.style || !this.props.style.hasOwnProperty('width')) { + el.style.width = 'auto'; + } + } + }, { + key: 'render', + value: function render() { + var _this4 = this; + + var _props = this.props, + animated = _props.animated, + animation = _props.animation, + autoWidth = _props.autoWidth, + multiple = _props.multiple, + children = _props.children, + className = _props.className, + disabled = _props.disabled, + iconStyle = _props.iconStyle, + labelStyle = _props.labelStyle, + listStyle = _props.listStyle, + maxHeight = _props.maxHeight, + menuStyleProp = _props.menuStyle, + selectionRenderer = _props.selectionRenderer, + onClose = _props.onClose, + openImmediately = _props.openImmediately, + menuItemStyle = _props.menuItemStyle, + selectedMenuItemStyle = _props.selectedMenuItemStyle, + style = _props.style, + underlineStyle = _props.underlineStyle, + value = _props.value, + iconButton = _props.iconButton, + anchorOrigin = _props.anchorOrigin, + targetOrigin = _props.targetOrigin, + other = (0, _objectWithoutProperties3.default)(_props, ['animated', 'animation', 'autoWidth', 'multiple', 'children', 'className', 'disabled', 'iconStyle', 'labelStyle', 'listStyle', 'maxHeight', 'menuStyle', 'selectionRenderer', 'onClose', 'openImmediately', 'menuItemStyle', 'selectedMenuItemStyle', 'style', 'underlineStyle', 'value', 'iconButton', 'anchorOrigin', 'targetOrigin']); + var _state = this.state, + anchorEl = _state.anchorEl, + open = _state.open; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var displayValue = ''; + if (!multiple) { + _react2.default.Children.forEach(children, function (child) { + if (child && value === child.props.value) { + if (selectionRenderer) { + displayValue = selectionRenderer(value, child); + } else { + // This will need to be improved (in case primaryText is a node) + displayValue = child.props.label || child.props.primaryText; + } + } + }); + } else { + var values = []; + var selectionRendererChildren = []; + _react2.default.Children.forEach(children, function (child) { + if (child && value && value.indexOf(child.props.value) > -1) { + if (selectionRenderer) { + values.push(child.props.value); + selectionRendererChildren.push(child); + } else { + values.push(child.props.label || child.props.primaryText); + } + } + }); + + displayValue = []; + if (selectionRenderer) { + displayValue = selectionRenderer(values, selectionRendererChildren); + } else { + displayValue = values.join(', '); + } + } + + var menuStyle = void 0; + if (anchorEl && !autoWidth) { + menuStyle = (0, _simpleAssign2.default)({ + width: anchorEl.clientWidth + }, menuStyleProp); + } else { + menuStyle = menuStyleProp; + } + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { + ref: function ref(node) { + _this4.rootNode = node; + }, + className: className, + style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, open && styles.rootWhenOpen, style)) + }), + _react2.default.createElement( + _ClearFix2.default, + { style: styles.control, onClick: this.handleClickControl }, + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)({}, styles.label, open && styles.labelWhenOpen, labelStyle)) }, + displayValue + ), + _react2.default.createElement( + _IconButton2.default, + { + disabled: disabled, + onKeyDown: this.handleKeyDown, + ref: function ref(node) { + _this4.arrowNode = node; + }, + style: (0, _simpleAssign2.default)({}, styles.icon, iconStyle), + iconStyle: styles.iconChildren + }, + iconButton + ), + _react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)({}, styles.underline, underlineStyle)) }) + ), + _react2.default.createElement( + _Popover2.default, + { + anchorOrigin: anchorOrigin, + targetOrigin: targetOrigin, + anchorEl: anchorEl, + animation: animation || _PopoverAnimationVertical2.default, + open: open, + animated: animated, + onRequestClose: this.handleRequestCloseMenu + }, + _react2.default.createElement( + _Menu2.default, + { + multiple: multiple, + maxHeight: maxHeight, + desktop: true, + value: value, + onEscKeyDown: this.handleEscKeyDownMenu, + style: menuStyle, + listStyle: listStyle, + onItemClick: this.handleItemClick, + onChange: this.handleChange, + menuItemStyle: menuItemStyle, + selectedMenuItemStyle: selectedMenuItemStyle, + autoWidth: autoWidth, + width: !autoWidth && menuStyle ? menuStyle.width : null + }, + children + ) + ) + ); + } + }]); + return DropDownMenu; +}(_react.Component); + +DropDownMenu.muiName = 'DropDownMenu'; +DropDownMenu.defaultProps = { + animated: true, + autoWidth: true, + disabled: false, + iconButton: _react2.default.createElement(_arrowDropDown2.default, null), + openImmediately: false, + maxHeight: 500, + multiple: false, + anchorOrigin: { + vertical: 'top', + horizontal: 'left' + } +}; +DropDownMenu.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? DropDownMenu.propTypes = { + /** + * This is the point on the anchor that the popover's + * `targetOrigin` will attach to. + * Options: + * vertical: [top, center, bottom] + * horizontal: [left, middle, right]. + */ + anchorOrigin: _propTypes4.default.origin, + /** + * If true, the popover will apply transitions when + * it gets added to the DOM. + */ + animated: _propTypes2.default.bool, + /** + * Override the default animation component used. + */ + animation: _propTypes2.default.func, + /** + * The width will automatically be set according to the items inside the menu. + * To control this width in css instead, set this prop to `false`. + */ + autoWidth: _propTypes2.default.bool, + /** + * The `MenuItem`s to populate the `Menu` with. If the `MenuItems` have the + * prop `label` that value will be used to render the representation of that + * item within the field. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Disables the menu. + */ + disabled: _propTypes2.default.bool, + /** + * Overrides default `SvgIcon` dropdown arrow component. + */ + iconButton: _propTypes2.default.node, + /** + * Overrides the styles of icon element. + */ + iconStyle: _propTypes2.default.object, + /** + * Overrides the styles of label when the `DropDownMenu` is inactive. + */ + labelStyle: _propTypes2.default.object, + /** + * The style object to use to override underlying list style. + */ + listStyle: _propTypes2.default.object, + /** + * The maximum height of the `Menu` when it is displayed. + */ + maxHeight: _propTypes2.default.number, + /** + * Override the inline-styles of menu items. + */ + menuItemStyle: _propTypes2.default.object, + /** + * Overrides the styles of `Menu` when the `DropDownMenu` is displayed. + */ + menuStyle: _propTypes2.default.object, + /** + * If true, `value` must be an array and the menu will support + * multiple selections. + */ + multiple: _propTypes2.default.bool, + /** + * Callback function fired when a menu item is clicked, other than the one currently selected. + * + * @param {object} event Click event targeting the menu item that was clicked. + * @param {number} key The index of the clicked menu item in the `children` collection. + * @param {any} value If `multiple` is true, the menu's `value` + * array with either the menu item's `value` added (if + * it wasn't already selected) or omitted (if it was already selected). + * Otherwise, the `value` of the menu item. + */ + onChange: _propTypes2.default.func, + /** + * Callback function fired when the menu is closed. + */ + onClose: _propTypes2.default.func, + /** + * Set to true to have the `DropDownMenu` automatically open on mount. + */ + openImmediately: _propTypes2.default.bool, + /** + * Override the inline-styles of selected menu items. + */ + selectedMenuItemStyle: _propTypes2.default.object, + /** + * Callback function fired when a menu item is clicked, other than the one currently selected. + * + * @param {any} value If `multiple` is true, the menu's `value` + * array with either the menu item's `value` added (if + * it wasn't already selected) or omitted (if it was already selected). + * Otherwise, the `value` of the menu item. + * @param {any} menuItem The selected `MenuItem`. + * If `multiple` is true, this will be an array with the `MenuItem`s matching the `value`s parameter. + */ + selectionRenderer: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * This is the point on the popover which will attach to + * the anchor's origin. + * Options: + * vertical: [top, center, bottom] + * horizontal: [left, middle, right]. + */ + targetOrigin: _propTypes4.default.origin, + /** + * Overrides the inline-styles of the underline. + */ + underlineStyle: _propTypes2.default.object, + /** + * If `multiple` is true, an array of the `value`s of the selected + * menu items. Otherwise, the `value` of the selected menu item. + * If provided, the menu will be a controlled component. + */ + value: _propTypes2.default.any +} : void 0; +exports.default = DropDownMenu; \ No newline at end of file diff --git a/DropDownMenu/index.js b/DropDownMenu/index.js new file mode 100644 index 00000000000000..8c81792f523fdf --- /dev/null +++ b/DropDownMenu/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.MenuItem = exports.DropDownMenu = undefined; + +var _DropDownMenu2 = require('./DropDownMenu'); + +var _DropDownMenu3 = _interopRequireDefault(_DropDownMenu2); + +var _MenuItem2 = require('../MenuItem/MenuItem'); + +var _MenuItem3 = _interopRequireDefault(_MenuItem2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.DropDownMenu = _DropDownMenu3.default; +exports.MenuItem = _MenuItem3.default; +exports.default = _DropDownMenu3.default; \ No newline at end of file diff --git a/FlatButton/FlatButton.js b/FlatButton/FlatButton.js new file mode 100644 index 00000000000000..00c320ef3f99e7 --- /dev/null +++ b/FlatButton/FlatButton.js @@ -0,0 +1,346 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _colorManipulator = require('../utils/colorManipulator'); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +var _FlatButtonLabel = require('./FlatButtonLabel'); + +var _FlatButtonLabel2 = _interopRequireDefault(_FlatButtonLabel); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function validateLabel(props, propName, componentName) { + if (process.env.NODE_ENV !== 'production') { + if (!props.children && props.label !== 0 && !props.label && !props.icon) { + return new Error('Required prop label or children or icon was not specified in ' + componentName + '.'); + } + } +} + +var FlatButton = function (_Component) { + (0, _inherits3.default)(FlatButton, _Component); + + function FlatButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, FlatButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = FlatButton.__proto__ || (0, _getPrototypeOf2.default)(FlatButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false, + isKeyboardFocused: false, + touch: false + }, _this.handleKeyboardFocus = function (event, isKeyboardFocused) { + _this.setState({ isKeyboardFocused: isKeyboardFocused }); + _this.props.onKeyboardFocus(event, isKeyboardFocused); + }, _this.handleMouseEnter = function (event) { + // Cancel hover styles for touch devices + if (!_this.state.touch) _this.setState({ hovered: true }); + _this.props.onMouseEnter(event); + }, _this.handleMouseLeave = function (event) { + _this.setState({ hovered: false }); + _this.props.onMouseLeave(event); + }, _this.handleTouchStart = function (event) { + _this.setState({ touch: true }); + _this.props.onTouchStart(event); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(FlatButton, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.disabled) { + this.setState({ + hovered: false + }); + } + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + backgroundColor = _props.backgroundColor, + children = _props.children, + disabled = _props.disabled, + fullWidth = _props.fullWidth, + hoverColor = _props.hoverColor, + icon = _props.icon, + label = _props.label, + labelStyle = _props.labelStyle, + labelPosition = _props.labelPosition, + primary = _props.primary, + rippleColor = _props.rippleColor, + secondary = _props.secondary, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['backgroundColor', 'children', 'disabled', 'fullWidth', 'hoverColor', 'icon', 'label', 'labelStyle', 'labelPosition', 'primary', 'rippleColor', 'secondary', 'style']); + var _context$muiTheme = this.context.muiTheme, + borderRadius = _context$muiTheme.borderRadius, + _context$muiTheme$but = _context$muiTheme.button, + buttonHeight = _context$muiTheme$but.height, + buttonMinWidth = _context$muiTheme$but.minWidth, + buttonTextTransform = _context$muiTheme$but.textTransform, + _context$muiTheme$fla = _context$muiTheme.flatButton, + buttonFilterColor = _context$muiTheme$fla.buttonFilterColor, + buttonColor = _context$muiTheme$fla.color, + disabledTextColor = _context$muiTheme$fla.disabledTextColor, + fontSize = _context$muiTheme$fla.fontSize, + fontWeight = _context$muiTheme$fla.fontWeight, + primaryTextColor = _context$muiTheme$fla.primaryTextColor, + secondaryTextColor = _context$muiTheme$fla.secondaryTextColor, + textColor = _context$muiTheme$fla.textColor, + _context$muiTheme$fla2 = _context$muiTheme$fla.textTransform, + textTransform = _context$muiTheme$fla2 === undefined ? buttonTextTransform || 'uppercase' : _context$muiTheme$fla2; + + var defaultTextColor = disabled ? disabledTextColor : primary ? primaryTextColor : secondary ? secondaryTextColor : textColor; + + var defaultHoverColor = (0, _colorManipulator.fade)(buttonFilterColor, 0.2); + var defaultRippleColor = buttonFilterColor; + var buttonHoverColor = hoverColor || defaultHoverColor; + var buttonRippleColor = rippleColor || defaultRippleColor; + var buttonBackgroundColor = backgroundColor || buttonColor; + var hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled; + + var mergedRootStyles = (0, _simpleAssign2.default)({}, { + height: buttonHeight, + lineHeight: buttonHeight + 'px', + minWidth: fullWidth ? '100%' : buttonMinWidth, + color: defaultTextColor, + transition: _transitions2.default.easeOut(), + borderRadius: borderRadius, + userSelect: 'none', + overflow: 'hidden', + backgroundColor: hovered ? buttonHoverColor : buttonBackgroundColor, + padding: 0, + margin: 0, + textAlign: 'center' + }, style); + + var iconCloned = void 0; + var labelStyleIcon = {}; + + if (icon) { + var iconStyles = (0, _simpleAssign2.default)({ + verticalAlign: 'middle', + marginLeft: label && labelPosition !== 'before' ? 12 : 0, + marginRight: label && labelPosition === 'before' ? 12 : 0 + }, icon.props.style); + iconCloned = _react2.default.cloneElement(icon, { + color: icon.props.color || mergedRootStyles.color, + style: iconStyles, + key: 'iconCloned' + }); + + if (labelPosition === 'before') { + labelStyleIcon.paddingRight = 8; + } else { + labelStyleIcon.paddingLeft = 8; + } + } + + var mergedLabelStyles = (0, _simpleAssign2.default)({ + letterSpacing: 0, + textTransform: textTransform, + fontWeight: fontWeight, + fontSize: fontSize + }, labelStyleIcon, labelStyle); + + var labelElement = label ? _react2.default.createElement(_FlatButtonLabel2.default, { key: 'labelElement', label: label, style: mergedLabelStyles }) : undefined; + + // Place label before or after children. + var enhancedButtonChildren = labelPosition === 'before' ? [labelElement, iconCloned, children] : [children, iconCloned, labelElement]; + + return _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, { + disabled: disabled, + focusRippleColor: buttonRippleColor, + focusRippleOpacity: 0.3, + onKeyboardFocus: this.handleKeyboardFocus, + onMouseLeave: this.handleMouseLeave, + onMouseEnter: this.handleMouseEnter, + onTouchStart: this.handleTouchStart, + style: mergedRootStyles, + touchRippleColor: buttonRippleColor, + touchRippleOpacity: 0.3 + }), + enhancedButtonChildren + ); + } + }]); + return FlatButton; +}(_react.Component); + +FlatButton.muiName = 'FlatButton'; +FlatButton.defaultProps = { + disabled: false, + fullWidth: false, + labelStyle: {}, + labelPosition: 'after', + onKeyboardFocus: function onKeyboardFocus() {}, + onMouseEnter: function onMouseEnter() {}, + onMouseLeave: function onMouseLeave() {}, + onTouchStart: function onTouchStart() {}, + primary: false, + secondary: false +}; +FlatButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? FlatButton.propTypes = { + /** + * Color of button when mouse is not hovering over it. + */ + backgroundColor: _propTypes2.default.string, + /** + * This is what will be displayed inside the button. + * If a label is specified, the text within the label prop will + * be displayed. Otherwise, the component will expect children + * which will then be displayed. (In our example, + * we are nesting an `` and a `span` + * that acts as our label to be displayed.) This only + * applies to flat and raised buttons. + */ + children: _propTypes2.default.node, + /** + * The CSS class name of the root element. + */ + className: _propTypes2.default.string, + /** + * The element to use as the container for the FlatButton. Either a string to + * use a DOM element or a ReactElement. This is useful for wrapping the + * FlatButton in a custom Link component. If a ReactElement is given, ensure + * that it passes all of its given props through to the underlying DOM + * element and renders its children prop for proper integration. + */ + containerElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]), + /** + * If true, the element's ripple effect will be disabled. + */ + disableTouchRipple: _propTypes2.default.bool, + /** + * Disables the button if set to true. + */ + disabled: _propTypes2.default.bool, + /** + * If true, the button will take up the full width of its container. + */ + fullWidth: _propTypes2.default.bool, + /** + * Color of button when mouse hovers over. + */ + hoverColor: _propTypes2.default.string, + /** + * The URL to link to when the button is clicked. + */ + href: _propTypes2.default.string, + /** + * Use this property to display an icon. + */ + icon: _propTypes2.default.node, + /** + * Label for the button. + */ + label: validateLabel, + /** + * Place label before or after the passed children. + */ + labelPosition: _propTypes2.default.oneOf(['before', 'after']), + /** + * Override the inline-styles of the button's label element. + */ + labelStyle: _propTypes2.default.object, + /** + * Callback function fired when the button is clicked. + * + * @param {object} event Click event targeting the button. + */ + onClick: _propTypes2.default.func, + /** + * Callback function fired when the element is focused or blurred by the keyboard. + * + * @param {object} event `focus` or `blur` event targeting the element. + * @param {boolean} isKeyboardFocused Indicates whether the element is focused. + */ + onKeyboardFocus: _propTypes2.default.func, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** @ignore */ + onTouchStart: _propTypes2.default.func, + /** + * If true, colors button according to + * primaryTextColor from the Theme. + */ + primary: _propTypes2.default.bool, + /** + * Color for the ripple after button is clicked. + */ + rippleColor: _propTypes2.default.string, + /** + * If true, colors button according to secondaryTextColor from the theme. + * The primary prop has precendent if set to true. + */ + secondary: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = FlatButton; \ No newline at end of file diff --git a/FlatButton/FlatButtonLabel.js b/FlatButton/FlatButtonLabel.js new file mode 100644 index 00000000000000..9ca835f1b0053c --- /dev/null +++ b/FlatButton/FlatButtonLabel.js @@ -0,0 +1,90 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var baseTheme = context.muiTheme.baseTheme; + + + return { + root: { + position: 'relative', + paddingLeft: baseTheme.spacing.desktopGutterLess, + paddingRight: baseTheme.spacing.desktopGutterLess, + verticalAlign: 'middle' + } + }; +} + +var FlatButtonLabel = function (_Component) { + (0, _inherits3.default)(FlatButtonLabel, _Component); + + function FlatButtonLabel() { + (0, _classCallCheck3.default)(this, FlatButtonLabel); + return (0, _possibleConstructorReturn3.default)(this, (FlatButtonLabel.__proto__ || (0, _getPrototypeOf2.default)(FlatButtonLabel)).apply(this, arguments)); + } + + (0, _createClass3.default)(FlatButtonLabel, [{ + key: 'render', + value: function render() { + var _props = this.props, + label = _props.label, + style = _props.style; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'span', + { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, + label + ); + } + }]); + return FlatButtonLabel; +}(_react.Component); + +FlatButtonLabel.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? FlatButtonLabel.propTypes = { + label: _propTypes2.default.node, + style: _propTypes2.default.object +} : void 0; +exports.default = FlatButtonLabel; \ No newline at end of file diff --git a/FlatButton/index.js b/FlatButton/index.js new file mode 100644 index 00000000000000..d97c94226bd150 --- /dev/null +++ b/FlatButton/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _FlatButton = require('./FlatButton'); + +var _FlatButton2 = _interopRequireDefault(_FlatButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _FlatButton2.default; \ No newline at end of file diff --git a/FloatingActionButton/FloatingActionButton.js b/FloatingActionButton/FloatingActionButton.js new file mode 100644 index 00000000000000..8d3ed6a28fa36e --- /dev/null +++ b/FloatingActionButton/FloatingActionButton.js @@ -0,0 +1,392 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _colorManipulator = require('../utils/colorManipulator'); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +var _FontIcon = require('../FontIcon'); + +var _FontIcon2 = _interopRequireDefault(_FontIcon); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _childUtils = require('../utils/childUtils'); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var floatingActionButton = context.muiTheme.floatingActionButton; + + + var backgroundColor = props.backgroundColor || floatingActionButton.color; + var iconColor = floatingActionButton.iconColor; + + if (props.disabled) { + backgroundColor = props.disabledColor || floatingActionButton.disabledColor; + iconColor = floatingActionButton.disabledTextColor; + } else if (props.secondary) { + backgroundColor = floatingActionButton.secondaryColor; + iconColor = floatingActionButton.secondaryIconColor; + } + + return { + root: { + transition: _transitions2.default.easeOut(), + display: 'inline-block', + backgroundColor: 'transparent' + }, + container: { + backgroundColor: backgroundColor, + transition: _transitions2.default.easeOut(), + height: floatingActionButton.buttonSize, + width: floatingActionButton.buttonSize, + padding: 0, + overflow: 'hidden', + borderRadius: '50%', + textAlign: 'center', + verticalAlign: 'bottom' + }, + containerWhenMini: { + height: floatingActionButton.miniSize, + width: floatingActionButton.miniSize + }, + overlay: { + transition: _transitions2.default.easeOut(), + top: 0 + }, + overlayWhenHovered: { + backgroundColor: (0, _colorManipulator.fade)(iconColor, 0.4) + }, + icon: { + height: floatingActionButton.buttonSize, + lineHeight: floatingActionButton.buttonSize + 'px', + fill: iconColor, + color: iconColor + }, + iconWhenMini: { + height: floatingActionButton.miniSize, + lineHeight: floatingActionButton.miniSize + 'px' + } + }; +} + +var FloatingActionButton = function (_Component) { + (0, _inherits3.default)(FloatingActionButton, _Component); + + function FloatingActionButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, FloatingActionButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = FloatingActionButton.__proto__ || (0, _getPrototypeOf2.default)(FloatingActionButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false, + touch: false, + zDepth: undefined + }, _this.handleMouseDown = function (event) { + // only listen to left clicks + if (event.button === 0) { + _this.setState({ zDepth: _this.props.zDepth + 1 }); + } + if (_this.props.onMouseDown) _this.props.onMouseDown(event); + }, _this.handleMouseUp = function (event) { + _this.setState({ zDepth: _this.props.zDepth }); + if (_this.props.onMouseUp) { + _this.props.onMouseUp(event); + } + }, _this.handleMouseLeave = function (event) { + if (!_this.refs.container.isKeyboardFocused()) { + _this.setState({ zDepth: _this.props.zDepth, hovered: false }); + } + if (_this.props.onMouseLeave) { + _this.props.onMouseLeave(event); + } + }, _this.handleMouseEnter = function (event) { + if (!_this.refs.container.isKeyboardFocused() && !_this.state.touch) { + _this.setState({ hovered: true }); + } + if (_this.props.onMouseEnter) { + _this.props.onMouseEnter(event); + } + }, _this.handleTouchStart = function (event) { + _this.setState({ + touch: true, + zDepth: _this.props.zDepth + 1 + }); + if (_this.props.onTouchStart) { + _this.props.onTouchStart(event); + } + }, _this.handleTouchEnd = function (event) { + _this.setState({ + touch: true, + zDepth: _this.props.zDepth + }); + if (_this.props.onTouchEnd) { + _this.props.onTouchEnd(event); + } + }, _this.handleKeyboardFocus = function (event, keyboardFocused) { + if (keyboardFocused && !_this.props.disabled) { + _this.setState({ zDepth: _this.props.zDepth + 1 }); + _this.refs.overlay.style.backgroundColor = (0, _colorManipulator.fade)(getStyles(_this.props, _this.context).icon.color, 0.4); + } else if (!_this.state.hovered) { + _this.setState({ zDepth: _this.props.zDepth }); + _this.refs.overlay.style.backgroundColor = 'transparent'; + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(FloatingActionButton, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + zDepth: this.props.disabled ? 0 : this.props.zDepth + }); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!this.props.iconClassName || !this.props.children, 'Material-UI: You have set both an iconClassName and a child icon. ' + 'It is recommended you use only one method when adding ' + 'icons to FloatingActionButtons.') : void 0; + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var nextState = {}; + + if (nextProps.disabled !== this.props.disabled) { + nextState.zDepth = nextProps.disabled ? 0 : this.props.zDepth; + } + if (nextProps.disabled) { + nextState.hovered = false; + } + + this.setState(nextState); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + backgroundColor = _props.backgroundColor, + className = _props.className, + childrenProp = _props.children, + disabled = _props.disabled, + disabledColor = _props.disabledColor, + mini = _props.mini, + secondary = _props.secondary, + iconStyle = _props.iconStyle, + iconClassName = _props.iconClassName, + zDepth = _props.zDepth, + other = (0, _objectWithoutProperties3.default)(_props, ['backgroundColor', 'className', 'children', 'disabled', 'disabledColor', 'mini', 'secondary', 'iconStyle', 'iconClassName', 'zDepth']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var iconElement = void 0; + if (iconClassName) { + iconElement = _react2.default.createElement(_FontIcon2.default, { + className: iconClassName, + style: (0, _simpleAssign2.default)({}, styles.icon, mini && styles.iconWhenMini, iconStyle) + }); + } + + var children = void 0; + + if (childrenProp) { + children = (0, _childUtils.extendChildren)(childrenProp, function (child) { + return { + style: (0, _simpleAssign2.default)({}, styles.icon, mini && styles.iconWhenMini, iconStyle, child.props.style) + }; + }); + } + + var buttonEventHandlers = disabled ? null : { + onMouseDown: this.handleMouseDown, + onMouseUp: this.handleMouseUp, + onMouseLeave: this.handleMouseLeave, + onMouseEnter: this.handleMouseEnter, + onTouchStart: this.handleTouchStart, + onTouchEnd: this.handleTouchEnd, + onKeyboardFocus: this.handleKeyboardFocus + }; + + return _react2.default.createElement( + _Paper2.default, + { + className: className, + style: (0, _simpleAssign2.default)(styles.root, this.props.style), + zDepth: this.state.zDepth, + circle: true + }, + _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, buttonEventHandlers, { + ref: 'container', + disabled: disabled, + style: (0, _simpleAssign2.default)(styles.container, this.props.mini && styles.containerWhenMini, iconStyle), + focusRippleColor: styles.icon.color, + touchRippleColor: styles.icon.color + }), + _react2.default.createElement( + 'div', + { + ref: 'overlay', + style: prepareStyles((0, _simpleAssign2.default)(styles.overlay, this.state.hovered && !this.props.disabled && styles.overlayWhenHovered)) + }, + iconElement, + children + ) + ) + ); + } + }]); + return FloatingActionButton; +}(_react.Component); + +FloatingActionButton.defaultProps = { + disabled: false, + mini: false, + secondary: false, + zDepth: 2 +}; +FloatingActionButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? FloatingActionButton.propTypes = { + /** + * This value will override the default background color for the button. + * However it will not override the default disabled background color. + * This has to be set separately using the disabledColor attribute. + */ + backgroundColor: _propTypes2.default.string, + /** + * This is what displayed inside the floating action button; for example, a SVG Icon. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Disables the button if set to true. + */ + disabled: _propTypes2.default.bool, + /** + * This value will override the default background color for the button when it is disabled. + */ + disabledColor: _propTypes2.default.string, + /** + * The URL to link to when the button is clicked. + */ + href: _propTypes2.default.string, + /** + * The icon within the FloatingActionButton is a FontIcon component. + * This property is the classname of the icon to be displayed inside the button. + * An alternative to adding an iconClassName would be to manually insert a + * FontIcon component or custom SvgIcon component or as a child of FloatingActionButton. + */ + iconClassName: _propTypes2.default.string, + /** + * This is the equivalent to iconClassName except that it is used for + * overriding the inline-styles of the FontIcon component. + */ + iconStyle: _propTypes2.default.object, + /** + * If true, the button will be a small floating action button. + */ + mini: _propTypes2.default.bool, + /** + * Callback function fired when the button is clicked. + * + * @param {object} event Click event targeting the button. + */ + onClick: _propTypes2.default.func, + /** @ignore */ + onMouseDown: _propTypes2.default.func, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** @ignore */ + onMouseUp: _propTypes2.default.func, + /** @ignore */ + onTouchEnd: _propTypes2.default.func, + /** @ignore */ + onTouchStart: _propTypes2.default.func, + /** + * If true, the button will use the secondary button colors. + */ + secondary: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The zDepth of the underlying `Paper` component. + */ + zDepth: _propTypes4.default.zDepth +} : void 0; +exports.default = FloatingActionButton; \ No newline at end of file diff --git a/FloatingActionButton/index.js b/FloatingActionButton/index.js new file mode 100644 index 00000000000000..bb795d4e2f8e36 --- /dev/null +++ b/FloatingActionButton/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _FloatingActionButton = require('./FloatingActionButton'); + +var _FloatingActionButton2 = _interopRequireDefault(_FloatingActionButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _FloatingActionButton2.default; \ No newline at end of file diff --git a/FontIcon/FontIcon.js b/FontIcon/FontIcon.js new file mode 100644 index 00000000000000..86cb9999b0844c --- /dev/null +++ b/FontIcon/FontIcon.js @@ -0,0 +1,158 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var color = props.color, + hoverColor = props.hoverColor; + var baseTheme = context.muiTheme.baseTheme; + + var offColor = color || baseTheme.palette.textColor; + var onColor = hoverColor || offColor; + + return { + root: { + color: state.hovered ? onColor : offColor, + position: 'relative', + fontSize: baseTheme.spacing.iconSize, + display: 'inline-block', + userSelect: 'none', + transition: _transitions2.default.easeOut() + } + }; +} + +var FontIcon = function (_Component) { + (0, _inherits3.default)(FontIcon, _Component); + + function FontIcon() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, FontIcon); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = FontIcon.__proto__ || (0, _getPrototypeOf2.default)(FontIcon)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false + }, _this.handleMouseLeave = function (event) { + // hover is needed only when a hoverColor is defined + if (_this.props.hoverColor !== undefined) { + _this.setState({ hovered: false }); + } + if (_this.props.onMouseLeave) { + _this.props.onMouseLeave(event); + } + }, _this.handleMouseEnter = function (event) { + // hover is needed only when a hoverColor is defined + if (_this.props.hoverColor !== undefined) { + _this.setState({ hovered: true }); + } + if (_this.props.onMouseEnter) { + _this.props.onMouseEnter(event); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(FontIcon, [{ + key: 'render', + value: function render() { + var _props = this.props, + hoverColor = _props.hoverColor, + onMouseLeave = _props.onMouseLeave, + onMouseEnter = _props.onMouseEnter, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['hoverColor', 'onMouseLeave', 'onMouseEnter', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + return _react2.default.createElement('span', (0, _extends3.default)({}, other, { + onMouseLeave: this.handleMouseLeave, + onMouseEnter: this.handleMouseEnter, + style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) + })); + } + }]); + return FontIcon; +}(_react.Component); + +FontIcon.muiName = 'FontIcon'; +FontIcon.defaultProps = { + onMouseEnter: function onMouseEnter() {}, + onMouseLeave: function onMouseLeave() {} +}; +FontIcon.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? FontIcon.propTypes = { + /** + * This is the font color of the font icon. If not specified, + * this component will default to muiTheme.palette.textColor. + */ + color: _propTypes2.default.string, + /** + * This is the icon color when the mouse hovers over the icon. + */ + hoverColor: _propTypes2.default.string, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = FontIcon; \ No newline at end of file diff --git a/FontIcon/index.js b/FontIcon/index.js new file mode 100644 index 00000000000000..a0115dc1ee1564 --- /dev/null +++ b/FontIcon/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _FontIcon = require('./FontIcon'); + +var _FontIcon2 = _interopRequireDefault(_FontIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _FontIcon2.default; \ No newline at end of file diff --git a/GOVERNANCE.md b/GOVERNANCE.md deleted file mode 100644 index 59df8d48863371..00000000000000 --- a/GOVERNANCE.md +++ /dev/null @@ -1,94 +0,0 @@ -# Mui-Org Governance - -## Overview - -Mui-Org houses projects related to [Material-UI](http://www.material-ui.com/), a set of [React](https://reactjs.org/) components -that implement [Google's Material Design](https://material.io/guidelines/material-design/introduction.html) -specification. Our mission is to create a customizable Material Design implementation -for anyone to use. We value an open, collaborative, and diverse community where anyone can join in -discussions, learn from one another, and contribute to the project. This document describes how -we govern ourselves, how decisions are made, and how someone could engage with the project. - -## Roles & Responsibilities - -### Users - -Users are members of the community that are using Material-UI or one of Mui-Org's projects. Anyone -can be a user and we encourage users to participate in the community as much as possible in the -following ways. -- Evangelize Material-UI by [linking to our website](http://www.material-ui.com/), -[following us on twitter](https://twitter.com/i/notifications), or just talking about us with your -friends. -- Tell us what we're doing well or where we can improve. -- Give us moral support. A "Thank You" always brightens our day! -- [Support us on OpenCollective](https://opencollective.com/material-ui). - -### Contributors - -Contributors are members of the community who contribute to Material-UI or one of Mui-Org's projects -in concrete ways. Anyone can be a contributor. In addition to their participation as a user, they -also contribute in the following ways. -- Support new users by answering questions on -[StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) and -[Gitter](https://gitter.im/mui-org/material-ui). -- Reviewing and commenting on [existing pull requests](https://github.com/mui-org/material-ui/pulls) -and [issues](https://github.com/mui-org/material-ui/issues). -- Reporting bugs or missing features by [creating an issue](https://github.com/mui-org/material-ui/issues/new). -- Fixing bugs, adding features, and -[improving our documentation](https://github.com/mui-org/material-ui/tree/v1-beta/docs) by -[submitting a pull request](https://github.com/mui-org/material-ui/pulls). - -### Committers - -Committers are members of the community who are committed to the development, success, and mission -of Material-UI or one of Mui-Org's projects. New committers are nominated and voted on by existing -committers. Under rare circumstances, the Core Team can vote to revoke a committer's privilege. In -addition to their participation as a contributor, committers have the following privileges. -- Access to a private Gitter room to talk about issues and coordinate development. -- Ability to label, close, and manage [Github issues](https://github.com/mui-org/material-ui/issues). -- Ability to [close and merge pull requests](https://github.com/mui-org/material-ui/pulls?q=is%3Apr+is%3Aclosed). -- Ability to [submit expenses](https://opencollective.com/material-ui/expenses/new) that are -approved by the Core Team. -- Ability to receive payment for work done on Material-UI or one of Mui-Org's projects. -- Nominate and vote on new committers and Core Team members. - -### Core Team - -Core Team members are individuals that are invested in the success of Mui-Org. Their -administrative responsibilities ensure the sustainability and smooth running of Mui-Org. New -Core Team members are nominated and voted on by existing committers. Under rare circumstances, a -Core Team member can be removed by a two thirds majority vote by the Core Team. Two people -from the same company cannot exist on the Core Team. - -At the end of each quarter, the Core Team may issue payments to one or more committers. The amount -issued will be determined by a formula that's transparent to all committers and voted on by the -Core Team. The formula can change at the end of the quarter, but not mid-quarter unless unanimously -agreed upon by the Core Team and all committers with whom any payment may be owed. These payments -are aimed to [increase the sustainability of our organization](https://medium.com/call-em-all/material-ui-the-move-to-a-sustainable-open-source-project-5261d07b5067) by supporting committers. - -In addition to their participation as a committer, Core Team members have the following privileges. -- Ability to [publish a release](https://github.com/mui-org/material-ui/releases). -- Access to Material-UI's [Twitter](https://twitter.com/i/notifications) and Medium account. -- Owner access to [mui-org on GitHub](https://github.com/mui-org). -- Admin access to various tools and services ([npm](https://www.npmjs.com/package/material-ui), -[CircleCi](https://circleci.com/gh/mui-org/material-ui), -[BrowserStack](https://www.browserstack.com/), [Gitter](https://gitter.im/mui-org/material-ui)). -- Admin access to all financial accounts. -- Vote on the removal of committers and Core Team members. -- Vote on decisions when consensus cannot be reached by the community. -- Vote on approval of expenses and payments on [OpenCollective](https://opencollective.com/material-ui). -Core Team members cannot vote to approve their own expenses or payments. -- Vote on changes to project governance. - -### Core Team Chair - -The Core Team Chair is a single individual that's a coordinator and facilitator of the Core Team. -The Chair ensures that all governance processes are followed and has the casting vote in case of a -tie within the Core Team. The Core Team Chair is voted for by the Core Team and can serve as Chair -until they step down or removed by a two thirds majority vote by the Core Team. - -## Resources - -- Governance Models - [http://oss-watch.ac.uk/resources/governancemodels](http://oss-watch.ac.uk/resources/governancemodels) -- Sustain OSS Report - [https://sustainoss.org/assets/pdf/SustainOSS-west-2017-report.pdf](https://sustainoss.org/assets/pdf/SustainOSS-west-2017-report.pdf) -- Elinor Ostrom's 8 Principles for Managing A Commons - [http://www.onthecommons.org/magazine/elinor-ostroms-8-principles-managing-commmons#sthash.dqF8J3Bs.dpbs](http://www.onthecommons.org/magazine/elinor-ostroms-8-principles-managing-commmons#sthash.dqF8J3Bs.dpbs) diff --git a/GridList/GridList.js b/GridList/GridList.js new file mode 100644 index 00000000000000..df74b8c1dde920 --- /dev/null +++ b/GridList/GridList.js @@ -0,0 +1,145 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props) { + return { + root: { + display: 'flex', + flexWrap: 'wrap', + margin: -props.padding / 2 + }, + item: { + boxSizing: 'border-box', + padding: props.padding / 2 + } + }; +} + +var GridList = function (_Component) { + (0, _inherits3.default)(GridList, _Component); + + function GridList() { + (0, _classCallCheck3.default)(this, GridList); + return (0, _possibleConstructorReturn3.default)(this, (GridList.__proto__ || (0, _getPrototypeOf2.default)(GridList)).apply(this, arguments)); + } + + (0, _createClass3.default)(GridList, [{ + key: 'render', + value: function render() { + var _props = this.props, + cols = _props.cols, + padding = _props.padding, + cellHeight = _props.cellHeight, + children = _props.children, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['cols', 'padding', 'cellHeight', 'children', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); + + var wrappedChildren = _react2.default.Children.map(children, function (currentChild) { + if (_react2.default.isValidElement(currentChild) && currentChild.type.muiName === 'Subheader') { + return currentChild; + } + var childCols = currentChild.props.cols || 1; + var childRows = currentChild.props.rows || 1; + var itemStyle = (0, _simpleAssign2.default)({}, styles.item, { + width: 100 / cols * childCols + '%', + height: cellHeight === 'auto' ? 'auto' : cellHeight * childRows + padding + }); + + return _react2.default.createElement( + 'div', + { style: prepareStyles(itemStyle) }, + currentChild + ); + }); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({ style: prepareStyles(mergedRootStyles) }, other), + wrappedChildren + ); + } + }]); + return GridList; +}(_react.Component); + +GridList.defaultProps = { + cols: 2, + padding: 4, + cellHeight: 180 +}; +GridList.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? GridList.propTypes = { + /** + * Number of px for one cell height. + * You can set `'auto'` if you want to let the children determine the height. + */ + cellHeight: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['auto'])]), + /** + * Grid Tiles that will be in Grid List. + */ + children: _propTypes2.default.node, + /** + * Number of columns. + */ + cols: _propTypes2.default.number, + /** + * Number of px for the padding/spacing between items. + */ + padding: _propTypes2.default.number, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = GridList; \ No newline at end of file diff --git a/GridList/GridTile.js b/GridList/GridTile.js new file mode 100644 index 00000000000000..56b0d81574cb3d --- /dev/null +++ b/GridList/GridTile.js @@ -0,0 +1,307 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); + +var _defineProperty3 = _interopRequireDefault(_defineProperty2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var _titleBar; + + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + gridTile = _context$muiTheme.gridTile; + + + var actionPos = props.actionIcon && props.actionPosition; + + var styles = { + root: { + position: 'relative', + display: 'block', + height: '100%', + overflow: 'hidden' + }, + titleBar: (_titleBar = { + position: 'absolute', + left: 0, + right: 0 + }, (0, _defineProperty3.default)(_titleBar, props.titlePosition, 0), (0, _defineProperty3.default)(_titleBar, 'height', props.subtitle ? 68 : 48), (0, _defineProperty3.default)(_titleBar, 'background', props.titleBackground), (0, _defineProperty3.default)(_titleBar, 'display', 'flex'), (0, _defineProperty3.default)(_titleBar, 'alignItems', 'center'), _titleBar), + titleWrap: { + flexGrow: 1, + marginLeft: actionPos !== 'left' ? baseTheme.spacing.desktopGutterLess : 0, + marginRight: actionPos === 'left' ? baseTheme.spacing.desktopGutterLess : 0, + color: gridTile.textColor, + overflow: 'hidden' + }, + title: { + fontSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap' + }, + subtitle: { + fontSize: '12px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap' + }, + actionIcon: { + order: actionPos === 'left' ? -1 : 1 + }, + childImg: { + height: '100%', + transform: 'translateX(-50%)', + position: 'relative', + left: '50%' + } + }; + return styles; +} + +var GridTile = function (_Component) { + (0, _inherits3.default)(GridTile, _Component); + + function GridTile() { + (0, _classCallCheck3.default)(this, GridTile); + return (0, _possibleConstructorReturn3.default)(this, (GridTile.__proto__ || (0, _getPrototypeOf2.default)(GridTile)).apply(this, arguments)); + } + + (0, _createClass3.default)(GridTile, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.ensureImageCover(); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.ensureImageCover(); + } + }, { + key: 'ensureImageCover', + value: function ensureImageCover() { + var _this2 = this; + + var imgEl = this.refs.img; + + if (imgEl) { + var fit = function fit() { + if (imgEl.offsetWidth < imgEl.parentNode.offsetWidth) { + var isRtl = _this2.context.muiTheme.isRtl; + + imgEl.style.height = 'auto'; + if (isRtl) { + imgEl.style.right = '0'; + } else { + imgEl.style.left = '0'; + } + imgEl.style.width = '100%'; + imgEl.style.top = '50%'; + imgEl.style.transform = imgEl.style.WebkitTransform = 'translateY(-50%)'; + } + imgEl.removeEventListener('load', fit); + imgEl = null; // prevent closure memory leak + }; + if (imgEl.complete) { + fit(); + } else { + imgEl.addEventListener('load', fit); + } + } + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + title = _props.title, + subtitle = _props.subtitle, + titlePosition = _props.titlePosition, + titleBackground = _props.titleBackground, + titleStyle = _props.titleStyle, + subtitleStyle = _props.subtitleStyle, + actionIcon = _props.actionIcon, + actionPosition = _props.actionPosition, + style = _props.style, + children = _props.children, + containerElement = _props.containerElement, + other = (0, _objectWithoutProperties3.default)(_props, ['title', 'subtitle', 'titlePosition', 'titleBackground', 'titleStyle', 'subtitleStyle', 'actionIcon', 'actionPosition', 'style', 'children', 'containerElement']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); + + var titleBar = null; + + if (title) { + titleBar = _react2.default.createElement( + 'div', + { key: 'titlebar', style: prepareStyles(styles.titleBar) }, + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.titleWrap) }, + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.title, titleStyle)) }, + title + ), + subtitle ? _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.subtitle, subtitleStyle)) }, + subtitle + ) : null + ), + actionIcon ? _react2.default.createElement( + 'div', + { style: prepareStyles(styles.actionIcon) }, + actionIcon + ) : null + ); + } + + var newChildren = children; + + // if there is a single image passed as children + // clone it and add our styles + if (_react2.default.Children.count(children) === 1) { + newChildren = _react2.default.Children.map(children, function (child) { + if (child.type === 'img') { + return _react2.default.cloneElement(child, { + key: 'img', + ref: 'img', + style: prepareStyles((0, _simpleAssign2.default)({}, styles.childImg, child.props.style)) + }); + } else { + return child; + } + }); + } + + var containerProps = (0, _extends3.default)({ + style: prepareStyles(mergedRootStyles) + }, other); + + return _react2.default.isValidElement(containerElement) ? _react2.default.cloneElement(containerElement, containerProps, [newChildren, titleBar]) : _react2.default.createElement(containerElement, containerProps, [newChildren, titleBar]); + } + }]); + return GridTile; +}(_react.Component); + +GridTile.defaultProps = { + titlePosition: 'bottom', + titleBackground: 'rgba(0, 0, 0, 0.4)', + actionPosition: 'right', + cols: 1, + rows: 1, + containerElement: 'div' +}; +GridTile.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? GridTile.propTypes = { + /** + * An IconButton element to be used as secondary action target + * (primary action target is the tile itself). + */ + actionIcon: _propTypes2.default.element, + /** + * Position of secondary action IconButton. + */ + actionPosition: _propTypes2.default.oneOf(['left', 'right']), + /** + * Theoretically you can pass any node as children, but the main use case is to pass an img, + * in whichcase GridTile takes care of making the image "cover" available space + * (similar to background-size: cover or to object-fit:cover). + */ + children: _propTypes2.default.node, + /** + * Width of the tile in number of grid cells. + */ + cols: _propTypes2.default.number, + /** + * Either a string used as tag name for the tile root element, or a ReactElement. + * This is useful when you have, for example, a custom implementation of + * a navigation link (that knows about your routes) and you want to use it as the primary tile action. + * In case you pass a ReactElement, please ensure that it passes all props, + * accepts styles overrides and render it's children. + */ + containerElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]), + /** + * Height of the tile in number of grid cells. + */ + rows: _propTypes2.default.number, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * String or element serving as subtitle (support text). + */ + subtitle: _propTypes2.default.node, + /** + * Override the inline-styles of the subtitle element. + */ + subtitleStyle: _propTypes2.default.object, + /** + * Title to be displayed on tile. + */ + title: _propTypes2.default.node, + /** + * Style used for title bar background. + * Useful for setting custom gradients for example + */ + titleBackground: _propTypes2.default.string, + /** + * Position of the title bar (container of title, subtitle and action icon). + */ + titlePosition: _propTypes2.default.oneOf(['top', 'bottom']), + /** + * Override the inline-styles of the title element. + */ + titleStyle: _propTypes2.default.object +} : void 0; +exports.default = GridTile; \ No newline at end of file diff --git a/GridList/index.js b/GridList/index.js new file mode 100644 index 00000000000000..2d47aec22450b6 --- /dev/null +++ b/GridList/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.GridTile = exports.GridList = undefined; + +var _GridList2 = require('./GridList'); + +var _GridList3 = _interopRequireDefault(_GridList2); + +var _GridTile2 = require('./GridTile'); + +var _GridTile3 = _interopRequireDefault(_GridTile2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.GridList = _GridList3.default; +exports.GridTile = _GridTile3.default; +exports.default = _GridList3.default; \ No newline at end of file diff --git a/IconButton/IconButton.js b/IconButton/IconButton.js new file mode 100644 index 00000000000000..f064361d1cdf82 --- /dev/null +++ b/IconButton/IconButton.js @@ -0,0 +1,384 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +var _FontIcon = require('../FontIcon'); + +var _FontIcon2 = _interopRequireDefault(_FontIcon); + +var _Tooltip = require('../internal/Tooltip'); + +var _Tooltip2 = _interopRequireDefault(_Tooltip); + +var _childUtils = require('../utils/childUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var baseTheme = context.muiTheme.baseTheme; + + + return { + root: { + boxSizing: 'border-box', + overflow: 'visible', + transition: _transitions2.default.easeOut(), + padding: baseTheme.spacing.iconSize / 2, + width: baseTheme.spacing.iconSize * 2, + height: baseTheme.spacing.iconSize * 2, + fontSize: 0 + }, + tooltip: { + boxSizing: 'border-box' + }, + disabled: { + color: baseTheme.palette.disabledColor, + fill: baseTheme.palette.disabledColor, + cursor: 'default' + } + }; +} + +var IconButton = function (_Component) { + (0, _inherits3.default)(IconButton, _Component); + + function IconButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, IconButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = IconButton.__proto__ || (0, _getPrototypeOf2.default)(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false, + isKeyboardFocused: false, + // Not to be confonded with the touch property. + // This state is to determined if it's a mobile device. + touch: false, + tooltipShown: false + }, _this.handleBlur = function (event) { + _this.hideTooltip(); + if (_this.props.onBlur) { + _this.props.onBlur(event); + } + }, _this.handleFocus = function (event) { + _this.showTooltip(); + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + }, _this.handleMouseLeave = function (event) { + if (!_this.button.isKeyboardFocused()) { + _this.hideTooltip(); + } + _this.setState({ hovered: false }); + if (_this.props.onMouseLeave) { + _this.props.onMouseLeave(event); + } + }, _this.handleMouseOut = function (event) { + if (_this.props.disabled) _this.hideTooltip(); + if (_this.props.onMouseOut) _this.props.onMouseOut(event); + }, _this.handleMouseEnter = function (event) { + _this.showTooltip(); + + // Cancel hover styles for touch devices + if (!_this.state.touch) { + _this.setState({ hovered: true }); + } + if (_this.props.onMouseEnter) { + _this.props.onMouseEnter(event); + } + }, _this.handleTouchStart = function (event) { + _this.setState({ touch: true }); + + if (_this.props.onTouchStart) { + _this.props.onTouchStart(event); + } + }, _this.handleKeyboardFocus = function (event, isKeyboardFocused) { + var _this$props = _this.props, + disabled = _this$props.disabled, + onFocus = _this$props.onFocus, + onBlur = _this$props.onBlur, + onKeyboardFocus = _this$props.onKeyboardFocus; + + if (isKeyboardFocused && !disabled) { + _this.showTooltip(); + if (onFocus) { + onFocus(event); + } + } else { + _this.hideTooltip(); + if (onBlur) { + onBlur(event); + } + } + + _this.setState({ isKeyboardFocused: isKeyboardFocused }); + if (onKeyboardFocus) { + onKeyboardFocus(event, isKeyboardFocused); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(IconButton, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.disabled) { + this.setState({ hovered: false }); + } + } + }, { + key: 'setKeyboardFocus', + value: function setKeyboardFocus() { + this.button.setKeyboardFocus(); + } + }, { + key: 'showTooltip', + value: function showTooltip() { + if (this.props.tooltip) { + this.setState({ tooltipShown: true }); + } + } + }, { + key: 'hideTooltip', + value: function hideTooltip() { + if (this.props.tooltip) this.setState({ tooltipShown: false }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + disabled = _props.disabled, + hoveredStyle = _props.hoveredStyle, + disableTouchRipple = _props.disableTouchRipple, + children = _props.children, + iconClassName = _props.iconClassName, + style = _props.style, + tooltip = _props.tooltip, + tooltipPositionProp = _props.tooltipPosition, + tooltipStyles = _props.tooltipStyles, + touch = _props.touch, + iconStyle = _props.iconStyle, + other = (0, _objectWithoutProperties3.default)(_props, ['disabled', 'hoveredStyle', 'disableTouchRipple', 'children', 'iconClassName', 'style', 'tooltip', 'tooltipPosition', 'tooltipStyles', 'touch', 'iconStyle']); + + var fonticon = void 0; + + var styles = getStyles(this.props, this.context); + var tooltipPosition = tooltipPositionProp.split('-'); + + var hovered = (this.state.hovered || this.state.isKeyboardFocused) && !disabled; + + var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style, hovered ? hoveredStyle : {}); + + var tooltipElement = tooltip ? _react2.default.createElement(_Tooltip2.default, { + label: tooltip, + show: this.state.tooltipShown, + touch: touch, + style: (0, _simpleAssign2.default)(styles.tooltip, tooltipStyles), + verticalPosition: tooltipPosition[0], + horizontalPosition: tooltipPosition[1] + }) : null; + + if (iconClassName) { + var iconHoverColor = iconStyle.iconHoverColor, + iconStyleFontIcon = (0, _objectWithoutProperties3.default)(iconStyle, ['iconHoverColor']); + + + fonticon = _react2.default.createElement( + _FontIcon2.default, + { + className: iconClassName, + hoverColor: disabled ? null : iconHoverColor, + style: (0, _simpleAssign2.default)({}, disabled && styles.disabled, iconStyleFontIcon), + color: this.context.muiTheme.baseTheme.palette.textColor + }, + children + ); + } + + var childrenStyle = disabled ? (0, _simpleAssign2.default)({}, iconStyle, styles.disabled) : iconStyle; + + return _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({ + ref: function ref(_ref2) { + return _this2.button = _ref2; + } + }, other, { + centerRipple: true, + disabled: disabled, + onTouchStart: this.handleTouchStart, + style: mergedRootStyles, + disableTouchRipple: disableTouchRipple, + onBlur: this.handleBlur, + onFocus: this.handleFocus, + onMouseLeave: this.handleMouseLeave, + onMouseEnter: this.handleMouseEnter, + onMouseOut: this.handleMouseOut, + onKeyboardFocus: this.handleKeyboardFocus + }), + tooltipElement, + fonticon, + (0, _childUtils.extendChildren)(children, { + style: childrenStyle + }) + ); + } + }]); + return IconButton; +}(_react.Component); + +IconButton.muiName = 'IconButton'; +IconButton.defaultProps = { + disabled: false, + disableTouchRipple: false, + iconStyle: {}, + tooltipPosition: 'bottom-center', + touch: false +}; +IconButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? IconButton.propTypes = { + /** + * Can be used to pass a `FontIcon` element as the icon for the button. + */ + children: _propTypes2.default.node, + /** + * The CSS class name of the root element. + */ + className: _propTypes2.default.string, + /** + * If true, the element's ripple effect will be disabled. + */ + disableTouchRipple: _propTypes2.default.bool, + /** + * If true, the element will be disabled. + */ + disabled: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element when the component is hovered. + */ + hoveredStyle: _propTypes2.default.object, + /** + * The URL to link to when the button is clicked. + */ + href: _propTypes2.default.string, + /** + * The CSS class name of the icon. Used for setting the icon with a stylesheet. + */ + iconClassName: _propTypes2.default.string, + /** + * Override the inline-styles of the icon element. + * Note: you can specify iconHoverColor as a String inside this object. + */ + iconStyle: _propTypes2.default.object, + /** @ignore */ + onBlur: _propTypes2.default.func, + /** + * Callback function fired when the button is clicked. + * + * @param {object} event Click event targeting the button. + */ + onClick: _propTypes2.default.func, + /** @ignore */ + onFocus: _propTypes2.default.func, + /** + * Callback function fired when the element is focused or blurred by the keyboard. + * + * @param {object} event `focus` or `blur` event targeting the element. + * @param {boolean} keyboardFocused Indicates whether the element is focused. + */ + onKeyboardFocus: _propTypes2.default.func, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** @ignore */ + onMouseOut: _propTypes2.default.func, + /** @ignore */ + onTouchStart: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The text to supply to the element's tooltip. + */ + tooltip: _propTypes2.default.node, + /** + * The vertical and horizontal positions, respectively, of the element's tooltip. + * Possible values are: "bottom-center", "top-center", "bottom-right", "top-right", + * "bottom-left", and "top-left". + */ + tooltipPosition: _propTypes4.default.cornersAndCenter, + /** + * Override the inline-styles of the tooltip element. + */ + tooltipStyles: _propTypes2.default.object, + /** + * If true, increase the tooltip element's size. Useful for increasing tooltip + * readability on mobile devices. + */ + touch: _propTypes2.default.bool +} : void 0; +exports.default = IconButton; \ No newline at end of file diff --git a/IconButton/index.js b/IconButton/index.js new file mode 100644 index 00000000000000..52e93f81cc9953 --- /dev/null +++ b/IconButton/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _IconButton = require('./IconButton'); + +var _IconButton2 = _interopRequireDefault(_IconButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _IconButton2.default; \ No newline at end of file diff --git a/IconMenu/IconMenu.js b/IconMenu/IconMenu.js new file mode 100644 index 00000000000000..db0fa5e1f66ca1 --- /dev/null +++ b/IconMenu/IconMenu.js @@ -0,0 +1,415 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _events = require('../utils/events'); + +var _events2 = _interopRequireDefault(_events); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +var _Menu = require('../Menu/Menu'); + +var _Menu2 = _interopRequireDefault(_Menu); + +var _Popover = require('../Popover/Popover'); + +var _Popover2 = _interopRequireDefault(_Popover); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var IconMenu = function (_Component) { + (0, _inherits3.default)(IconMenu, _Component); + + function IconMenu() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, IconMenu); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = IconMenu.__proto__ || (0, _getPrototypeOf2.default)(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + menuInitiallyKeyboardFocused: false, + open: false + }, _this.handleItemClick = function (event, child) { + if (_this.props.clickCloseDelay !== 0 && !child.props.hasOwnProperty('menuItems')) { + var isKeyboard = _events2.default.isKeyboard(event); + _this.timerCloseId = setTimeout(function () { + _this.close(isKeyboard ? 'enter' : 'itemTap', isKeyboard); + }, _this.props.clickCloseDelay); + } + + _this.props.onItemClick(event, child); + }, _this.handleRequestClose = function (reason) { + _this.close(reason); + }, _this.handleEscKeyDownMenu = function (event) { + _this.close('escape', event); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(IconMenu, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.open != null) { + this.setState({ + open: nextProps.open, + anchorEl: this.refs.iconMenuContainer + }); + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.timerCloseId); + } + }, { + key: 'isOpen', + value: function isOpen() { + return this.state.open; + } + }, { + key: 'close', + value: function close(reason, isKeyboard) { + var _this2 = this; + + if (!this.state.open) { + return; + } + + if (this.props.open !== null) { + this.props.onRequestChange(false, reason); + } else { + this.setState({ open: false }, function () { + // Set focus on the icon button when the menu close + if (isKeyboard) { + var iconButton = _this2.refs.iconButton; + _reactDom2.default.findDOMNode(iconButton).focus(); + iconButton.setKeyboardFocus(); + } + }); + } + } + }, { + key: 'open', + value: function open(reason, event) { + if (this.props.open !== null) { + this.props.onRequestChange(true, reason); + + return this.setState({ + menuInitiallyKeyboardFocused: _events2.default.isKeyboard(event), + anchorEl: event.currentTarget + }); + } + + this.setState({ + open: true, + menuInitiallyKeyboardFocused: _events2.default.isKeyboard(event), + anchorEl: event.currentTarget + }); + } + }, { + key: 'render', + value: function render() { + var _this3 = this; + + var _props = this.props, + anchorOrigin = _props.anchorOrigin, + className = _props.className, + animated = _props.animated, + animation = _props.animation, + iconButtonElement = _props.iconButtonElement, + iconStyle = _props.iconStyle, + onItemClick = _props.onItemClick, + onKeyboardFocus = _props.onKeyboardFocus, + onMouseDown = _props.onMouseDown, + onMouseLeave = _props.onMouseLeave, + onMouseEnter = _props.onMouseEnter, + onMouseUp = _props.onMouseUp, + onRequestChange = _props.onRequestChange, + onClick = _props.onClick, + listStyle = _props.listStyle, + menuStyle = _props.menuStyle, + style = _props.style, + targetOrigin = _props.targetOrigin, + clickCloseDelay = _props.clickCloseDelay, + useLayerForClickAway = _props.useLayerForClickAway, + other = (0, _objectWithoutProperties3.default)(_props, ['anchorOrigin', 'className', 'animated', 'animation', 'iconButtonElement', 'iconStyle', 'onItemClick', 'onKeyboardFocus', 'onMouseDown', 'onMouseLeave', 'onMouseEnter', 'onMouseUp', 'onRequestChange', 'onClick', 'listStyle', 'menuStyle', 'style', 'targetOrigin', 'clickCloseDelay', 'useLayerForClickAway']); + var prepareStyles = this.context.muiTheme.prepareStyles; + var _state = this.state, + open = _state.open, + anchorEl = _state.anchorEl; + + + var styles = { + root: { + display: 'inline-block', + position: 'relative' + }, + menu: { + position: 'relative' + } + }; + + var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); + var mergedMenuStyles = (0, _simpleAssign2.default)(styles.menu, menuStyle); + + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(iconButtonElement.type.muiName !== 'SvgIcon', 'Material-UI: You shoud not provide an to the \'iconButtonElement\' property of .\nYou should wrapped it with an .') : void 0; + + var iconButtonProps = { + onKeyboardFocus: onKeyboardFocus, + onClick: function onClick(event) { + _this3.open(_events2.default.isKeyboard(event) ? 'keyboard' : 'iconTap', event); + if (iconButtonElement.props.onClick) { + iconButtonElement.props.onClick(event); + } + }, + ref: 'iconButton' + }; + if (iconStyle || iconButtonElement.props.iconStyle) { + iconButtonProps.iconStyle = iconStyle ? (0, _simpleAssign2.default)({}, iconStyle, iconButtonElement.props.iconStyle) : iconButtonElement.props.iconStyle; + } + var iconButton = _react2.default.cloneElement(iconButtonElement, iconButtonProps); + + var menu = _react2.default.createElement( + _Menu2.default, + (0, _extends3.default)({}, other, { + initiallyKeyboardFocused: this.state.menuInitiallyKeyboardFocused, + onEscKeyDown: this.handleEscKeyDownMenu, + onItemClick: this.handleItemClick, + style: mergedMenuStyles, + listStyle: listStyle + }), + this.props.children + ); + + return _react2.default.createElement( + 'div', + { + ref: 'iconMenuContainer', + className: className, + onMouseDown: onMouseDown, + onMouseLeave: onMouseLeave, + onMouseEnter: onMouseEnter, + onMouseUp: onMouseUp, + onClick: onClick, + style: prepareStyles(mergedRootStyles) + }, + iconButton, + _react2.default.createElement( + _Popover2.default, + { + anchorOrigin: anchorOrigin, + targetOrigin: targetOrigin, + open: open, + anchorEl: anchorEl, + childContextTypes: this.constructor.childContextTypes, + useLayerForClickAway: useLayerForClickAway, + onRequestClose: this.handleRequestClose, + animated: animated, + animation: animation, + context: this.context + }, + menu + ) + ); + } + }]); + return IconMenu; +}(_react.Component); + +IconMenu.muiName = 'IconMenu'; +IconMenu.defaultProps = { + anchorOrigin: { + vertical: 'top', + horizontal: 'left' + }, + animated: true, + multiple: false, + open: null, + onItemClick: function onItemClick() {}, + onKeyboardFocus: function onKeyboardFocus() {}, + onMouseDown: function onMouseDown() {}, + onMouseLeave: function onMouseLeave() {}, + onMouseEnter: function onMouseEnter() {}, + onMouseUp: function onMouseUp() {}, + onRequestChange: function onRequestChange() {}, + onClick: function onClick() {}, + targetOrigin: { + vertical: 'top', + horizontal: 'left' + }, + clickCloseDelay: 200, + useLayerForClickAway: false +}; +IconMenu.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? IconMenu.propTypes = { + /** + * This is the point on the icon where the menu + * `targetOrigin` will attach. + * Options: + * vertical: [top, center, bottom] + * horizontal: [left, middle, right]. + */ + anchorOrigin: _propTypes4.default.origin, + /** + * If true, the popover will apply transitions when + * it gets added to the DOM. + */ + animated: _propTypes2.default.bool, + /** + * Override the default animation component used. + */ + animation: _propTypes2.default.func, + /** + * Should be used to pass `MenuItem` components. + */ + children: _propTypes2.default.node, + /** + * The CSS class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Sets the delay in milliseconds before closing the + * menu when an item is clicked. + * If set to 0 then the auto close functionality + * will be disabled. + */ + clickCloseDelay: _propTypes2.default.number, + /** + * This is the `IconButton` to render. This button will open the menu. + */ + iconButtonElement: _propTypes2.default.element.isRequired, + /** + * Override the inline-styles of the underlying icon element. + */ + iconStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the underlying `List` element. + */ + listStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the menu element. + */ + menuStyle: _propTypes2.default.object, + /** + * If true, the value can an be array and allow the menu to be a multi-select. + */ + multiple: _propTypes2.default.bool, + /** + * Callback function fired when the `IconButton` element is clicked. + * + * @param {object} event Click event targeting the `IconButton` element. + */ + onClick: _propTypes2.default.func, + /** + * Callback function fired when a menu item is selected with a click. + * + * @param {object} event Click event targeting the selected menu item element. + * @param {object} child The selected element. + */ + onItemClick: _propTypes2.default.func, + /** + * Callback function fired when the `IconButton` element is focused or blurred by the keyboard. + * + * @param {object} event `focus` or `blur` event targeting the `IconButton` element. + * @param {boolean} keyboardFocused If true, the `IconButton` element is focused. + */ + onKeyboardFocus: _propTypes2.default.func, + /** @ignore */ + onMouseDown: _propTypes2.default.func, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** @ignore */ + onMouseUp: _propTypes2.default.func, + /** + * Callback function fired when the `open` state of the menu is requested to be changed. + * + * @param {boolean} open If true, the menu was requested to be opened. + * @param {string} reason The reason for the open or close request. Possible values are + * 'keyboard' and 'iconTap' for open requests; 'enter', 'escape', 'itemTap', and 'clickAway' + * for close requests. + */ + onRequestChange: _propTypes2.default.func, + /** + * If true, the `IconMenu` is opened. + */ + open: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * This is the point on the menu which will stick to the menu + * origin. + * Options: + * vertical: [top, center, bottom] + * horizontal: [left, middle, right]. + */ + targetOrigin: _propTypes4.default.origin, + /** + * If true, the popover will render on top of an invisible + * layer, which will prevent clicks to the underlying elements. + */ + useLayerForClickAway: _propTypes2.default.bool +} : void 0; +exports.default = IconMenu; \ No newline at end of file diff --git a/IconMenu/index.js b/IconMenu/index.js new file mode 100644 index 00000000000000..9af2d7cfa979ca --- /dev/null +++ b/IconMenu/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.MenuItem = exports.IconMenu = undefined; + +var _IconMenu2 = require('./IconMenu'); + +var _IconMenu3 = _interopRequireDefault(_IconMenu2); + +var _MenuItem2 = require('../MenuItem/MenuItem'); + +var _MenuItem3 = _interopRequireDefault(_MenuItem2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.IconMenu = _IconMenu3.default; +exports.MenuItem = _MenuItem3.default; +exports.default = _IconMenu3.default; \ No newline at end of file diff --git a/LinearProgress/LinearProgress.js b/LinearProgress/LinearProgress.js new file mode 100644 index 00000000000000..3e9e410b8bb0ce --- /dev/null +++ b/LinearProgress/LinearProgress.js @@ -0,0 +1,232 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getRelativeValue(value, min, max) { + var clampedValue = Math.min(Math.max(min, value), max); + var rangeValue = max - min; + var relValue = Math.round((clampedValue - min) / rangeValue * 10000) / 10000; + return relValue * 100; +} + +function getStyles(props, context) { + var max = props.max, + min = props.min, + value = props.value; + var _context$muiTheme = context.muiTheme, + palette = _context$muiTheme.baseTheme.palette, + borderRadius = _context$muiTheme.borderRadius; + + + var styles = { + root: { + position: 'relative', + height: 4, + display: 'block', + width: '100%', + backgroundColor: palette.primary3Color, + borderRadius: borderRadius, + margin: 0, + overflow: 'hidden' + }, + bar: { + height: '100%' + }, + barFragment1: {}, + barFragment2: {} + }; + + if (props.mode === 'indeterminate') { + styles.barFragment1 = { + position: 'absolute', + backgroundColor: props.color || palette.primary1Color, + top: 0, + left: 0, + bottom: 0, + transition: _transitions2.default.create('all', '840ms', null, 'cubic-bezier(0.650, 0.815, 0.735, 0.395)') + }; + + styles.barFragment2 = { + position: 'absolute', + backgroundColor: props.color || palette.primary1Color, + top: 0, + left: 0, + bottom: 0, + transition: _transitions2.default.create('all', '840ms', null, 'cubic-bezier(0.165, 0.840, 0.440, 1.000)') + }; + } else { + styles.bar.backgroundColor = props.color || palette.primary1Color; + styles.bar.transition = _transitions2.default.create('width', '.3s', null, 'linear'); + styles.bar.width = getRelativeValue(value, min, max) + '%'; + } + + return styles; +} + +var LinearProgress = function (_Component) { + (0, _inherits3.default)(LinearProgress, _Component); + + function LinearProgress() { + (0, _classCallCheck3.default)(this, LinearProgress); + return (0, _possibleConstructorReturn3.default)(this, (LinearProgress.__proto__ || (0, _getPrototypeOf2.default)(LinearProgress)).apply(this, arguments)); + } + + (0, _createClass3.default)(LinearProgress, [{ + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + this.timers = {}; + + this.timers.bar1 = this.barUpdate('bar1', 0, this.refs.bar1, [[-35, 100], [100, -90]], 0); + + this.timers.bar2 = setTimeout(function () { + _this2.barUpdate('bar2', 0, _this2.refs.bar2, [[-200, 100], [107, -8]], 0); + }, 850); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.timers.bar1); + clearTimeout(this.timers.bar2); + } + }, { + key: 'barUpdate', + value: function barUpdate(id, step, barElement, stepValues, timeToNextStep) { + var _this3 = this; + + if (this.props.mode !== 'indeterminate') return; + + timeToNextStep = timeToNextStep || 420; + step = step || 0; + step %= 4; + + var right = this.context.muiTheme.isRtl ? 'left' : 'right'; + var left = this.context.muiTheme.isRtl ? 'right' : 'left'; + + if (step === 0) { + barElement.style[left] = stepValues[0][0] + '%'; + barElement.style[right] = stepValues[0][1] + '%'; + } else if (step === 1) { + barElement.style.transitionDuration = '840ms'; + } else if (step === 2) { + barElement.style[left] = stepValues[1][0] + '%'; + barElement.style[right] = stepValues[1][1] + '%'; + } else if (step === 3) { + barElement.style.transitionDuration = '0ms'; + } + this.timers[id] = setTimeout(function () { + return _this3.barUpdate(id, step + 1, barElement, stepValues); + }, timeToNextStep); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.bar) }, + _react2.default.createElement('div', { ref: 'bar1', style: prepareStyles(styles.barFragment1) }), + _react2.default.createElement('div', { ref: 'bar2', style: prepareStyles(styles.barFragment2) }) + ) + ); + } + }]); + return LinearProgress; +}(_react.Component); + +LinearProgress.defaultProps = { + mode: 'indeterminate', + value: 0, + min: 0, + max: 100 +}; +LinearProgress.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? LinearProgress.propTypes = { + /** + * The color of the progress bar, defaults to + * primary color of theme. + */ + color: _propTypes2.default.string, + /** + * The max value of progress, only works in determinate mode. + */ + max: _propTypes2.default.number, + /** + * The min value of progress, only works in determinate mode. + */ + min: _propTypes2.default.number, + /** + * The mode of show your progress, indeterminate for when + * there is no value for progress. + */ + mode: _propTypes2.default.oneOf(['determinate', 'indeterminate']), + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The value of progress, only works in determinate mode. + */ + value: _propTypes2.default.number +} : void 0; +exports.default = LinearProgress; \ No newline at end of file diff --git a/LinearProgress/index.js b/LinearProgress/index.js new file mode 100644 index 00000000000000..b3aefa51d9cdbb --- /dev/null +++ b/LinearProgress/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _LinearProgress = require('./LinearProgress'); + +var _LinearProgress2 = _interopRequireDefault(_LinearProgress); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _LinearProgress2.default; \ No newline at end of file diff --git a/List/List.js b/List/List.js new file mode 100644 index 00000000000000..c1069d19c54210 --- /dev/null +++ b/List/List.js @@ -0,0 +1,108 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Subheader = require('../Subheader'); + +var _Subheader2 = _interopRequireDefault(_Subheader); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var List = function (_Component) { + (0, _inherits3.default)(List, _Component); + + function List() { + (0, _classCallCheck3.default)(this, List); + return (0, _possibleConstructorReturn3.default)(this, (List.__proto__ || (0, _getPrototypeOf2.default)(List)).apply(this, arguments)); + } + + (0, _createClass3.default)(List, [{ + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + + var hasSubheader = false; + + var firstChild = _react.Children.toArray(children)[0]; + if ((0, _react.isValidElement)(firstChild) && firstChild.type === _Subheader2.default) { + hasSubheader = true; + } + + var styles = { + root: { + padding: (hasSubheader ? 0 : 8) + 'px 0px 8px 0px' + } + }; + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + children + ); + } + }]); + return List; +}(_react.Component); + +List.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? List.propTypes = { + /** + * These are usually `ListItem`s that are passed to + * be part of the list. + */ + children: _propTypes2.default.node, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = List; \ No newline at end of file diff --git a/List/ListItem.js b/List/ListItem.js new file mode 100644 index 00000000000000..8330b3a000a5c9 --- /dev/null +++ b/List/ListItem.js @@ -0,0 +1,775 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _shallowEqual = require('recompose/shallowEqual'); + +var _shallowEqual2 = _interopRequireDefault(_shallowEqual); + +var _colorManipulator = require('../utils/colorManipulator'); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +var _IconButton = require('../IconButton'); + +var _IconButton2 = _interopRequireDefault(_IconButton); + +var _expandLess = require('../svg-icons/navigation/expand-less'); + +var _expandLess2 = _interopRequireDefault(_expandLess); + +var _expandMore = require('../svg-icons/navigation/expand-more'); + +var _expandMore2 = _interopRequireDefault(_expandMore); + +var _NestedList = require('./NestedList'); + +var _NestedList2 = _interopRequireDefault(_NestedList); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var autoGenerateNestedIndicator = props.autoGenerateNestedIndicator, + insetChildren = props.insetChildren, + leftAvatar = props.leftAvatar, + leftCheckbox = props.leftCheckbox, + leftIcon = props.leftIcon, + nestedItems = props.nestedItems, + nestedLevel = props.nestedLevel, + rightAvatar = props.rightAvatar, + rightIcon = props.rightIcon, + rightIconButton = props.rightIconButton, + rightToggle = props.rightToggle, + secondaryText = props.secondaryText, + secondaryTextLines = props.secondaryTextLines; + var muiTheme = context.muiTheme; + var listItem = muiTheme.listItem; + + + var textColor = muiTheme.baseTheme.palette.textColor; + var hoverColor = props.hoverColor || (0, _colorManipulator.fade)(textColor, 0.1); + var singleAvatar = !secondaryText && (leftAvatar || rightAvatar); + var singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar); + var twoLine = secondaryText && secondaryTextLines === 1; + var threeLine = secondaryText && secondaryTextLines > 1; + + var isKeyboardFocused = (props.isKeyboardFocused !== undefined ? props : state).isKeyboardFocused; + + var styles = { + root: { + backgroundColor: (isKeyboardFocused || state.hovered) && !state.rightIconButtonHovered && !state.rightIconButtonKeyboardFocused ? hoverColor : null, + color: textColor, + display: 'block', + fontSize: 16, + lineHeight: '16px', + position: 'relative', + transition: _transitions2.default.easeOut() + }, + + // This inner div is needed so that ripples will span the entire container + innerDiv: { + marginLeft: nestedLevel * listItem.nestedLevelDepth, + paddingLeft: leftIcon || leftAvatar || leftCheckbox || insetChildren ? 72 : 16, + paddingRight: rightIcon || rightAvatar || rightIconButton || nestedItems.length && autoGenerateNestedIndicator ? 56 : rightToggle ? 72 : 16, + paddingBottom: singleAvatar ? 20 : 16, + paddingTop: singleNoAvatar || threeLine ? 16 : 20, + position: 'relative' + }, + + icons: { + height: 24, + width: 24, + display: 'block', + position: 'absolute', + top: twoLine ? 12 : singleAvatar ? 4 : 0, + margin: 12 + }, + + leftIcon: { + left: 4 + }, + + rightIcon: { + right: 4 + }, + + avatars: { + position: 'absolute', + top: singleAvatar ? 8 : 16 + }, + + label: { + cursor: 'pointer' + }, + + leftAvatar: { + left: 16 + }, + + rightAvatar: { + right: 16 + }, + + leftCheckbox: { + position: 'absolute', + display: 'block', + width: 24, + top: twoLine ? 24 : singleAvatar ? 16 : 12, + left: 16 + }, + + primaryText: {}, + + rightIconButton: { + position: 'absolute', + display: 'block', + top: twoLine ? 12 : singleAvatar ? 4 : 0, + right: 4 + }, + + rightToggle: { + position: 'absolute', + display: 'block', + width: 54, + top: twoLine ? 25 : singleAvatar ? 17 : 13, + right: 8 + }, + + secondaryText: { + fontSize: 14, + lineHeight: threeLine ? '18px' : '16px', + height: threeLine ? 36 : 16, + margin: 0, + marginTop: 4, + color: listItem.secondaryTextColor, + + // needed for 2 and 3 line ellipsis + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: threeLine ? null : 'nowrap', + display: threeLine ? '-webkit-box' : null, + WebkitLineClamp: threeLine ? 2 : null, + WebkitBoxOrient: threeLine ? 'vertical' : null + } + }; + + return styles; +} + +var ListItem = function (_Component) { + (0, _inherits3.default)(ListItem, _Component); + + function ListItem(props, context) { + (0, _classCallCheck3.default)(this, ListItem); + + var _this = (0, _possibleConstructorReturn3.default)(this, (ListItem.__proto__ || (0, _getPrototypeOf2.default)(ListItem)).call(this, props, context)); + + _this.handleKeyboardFocus = function (event, isKeyboardFocused) { + _this.setState({ isKeyboardFocused: isKeyboardFocused }); + _this.props.onKeyboardFocus(event, isKeyboardFocused); + }; + + _this.handleMouseEnter = function (event) { + if (!_this.state.touch) _this.setState({ hovered: true }); + _this.props.onMouseEnter(event); + }; + + _this.handleMouseLeave = function (event) { + _this.setState({ hovered: false }); + _this.props.onMouseLeave(event); + }; + + _this.handleClick = function (event) { + if (_this.props.onClick) { + _this.props.onClick(event); + } + + if (_this.props.primaryTogglesNestedList) { + _this.handleNestedListToggle(event); + } + }; + + _this.handleNestedListToggle = function (event) { + if (_this.props.leftCheckbox) { + event.preventDefault(); + } + event.stopPropagation(); + + if (_this.props.open === null) { + _this.setState({ open: !_this.state.open }, function () { + _this.props.onNestedListToggle(_this); + }); + } else { + // Exposing `this` in the callback is quite a bad API. + // I'm doing a one level deep clone to expose a fake state.open. + _this.props.onNestedListToggle((0, _extends3.default)({}, _this, { + state: { + open: !_this.state.open + } + })); + } + }; + + _this.handleRightIconButtonKeyboardFocus = function (event, isKeyboardFocused) { + if (isKeyboardFocused) { + _this.setState({ + isKeyboardFocused: false, + rightIconButtonKeyboardFocused: isKeyboardFocused + }); + } + + var iconButton = _this.props.rightIconButton; + + if (iconButton && iconButton.props.onKeyboardFocus) iconButton.props.onKeyboardFocus(event, isKeyboardFocused); + }; + + _this.handleRightIconButtonMouseLeave = function (event) { + var iconButton = _this.props.rightIconButton; + _this.setState({ rightIconButtonHovered: false }); + if (iconButton && iconButton.props.onMouseLeave) iconButton.props.onMouseLeave(event); + }; + + _this.handleRightIconButtonMouseEnter = function (event) { + var iconButton = _this.props.rightIconButton; + _this.setState({ rightIconButtonHovered: true }); + if (iconButton && iconButton.props.onMouseEnter) iconButton.props.onMouseEnter(event); + }; + + _this.handleRightIconButtonMouseUp = function (event) { + var iconButton = _this.props.rightIconButton; + event.stopPropagation(); + if (iconButton && iconButton.props.onMouseUp) iconButton.props.onMouseUp(event); + }; + + _this.handleRightIconButtonClick = function (event) { + var iconButton = _this.props.rightIconButton; + + // Stop the event from bubbling up to the list-item + event.stopPropagation(); + if (iconButton && iconButton.props.onClick) iconButton.props.onClick(event); + }; + + _this.handleTouchStart = function (event) { + _this.setState({ touch: true }); + _this.props.onTouchStart(event); + }; + + _this.handleTouchEnd = function (event) { + _this.setState({ touch: true }); + _this.props.onTouchEnd(event); + }; + + _this.state = { + hovered: false, + isKeyboardFocused: false, + open: props.initiallyOpen, + rightIconButtonHovered: false, + rightIconButtonKeyboardFocused: false, + touch: false + }; + return _this; + } + + (0, _createClass3.default)(ListItem, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + open: this.props.open === null ? this.props.initiallyOpen === true : this.props.open + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + // update the state when the component is controlled. + if (nextProps.open !== null) this.setState({ open: nextProps.open }); + if (nextProps.disabled && this.state.hovered) this.setState({ hovered: false }); + } + }, { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps, nextState, nextContext) { + return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState) || !(0, _shallowEqual2.default)(this.context, nextContext); + } + + // This method is needed by the `MenuItem` component. + + }, { + key: 'applyFocusState', + value: function applyFocusState(focusState) { + if (this.button) { + var buttonEl = _reactDom2.default.findDOMNode(this.button); + + switch (focusState) { + case 'none': + buttonEl.blur(); + break; + case 'focused': + buttonEl.focus(); + break; + case 'keyboard-focused': + this.button.setKeyboardFocus(); + buttonEl.focus(); + break; + } + } + } + }, { + key: 'createDisabledElement', + value: function createDisabledElement(styles, contentChildren, additionalProps) { + var _props = this.props, + innerDivStyle = _props.innerDivStyle, + style = _props.style; + + + var mergedDivStyles = (0, _simpleAssign2.default)({}, styles.root, styles.innerDiv, innerDivStyle, style); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, additionalProps, { + style: this.context.muiTheme.prepareStyles(mergedDivStyles) + }), + contentChildren + ); + } + }, { + key: 'createLabelElement', + value: function createLabelElement(styles, contentChildren, additionalProps) { + var _props2 = this.props, + innerDivStyle = _props2.innerDivStyle, + style = _props2.style; + + + var mergedLabelStyles = (0, _simpleAssign2.default)({}, styles.root, styles.innerDiv, innerDivStyle, styles.label, style); + + return _react2.default.createElement( + 'label', + (0, _extends3.default)({}, additionalProps, { + style: this.context.muiTheme.prepareStyles(mergedLabelStyles) + }), + contentChildren + ); + } + }, { + key: 'createTextElement', + value: function createTextElement(styles, data, key) { + var prepareStyles = this.context.muiTheme.prepareStyles; + + if (_react2.default.isValidElement(data)) { + var style = (0, _simpleAssign2.default)({}, styles, data.props.style); + if (typeof data.type === 'string') { + // if element is a native dom node + style = prepareStyles(style); + } + return _react2.default.cloneElement(data, { + key: key, + style: style + }); + } + + return _react2.default.createElement( + 'div', + { key: key, style: prepareStyles(styles) }, + data + ); + } + }, { + key: 'pushElement', + value: function pushElement(children, element, baseStyles, additionalProps) { + if (element) { + var styles = (0, _simpleAssign2.default)({}, baseStyles, element.props.style); + children.push(_react2.default.cloneElement(element, (0, _extends3.default)({ + key: children.length, + style: styles + }, additionalProps))); + } + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props3 = this.props, + autoGenerateNestedIndicator = _props3.autoGenerateNestedIndicator, + children = _props3.children, + containerElement = _props3.containerElement, + disabled = _props3.disabled, + disableKeyboardFocus = _props3.disableKeyboardFocus, + hoverColor = _props3.hoverColor, + initiallyOpen = _props3.initiallyOpen, + innerDivStyle = _props3.innerDivStyle, + insetChildren = _props3.insetChildren, + leftAvatar = _props3.leftAvatar, + leftCheckbox = _props3.leftCheckbox, + leftIcon = _props3.leftIcon, + nestedItems = _props3.nestedItems, + nestedLevel = _props3.nestedLevel, + nestedListStyle = _props3.nestedListStyle, + onKeyboardFocus = _props3.onKeyboardFocus, + isKeyboardFocused = _props3.isKeyboardFocused, + onMouseEnter = _props3.onMouseEnter, + onMouseLeave = _props3.onMouseLeave, + onNestedListToggle = _props3.onNestedListToggle, + onTouchStart = _props3.onTouchStart, + onClick = _props3.onClick, + rightAvatar = _props3.rightAvatar, + rightIcon = _props3.rightIcon, + rightIconButton = _props3.rightIconButton, + rightToggle = _props3.rightToggle, + primaryText = _props3.primaryText, + primaryTogglesNestedList = _props3.primaryTogglesNestedList, + secondaryText = _props3.secondaryText, + secondaryTextLines = _props3.secondaryTextLines, + style = _props3.style, + other = (0, _objectWithoutProperties3.default)(_props3, ['autoGenerateNestedIndicator', 'children', 'containerElement', 'disabled', 'disableKeyboardFocus', 'hoverColor', 'initiallyOpen', 'innerDivStyle', 'insetChildren', 'leftAvatar', 'leftCheckbox', 'leftIcon', 'nestedItems', 'nestedLevel', 'nestedListStyle', 'onKeyboardFocus', 'isKeyboardFocused', 'onMouseEnter', 'onMouseLeave', 'onNestedListToggle', 'onTouchStart', 'onClick', 'rightAvatar', 'rightIcon', 'rightIconButton', 'rightToggle', 'primaryText', 'primaryTogglesNestedList', 'secondaryText', 'secondaryTextLines', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + var contentChildren = [children]; + + if (leftIcon) { + var additionalProps = { + color: leftIcon.props.color || this.context.muiTheme.listItem.leftIconColor + }; + this.pushElement(contentChildren, leftIcon, (0, _simpleAssign2.default)({}, styles.icons, styles.leftIcon), additionalProps); + } + + if (rightIcon) { + var _additionalProps = { + color: rightIcon.props.color || this.context.muiTheme.listItem.rightIconColor + }; + this.pushElement(contentChildren, rightIcon, (0, _simpleAssign2.default)({}, styles.icons, styles.rightIcon), _additionalProps); + } + + if (leftAvatar) { + this.pushElement(contentChildren, leftAvatar, (0, _simpleAssign2.default)({}, styles.avatars, styles.leftAvatar)); + } + + if (rightAvatar) { + this.pushElement(contentChildren, rightAvatar, (0, _simpleAssign2.default)({}, styles.avatars, styles.rightAvatar)); + } + + if (leftCheckbox) { + this.pushElement(contentChildren, leftCheckbox, (0, _simpleAssign2.default)({}, styles.leftCheckbox)); + } + + // RightIconButtonElement + var hasNestListItems = nestedItems.length; + var hasRightElement = rightAvatar || rightIcon || rightIconButton || rightToggle; + var needsNestedIndicator = hasNestListItems && autoGenerateNestedIndicator && !hasRightElement; + + if (rightIconButton || needsNestedIndicator) { + var rightIconButtonElement = rightIconButton; + var rightIconButtonHandlers = { + onKeyboardFocus: this.handleRightIconButtonKeyboardFocus, + onMouseEnter: this.handleRightIconButtonMouseEnter, + onMouseLeave: this.handleRightIconButtonMouseLeave, + onClick: this.handleRightIconButtonClick, + onMouseDown: this.handleRightIconButtonMouseUp, + onMouseUp: this.handleRightIconButtonMouseUp + }; + + // Create a nested list indicator icon if we don't have an icon on the right + if (needsNestedIndicator) { + rightIconButtonElement = this.state.open ? _react2.default.createElement( + _IconButton2.default, + null, + _react2.default.createElement(_expandLess2.default, null) + ) : _react2.default.createElement( + _IconButton2.default, + null, + _react2.default.createElement(_expandMore2.default, null) + ); + rightIconButtonHandlers.onClick = this.handleNestedListToggle; + } + + this.pushElement(contentChildren, rightIconButtonElement, (0, _simpleAssign2.default)({}, styles.rightIconButton), rightIconButtonHandlers); + } + + if (rightToggle) { + this.pushElement(contentChildren, rightToggle, (0, _simpleAssign2.default)({}, styles.rightToggle)); + } + + if (primaryText) { + var primaryTextElement = this.createTextElement(styles.primaryText, primaryText, 'primaryText'); + contentChildren.push(primaryTextElement); + } + + if (secondaryText) { + var secondaryTextElement = this.createTextElement(styles.secondaryText, secondaryText, 'secondaryText'); + contentChildren.push(secondaryTextElement); + } + + var nestedList = nestedItems.length ? _react2.default.createElement( + _NestedList2.default, + { nestedLevel: nestedLevel, open: this.state.open, style: nestedListStyle }, + nestedItems + ) : undefined; + + var simpleLabel = !primaryTogglesNestedList && (leftCheckbox || rightToggle); + + return _react2.default.createElement( + 'div', + null, + simpleLabel ? this.createLabelElement(styles, contentChildren, other) : disabled ? this.createDisabledElement(styles, contentChildren, other) : _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({ + containerElement: containerElement + }, other, { + disableKeyboardFocus: disableKeyboardFocus || this.state.rightIconButtonKeyboardFocused, + onKeyboardFocus: this.handleKeyboardFocus, + onMouseLeave: this.handleMouseLeave, + onMouseEnter: this.handleMouseEnter, + onTouchStart: this.handleTouchStart, + onTouchEnd: this.handleTouchEnd, + onClick: this.handleClick, + disabled: disabled, + ref: function ref(node) { + return _this2.button = node; + }, + style: (0, _simpleAssign2.default)({}, styles.root, style) + }), + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.innerDiv, innerDivStyle)) }, + contentChildren + ) + ), + nestedList + ); + } + }]); + return ListItem; +}(_react.Component); + +ListItem.muiName = 'ListItem'; +ListItem.defaultProps = { + autoGenerateNestedIndicator: true, + containerElement: 'span', + disableKeyboardFocus: false, + disabled: false, + initiallyOpen: false, + insetChildren: false, + nestedItems: [], + nestedLevel: 0, + onKeyboardFocus: function onKeyboardFocus() {}, + onMouseEnter: function onMouseEnter() {}, + onMouseLeave: function onMouseLeave() {}, + onNestedListToggle: function onNestedListToggle() {}, + onTouchEnd: function onTouchEnd() {}, + onTouchStart: function onTouchStart() {}, + open: null, + primaryTogglesNestedList: false, + secondaryTextLines: 1 +}; +ListItem.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ListItem.propTypes = { + /** + * If true, generate a nested-list-indicator icon when nested list + * items are detected. Note that an indicator will not be created + * if a `rightIcon` or `rightIconButton` has been provided to + * the element. + */ + autoGenerateNestedIndicator: _propTypes2.default.bool, + /** + * Children passed into the `ListItem`. + */ + children: _propTypes2.default.node, + /** + * The element to use as the container for the ListItem. Either a string to + * use a DOM element or a ReactElement. This is useful for wrapping the + * ListItem in a custom Link component. If a ReactElement is given, ensure + * that it passes all of its given props through to the underlying DOM + * element and renders its children prop for proper integration. + */ + containerElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]), + /** + * If true, the element will not be able to be focused by the keyboard. + */ + disableKeyboardFocus: _propTypes2.default.bool, + /** + * If true, the element will not be clickable + * and will not display hover effects. + * This is automatically disabled if either `leftCheckbox` + * or `rightToggle` is set. + */ + disabled: _propTypes2.default.bool, + /** + * Override the hover background color. + */ + hoverColor: _propTypes2.default.string, + /** + * If true, the nested `ListItem`s are initially displayed. + */ + initiallyOpen: _propTypes2.default.bool, + /** + * Override the inline-styles of the inner div element. + */ + innerDivStyle: _propTypes2.default.object, + /** + * If true, the children will be indented by 72px. + * This is useful if there is no left avatar or left icon. + */ + insetChildren: _propTypes2.default.bool, + /** + * Use to control if the list item should render as keyboard focused. If + * undefined (default), this will be automatically managed. If provided, + * it will change the components style. Note that this will not change the + * actual focus - and should only be used when you want to simulate + * keyboard focus (eg. in a rich text input autocomplete). + */ + isKeyboardFocused: _propTypes2.default.bool, + /** + * This is the `Avatar` element to be displayed on the left side. + */ + leftAvatar: _propTypes2.default.element, + /** + * This is the `Checkbox` element to be displayed on the left side. + */ + leftCheckbox: _propTypes2.default.element, + /** + * This is the `SvgIcon` or `FontIcon` to be displayed on the left side. + */ + leftIcon: _propTypes2.default.element, + /** + * An array of `ListItem`s to nest underneath the current `ListItem`. + */ + nestedItems: _propTypes2.default.arrayOf(_propTypes2.default.element), + /** + * Controls how deep a `ListItem` appears. + * This property is automatically managed, so modify at your own risk. + */ + nestedLevel: _propTypes2.default.number, + /** + * Override the inline-styles of the nested items' `NestedList`. + */ + nestedListStyle: _propTypes2.default.object, + /** + * Callback function fired when the list item is clicked. + * + * @param {object} event Click event targeting the list item. + */ + onClick: _propTypes2.default.func, + /** + * Callback function fired when the `ListItem` is focused or blurred by the keyboard. + * + * @param {object} event `focus` or `blur` event targeting the `ListItem`. + * @param {boolean} isKeyboardFocused If true, the `ListItem` is focused. + */ + onKeyboardFocus: _propTypes2.default.func, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** + * Callback function fired when the `ListItem` toggles its nested list. + * + * @param {object} listItem The `ListItem`. + */ + onNestedListToggle: _propTypes2.default.func, + /** @ignore */ + onTouchEnd: _propTypes2.default.func, + /** @ignore */ + onTouchStart: _propTypes2.default.func, + /** + * Control toggle state of nested list. + */ + open: _propTypes2.default.bool, + /** + * This is the block element that contains the primary text. + * If a string is passed in, a div tag will be rendered. + */ + primaryText: _propTypes2.default.node, + /** + * If true, clicking or tapping the primary text of the `ListItem` + * toggles the nested list. + */ + primaryTogglesNestedList: _propTypes2.default.bool, + /** + * This is the `Avatar` element to be displayed on the right side. + */ + rightAvatar: _propTypes2.default.element, + /** + * This is the `SvgIcon` or `FontIcon` to be displayed on the right side. + */ + rightIcon: _propTypes2.default.element, + /** + * This is the `IconButton` to be displayed on the right side. + * Hovering over this button will remove the `ListItem` hover. + * Also, clicking on this button will not trigger a + * ripple on the `ListItem`; the event will be stopped and prevented + * from bubbling up to cause a `ListItem` click. + */ + rightIconButton: _propTypes2.default.element, + /** + * This is the `Toggle` element to display on the right side. + */ + rightToggle: _propTypes2.default.element, + /** + * This is the block element that contains the secondary text. + * If a string is passed in, a div tag will be rendered. + */ + secondaryText: _propTypes2.default.node, + /** + * Can be 1 or 2. This is the number of secondary + * text lines before ellipsis will show. + */ + secondaryTextLines: _propTypes2.default.oneOf([1, 2]), + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = ListItem; \ No newline at end of file diff --git a/List/NestedList.js b/List/NestedList.js new file mode 100644 index 00000000000000..122bf1cc3b083f --- /dev/null +++ b/List/NestedList.js @@ -0,0 +1,53 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _List = require('./List'); + +var _List2 = _interopRequireDefault(_List); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var NestedList = function NestedList(props) { + var children = props.children, + open = props.open, + nestedLevel = props.nestedLevel, + style = props.style; + + + if (!open) { + return null; + } + + return _react2.default.createElement( + _List2.default, + { style: style }, + _react.Children.map(children, function (child) { + return (0, _react.isValidElement)(child) ? (0, _react.cloneElement)(child, { + nestedLevel: nestedLevel + 1 + }) : child; + }) + ); +}; + +process.env.NODE_ENV !== "production" ? NestedList.propTypes = { + children: _propTypes2.default.node, + nestedLevel: _propTypes2.default.number.isRequired, + open: _propTypes2.default.bool.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; + +exports.default = NestedList; \ No newline at end of file diff --git a/List/index.js b/List/index.js new file mode 100644 index 00000000000000..d3501e61eeeae5 --- /dev/null +++ b/List/index.js @@ -0,0 +1,25 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.makeSelectable = exports.ListItem = exports.List = undefined; + +var _List2 = require('./List'); + +var _List3 = _interopRequireDefault(_List2); + +var _ListItem2 = require('./ListItem'); + +var _ListItem3 = _interopRequireDefault(_ListItem2); + +var _makeSelectable2 = require('./makeSelectable'); + +var _makeSelectable3 = _interopRequireDefault(_makeSelectable2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.List = _List3.default; +exports.ListItem = _ListItem3.default; +exports.makeSelectable = _makeSelectable3.default; +exports.default = _List3.default; \ No newline at end of file diff --git a/List/makeSelectable.js b/List/makeSelectable.js new file mode 100644 index 00000000000000..4ce4c8e9422bf4 --- /dev/null +++ b/List/makeSelectable.js @@ -0,0 +1,172 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.makeSelectable = undefined; + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _colorManipulator = require('../utils/colorManipulator'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var makeSelectable = function makeSelectable(MyComponent) { + var _class, _temp2; + + return _temp2 = _class = function (_Component) { + (0, _inherits3.default)(_class, _Component); + + function _class() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, _class); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = _class.__proto__ || (0, _getPrototypeOf2.default)(_class)).call.apply(_ref, [this].concat(args))), _this), _this.hasSelectedDescendant = function (previousValue, child) { + if (_react2.default.isValidElement(child) && child.props.nestedItems && child.props.nestedItems.length > 0) { + return child.props.nestedItems.reduce(_this.hasSelectedDescendant, previousValue); + } + return previousValue || _this.isChildSelected(child, _this.props); + }, _this.handleItemClick = function (event, item) { + var itemValue = item.props.value; + + if (itemValue !== _this.props.value) { + if (_this.props.onChange) { + _this.props.onChange(event, itemValue); + } + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(_class, [{ + key: 'extendChild', + value: function extendChild(child, styles, selectedItemStyle) { + var _this2 = this; + + if (child && child.type && child.type.muiName === 'ListItem') { + var selected = this.isChildSelected(child, this.props); + var selectedChildrenStyles = void 0; + if (selected) { + selectedChildrenStyles = (0, _simpleAssign2.default)({}, styles, selectedItemStyle); + } + + var mergedChildrenStyles = (0, _simpleAssign2.default)({}, child.props.style, selectedChildrenStyles); + + this.keyIndex += 1; + + return _react2.default.cloneElement(child, { + onClick: function onClick(event) { + _this2.handleItemClick(event, child); + if (child.props.onClick) { + child.props.onClick(event); + } + }, + key: this.keyIndex, + style: mergedChildrenStyles, + nestedItems: child.props.nestedItems.map(function (child) { + return _this2.extendChild(child, styles, selectedItemStyle); + }), + initiallyOpen: this.isInitiallyOpen(child) + }); + } else { + return child; + } + } + }, { + key: 'isInitiallyOpen', + value: function isInitiallyOpen(child) { + if (child.props.initiallyOpen) { + return child.props.initiallyOpen; + } + return this.hasSelectedDescendant(false, child); + } + }, { + key: 'isChildSelected', + value: function isChildSelected(child, props) { + return props.value === child.props.value; + } + }, { + key: 'render', + value: function render() { + var _this3 = this; + + var _props = this.props, + children = _props.children, + selectedItemStyle = _props.selectedItemStyle, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'selectedItemStyle']); + + + this.keyIndex = 0; + var styles = {}; + + if (!selectedItemStyle) { + var textColor = this.context.muiTheme.baseTheme.palette.textColor; + styles.backgroundColor = (0, _colorManipulator.fade)(textColor, 0.2); + } + + return _react2.default.createElement( + MyComponent, + (0, _extends3.default)({}, other, this.state), + _react.Children.map(children, function (child) { + return _this3.extendChild(child, styles, selectedItemStyle); + }) + ); + } + }]); + return _class; + }(_react.Component), _class.propTypes = { + children: _propTypes2.default.node, + onChange: _propTypes2.default.func, + selectedItemStyle: _propTypes2.default.object, + value: _propTypes2.default.any + }, _class.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired + }, _temp2; +}; + +exports.makeSelectable = makeSelectable; +exports.default = makeSelectable; \ No newline at end of file diff --git a/Menu/Menu.js b/Menu/Menu.js new file mode 100644 index 00000000000000..cee4ce7d485b09 --- /dev/null +++ b/Menu/Menu.js @@ -0,0 +1,709 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _toArray2 = require('babel-runtime/helpers/toArray'); + +var _toArray3 = _interopRequireDefault(_toArray2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _shallowEqual = require('recompose/shallowEqual'); + +var _shallowEqual2 = _interopRequireDefault(_shallowEqual); + +var _ClickAwayListener = require('../internal/ClickAwayListener'); + +var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +var _List = require('../List/List'); + +var _List2 = _interopRequireDefault(_List); + +var _menuUtils = require('./menuUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var desktop = props.desktop, + maxHeight = props.maxHeight, + width = props.width; + var muiTheme = context.muiTheme; + + + var styles = { + root: { + // Nested div because the List scales x faster than it scales y + zIndex: muiTheme.zIndex.menu, + maxHeight: maxHeight, + overflowY: maxHeight ? 'auto' : null + }, + divider: { + marginTop: 7, + marginBottom: 8 + }, + list: { + display: 'table-cell', + paddingBottom: desktop ? 16 : 8, + paddingTop: desktop ? 16 : 8, + userSelect: 'none', + width: width + }, + selectedMenuItem: { + color: muiTheme.menuItem.selectedTextColor + } + }; + + return styles; +} + +var Menu = function (_Component) { + (0, _inherits3.default)(Menu, _Component); + + function Menu(props, context) { + (0, _classCallCheck3.default)(this, Menu); + + var _this = (0, _possibleConstructorReturn3.default)(this, (Menu.__proto__ || (0, _getPrototypeOf2.default)(Menu)).call(this, props, context)); + + _initialiseProps.call(_this); + + var filteredChildren = _this.getFilteredChildren(props.children); + var selectedIndex = _this.getLastSelectedIndex(props, filteredChildren); + + var newFocusIndex = props.disableAutoFocus ? -1 : selectedIndex >= 0 ? selectedIndex : 0; + if (newFocusIndex !== -1 && props.onMenuItemFocusChange) { + props.onMenuItemFocusChange(null, newFocusIndex); + } + _this.state = { + focusIndex: newFocusIndex, + isKeyboardFocused: props.initiallyKeyboardFocused, + keyWidth: props.desktop ? 64 : 56 + }; + + _this.hotKeyHolder = new _menuUtils.HotKeyHolder(); + return _this; + } + + (0, _createClass3.default)(Menu, [{ + key: 'componentDidMount', + value: function componentDidMount() { + if (this.props.autoWidth) { + this.setWidth(); + } + this.setScollPosition(); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var selectedIndex = void 0; + var filteredChildren = this.getFilteredChildren(nextProps.children); + + if (this.props.multiple !== true) { + selectedIndex = this.getLastSelectedIndex(nextProps, filteredChildren); + } else { + selectedIndex = this.state.focusIndex; + } + + var newFocusIndex = nextProps.disableAutoFocus ? -1 : selectedIndex >= 0 ? selectedIndex : 0; + if (newFocusIndex !== this.state.focusIndex && this.props.onMenuItemFocusChange) { + this.props.onMenuItemFocusChange(null, newFocusIndex); + } + this.setState({ + focusIndex: newFocusIndex, + keyWidth: nextProps.desktop ? 64 : 56 + }); + } + }, { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps, nextState, nextContext) { + return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState) || !(0, _shallowEqual2.default)(this.context, nextContext); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + if (this.props.autoWidth) this.setWidth(); + } + }, { + key: 'getValueLink', + + + // Do not use outside of this component, it will be removed once valueLink is deprecated + value: function getValueLink(props) { + return props.valueLink || { + value: props.value, + requestChange: props.onChange + }; + } + }, { + key: 'setKeyboardFocused', + value: function setKeyboardFocused(keyboardFocused) { + this.setState({ + isKeyboardFocused: keyboardFocused + }); + } + }, { + key: 'getFilteredChildren', + value: function getFilteredChildren(children) { + var filteredChildren = []; + _react2.default.Children.forEach(children, function (child) { + if (child) { + filteredChildren.push(child); + } + }); + return filteredChildren; + } + }, { + key: 'cloneMenuItem', + value: function cloneMenuItem(child, childIndex, styles, index) { + var _this2 = this; + + var childIsDisabled = child.props.disabled; + + var selectedChildStyles = {}; + if (!childIsDisabled) { + var selected = this.isChildSelected(child, this.props); + + if (selected) { + (0, _simpleAssign2.default)(selectedChildStyles, styles.selectedMenuItem, this.props.selectedMenuItemStyle); + } + } + var mergedChildStyles = (0, _simpleAssign2.default)({}, child.props.style, this.props.menuItemStyle, selectedChildStyles); + + var extraProps = { + desktop: this.props.desktop, + style: mergedChildStyles + }; + if (!childIsDisabled) { + var isFocused = childIndex === this.state.focusIndex; + var focusState = 'none'; + if (isFocused) { + focusState = this.state.isKeyboardFocused ? 'keyboard-focused' : 'focused'; + } + + (0, _simpleAssign2.default)(extraProps, { + focusState: focusState, + onClick: function onClick(event) { + _this2.handleMenuItemClick(event, child, index); + if (child.props.onClick) child.props.onClick(event); + }, + ref: isFocused ? 'focusedMenuItem' : null + }); + } + return _react2.default.cloneElement(child, extraProps); + } + }, { + key: 'decrementKeyboardFocusIndex', + value: function decrementKeyboardFocusIndex(event) { + var index = this.state.focusIndex; + + index--; + if (index < 0) index = 0; + + this.setFocusIndex(event, index, true); + } + }, { + key: 'getMenuItemCount', + value: function getMenuItemCount(filteredChildren) { + var menuItemCount = 0; + filteredChildren.forEach(function (child) { + var childIsADivider = child.type && child.type.muiName === 'Divider'; + var childIsDisabled = child.props.disabled; + if (!childIsADivider && !childIsDisabled) menuItemCount++; + }); + return menuItemCount; + } + }, { + key: 'getLastSelectedIndex', + value: function getLastSelectedIndex(props, filteredChildren) { + var _this3 = this; + + var selectedIndex = -1; + var menuItemIndex = 0; + + filteredChildren.forEach(function (child) { + var childIsADivider = child.type && child.type.muiName === 'Divider'; + + if (_this3.isChildSelected(child, props)) selectedIndex = menuItemIndex; + if (!childIsADivider) menuItemIndex++; + }); + + return selectedIndex; + } + }, { + key: 'setFocusIndexStartsWith', + value: function setFocusIndexStartsWith(event, keys, filteredChildren) { + var foundIndex = -1; + _react2.default.Children.forEach(filteredChildren, function (child, index) { + if (foundIndex >= 0) { + return; + } + var primaryText = child.props.primaryText; + + if (typeof primaryText === 'string' && primaryText.substr(0, keys.length).toLowerCase() === keys.toLowerCase()) { + foundIndex = index; + } + }); + if (foundIndex >= 0) { + this.setFocusIndex(event, foundIndex, true); + return true; + } + return false; + } + }, { + key: 'handleMenuItemClick', + value: function handleMenuItemClick(event, item, index) { + var children = this.props.children; + var multiple = this.props.multiple; + var valueLink = this.getValueLink(this.props); + var menuValue = valueLink.value; + var itemValue = item.props.value; + var focusIndex = _react2.default.isValidElement(children) ? 0 : children.indexOf(item); + + this.setFocusIndex(event, focusIndex, false); + + if (multiple) { + menuValue = menuValue || []; + + var itemIndex = menuValue.indexOf(itemValue); + + var _menuValue = menuValue, + _menuValue2 = (0, _toArray3.default)(_menuValue), + newMenuValue = _menuValue2.slice(0); + + if (itemIndex === -1) { + newMenuValue.push(itemValue); + } else { + newMenuValue.splice(itemIndex, 1); + } + + valueLink.requestChange(event, newMenuValue); + } else if (!multiple && itemValue !== menuValue) { + valueLink.requestChange(event, itemValue); + } + + this.props.onItemClick(event, item, index); + } + }, { + key: 'incrementKeyboardFocusIndex', + value: function incrementKeyboardFocusIndex(event, filteredChildren) { + var index = this.state.focusIndex; + var maxIndex = this.getMenuItemCount(filteredChildren) - 1; + + index++; + if (index > maxIndex) index = maxIndex; + + this.setFocusIndex(event, index, true); + } + }, { + key: 'isChildSelected', + value: function isChildSelected(child, props) { + var menuValue = this.getValueLink(props).value; + var childValue = child.props.value; + + if (props.multiple) { + return menuValue && menuValue.length && menuValue.indexOf(childValue) !== -1; + } else { + return child.props.hasOwnProperty('value') && menuValue === childValue; + } + } + }, { + key: 'setFocusIndex', + value: function setFocusIndex(event, newIndex, isKeyboardFocused) { + if (this.props.onMenuItemFocusChange) { + // Do this even if `newIndex === this.state.focusIndex` to allow users + // to detect up-arrow on the first MenuItem or down-arrow on the last. + this.props.onMenuItemFocusChange(event, newIndex); + } + this.setState({ + focusIndex: newIndex, + isKeyboardFocused: isKeyboardFocused + }); + } + }, { + key: 'setScollPosition', + value: function setScollPosition() { + var desktop = this.props.desktop; + var focusedMenuItem = this.refs.focusedMenuItem; + var menuItemHeight = desktop ? 32 : 48; + + if (focusedMenuItem) { + var selectedOffSet = _reactDom2.default.findDOMNode(focusedMenuItem).offsetTop; + + // Make the focused item be the 2nd item in the list the user sees + var scrollTop = selectedOffSet - menuItemHeight; + if (scrollTop < menuItemHeight) scrollTop = 0; + + _reactDom2.default.findDOMNode(this.refs.scrollContainer).scrollTop = scrollTop; + } + } + }, { + key: 'cancelScrollEvent', + value: function cancelScrollEvent(event) { + event.stopPropagation(); + event.preventDefault(); + return false; + } + }, { + key: 'setWidth', + value: function setWidth() { + var el = _reactDom2.default.findDOMNode(this); + var listEl = _reactDom2.default.findDOMNode(this.refs.list); + var elWidth = el.offsetWidth; + var keyWidth = this.state.keyWidth; + var minWidth = keyWidth * 1.5; + var keyIncrements = elWidth / keyWidth; + var newWidth = void 0; + + keyIncrements = keyIncrements <= 1.5 ? 1.5 : Math.ceil(keyIncrements); + newWidth = keyIncrements * keyWidth; + + if (newWidth < minWidth) newWidth = minWidth; + + el.style.width = newWidth + 'px'; + listEl.style.width = newWidth + 'px'; + } + }, { + key: 'render', + value: function render() { + var _this4 = this; + + var _props = this.props, + autoWidth = _props.autoWidth, + children = _props.children, + desktop = _props.desktop, + disableAutoFocus = _props.disableAutoFocus, + initiallyKeyboardFocused = _props.initiallyKeyboardFocused, + listStyle = _props.listStyle, + maxHeight = _props.maxHeight, + multiple = _props.multiple, + onItemClick = _props.onItemClick, + onEscKeyDown = _props.onEscKeyDown, + onMenuItemFocusChange = _props.onMenuItemFocusChange, + selectedMenuItemStyle = _props.selectedMenuItemStyle, + menuItemStyle = _props.menuItemStyle, + style = _props.style, + value = _props.value, + valueLink = _props.valueLink, + width = _props.width, + other = (0, _objectWithoutProperties3.default)(_props, ['autoWidth', 'children', 'desktop', 'disableAutoFocus', 'initiallyKeyboardFocused', 'listStyle', 'maxHeight', 'multiple', 'onItemClick', 'onEscKeyDown', 'onMenuItemFocusChange', 'selectedMenuItemStyle', 'menuItemStyle', 'style', 'value', 'valueLink', 'width']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); + var mergedListStyles = (0, _simpleAssign2.default)(styles.list, listStyle); + + var filteredChildren = this.getFilteredChildren(children); + + var menuItemIndex = 0; + var newChildren = _react2.default.Children.map(filteredChildren, function (child, index) { + var childIsDisabled = child.props.disabled; + var childName = child.type ? child.type.muiName : ''; + var newChild = child; + + switch (childName) { + case 'MenuItem': + newChild = _this4.cloneMenuItem(child, menuItemIndex, styles, index); + break; + + case 'Divider': + newChild = _react2.default.cloneElement(child, { + style: (0, _simpleAssign2.default)({}, styles.divider, child.props.style) + }); + break; + } + + if (childName === 'MenuItem' && !childIsDisabled) { + menuItemIndex++; + } + + return newChild; + }); + + return _react2.default.createElement( + _ClickAwayListener2.default, + { onClickAway: this.handleClickAway }, + _react2.default.createElement( + 'div', + { + onKeyDown: this.handleKeyDown, + onWheel: this.handleOnWheel, + style: prepareStyles(mergedRootStyles), + ref: 'scrollContainer', + role: 'presentation' + }, + _react2.default.createElement( + _List2.default, + (0, _extends3.default)({}, other, { + ref: 'list', + style: mergedListStyles, + role: 'menu' + }), + newChildren + ) + ) + ); + } + }]); + return Menu; +}(_react.Component); + +Menu.defaultProps = { + autoWidth: true, + desktop: false, + disableAutoFocus: false, + initiallyKeyboardFocused: false, + maxHeight: null, + multiple: false, + onChange: function onChange() {}, + onEscKeyDown: function onEscKeyDown() {}, + onItemClick: function onItemClick() {}, + onKeyDown: function onKeyDown() {} +}; +Menu.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; + +var _initialiseProps = function _initialiseProps() { + var _this5 = this; + + this.handleClickAway = function (event) { + if (event.defaultPrevented) { + return; + } + + var focusIndex = _this5.state.focusIndex; + + if (focusIndex < 0) { + return; + } + + var filteredChildren = _this5.getFilteredChildren(_this5.props.children); + var focusedItem = filteredChildren[focusIndex]; + if (!!focusedItem && focusedItem.props.menuItems && focusedItem.props.menuItems.length > 0) { + return; + } + + _this5.setFocusIndex(event, -1, false); + }; + + this.handleKeyDown = function (event) { + var filteredChildren = _this5.getFilteredChildren(_this5.props.children); + var key = (0, _keycode2.default)(event); + switch (key) { + case 'down': + event.preventDefault(); + _this5.incrementKeyboardFocusIndex(event, filteredChildren); + break; + case 'esc': + _this5.props.onEscKeyDown(event); + break; + case 'tab': + event.preventDefault(); + if (event.shiftKey) { + _this5.decrementKeyboardFocusIndex(event); + } else { + _this5.incrementKeyboardFocusIndex(event, filteredChildren); + } + break; + case 'up': + event.preventDefault(); + _this5.decrementKeyboardFocusIndex(event); + break; + default: + if (key && key.length === 1) { + var hotKeys = _this5.hotKeyHolder.append(key); + if (_this5.setFocusIndexStartsWith(event, hotKeys, filteredChildren)) { + event.preventDefault(); + } + } + } + _this5.props.onKeyDown(event); + }; + + this.handleOnWheel = function (event) { + var scrollContainer = _this5.refs.scrollContainer; + // Only scroll lock if the the Menu is scrollable. + if (scrollContainer.scrollHeight <= scrollContainer.clientHeight) return; + + var scrollTop = scrollContainer.scrollTop, + scrollHeight = scrollContainer.scrollHeight, + clientHeight = scrollContainer.clientHeight; + + var wheelDelta = event.deltaY; + var isDeltaPositive = wheelDelta > 0; + + if (isDeltaPositive && wheelDelta > scrollHeight - clientHeight - scrollTop) { + scrollContainer.scrollTop = scrollHeight; + return _this5.cancelScrollEvent(event); + } else if (!isDeltaPositive && -wheelDelta > scrollTop) { + scrollContainer.scrollTop = 0; + return _this5.cancelScrollEvent(event); + } + }; +}; + +process.env.NODE_ENV !== "production" ? Menu.propTypes = { + /** + * If true, the width of the menu will be set automatically + * according to the widths of its children, + * using proper keyline increments (64px for desktop, + * 56px otherwise). + */ + autoWidth: _propTypes2.default.bool, + /** + * The content of the menu. This is usually used to pass `MenuItem` + * elements. + */ + children: _propTypes2.default.node, + /** + * If true, the menu item will render with compact desktop styles. + */ + desktop: _propTypes2.default.bool, + /** + * If true, the menu will not be auto-focused. + */ + disableAutoFocus: _propTypes2.default.bool, + /** + * If true, the menu will be keyboard-focused initially. + */ + initiallyKeyboardFocused: _propTypes2.default.bool, + /** + * Override the inline-styles of the underlying `List` element. + */ + listStyle: _propTypes2.default.object, + /** + * The maximum height of the menu in pixels. If specified, + * the menu will be scrollable if it is taller than the provided + * height. + */ + maxHeight: _propTypes2.default.number, + /** + * Override the inline-styles of menu items. + */ + menuItemStyle: _propTypes2.default.object, + /** + * If true, `value` must be an array and the menu will support + * multiple selections. + */ + multiple: _propTypes2.default.bool, + /** + * Callback function fired when a menu item with `value` not + * equal to the current `value` of the menu is clicked. + * + * @param {object} event Click event targeting the menu item. + * @param {any} value If `multiple` is true, the menu's `value` + * array with either the menu item's `value` added (if + * it wasn't already selected) or omitted (if it was already selected). + * Otherwise, the `value` of the menu item. + */ + onChange: _propTypes2.default.func, + /** + * Callback function fired when the menu is focused and the *Esc* key + * is pressed. + * + * @param {object} event `keydown` event targeting the menu. + */ + onEscKeyDown: _propTypes2.default.func, + /** + * Callback function fired when a menu item is clicked. + * + * @param {object} event Click event targeting the menu item. + * @param {object} menuItem The menu item. + * @param {number} index The index of the menu item. + */ + onItemClick: _propTypes2.default.func, + /** @ignore */ + onKeyDown: _propTypes2.default.func, + /** + * Callback function fired when the focus on a `MenuItem` is changed. + * There will be some "duplicate" changes reported if two different + * focusing event happen, for example if a `MenuItem` is focused via + * the keyboard and then it is clicked on. + * + * @param {object} event The event that triggered the focus change. + * The event can be null since the focus can be changed for non-event + * reasons such as prop changes. + * @param {number} newFocusIndex The index of the newly focused + * `MenuItem` or `-1` if focus was lost. + */ + onMenuItemFocusChange: _propTypes2.default.func, + /** + * Override the inline-styles of selected menu items. + */ + selectedMenuItemStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * If `multiple` is true, an array of the `value`s of the selected + * menu items. Otherwise, the `value` of the selected menu item. + * If provided, the menu will be a controlled component. + * This component also supports valueLink. + */ + value: _propTypes2.default.any, + /** + * ValueLink for the menu's `value`. + */ + valueLink: _propTypes2.default.object, + /** + * The width of the menu. If not specified, the menu's width + * will be set according to the widths of its children, using + * proper keyline increments (64px for desktop, 56px otherwise). + */ + width: _propTypes4.default.stringOrNumber +} : void 0; +exports.default = Menu; \ No newline at end of file diff --git a/Menu/index.js b/Menu/index.js new file mode 100644 index 00000000000000..889f98b7b7d08b --- /dev/null +++ b/Menu/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.MenuItem = exports.Menu = undefined; + +var _Menu2 = require('./Menu'); + +var _Menu3 = _interopRequireDefault(_Menu2); + +var _MenuItem2 = require('../MenuItem'); + +var _MenuItem3 = _interopRequireDefault(_MenuItem2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Menu = _Menu3.default; +exports.MenuItem = _MenuItem3.default; +exports.default = _Menu3.default; \ No newline at end of file diff --git a/Menu/menuUtils.js b/Menu/menuUtils.js new file mode 100644 index 00000000000000..015479491d1992 --- /dev/null +++ b/Menu/menuUtils.js @@ -0,0 +1,39 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.HotKeyHolder = undefined; + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var HotKeyHolder = exports.HotKeyHolder = function () { + function HotKeyHolder() { + var _this = this; + + (0, _classCallCheck3.default)(this, HotKeyHolder); + + this.clear = function () { + _this.timerId = null; + _this.lastKeys = null; + }; + } + + (0, _createClass3.default)(HotKeyHolder, [{ + key: 'append', + value: function append(key) { + clearTimeout(this.timerId); + this.timerId = setTimeout(this.clear, 500); + return this.lastKeys = (this.lastKeys || '') + key; + } + }]); + return HotKeyHolder; +}(); \ No newline at end of file diff --git a/MenuItem/MenuItem.js b/MenuItem/MenuItem.js new file mode 100644 index 00000000000000..f291fc41dce1ef --- /dev/null +++ b/MenuItem/MenuItem.js @@ -0,0 +1,406 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _shallowEqual = require('recompose/shallowEqual'); + +var _shallowEqual2 = _interopRequireDefault(_shallowEqual); + +var _Popover = require('../Popover/Popover'); + +var _Popover2 = _interopRequireDefault(_Popover); + +var _check = require('../svg-icons/navigation/check'); + +var _check2 = _interopRequireDefault(_check); + +var _ListItem = require('../List/ListItem'); + +var _ListItem2 = _interopRequireDefault(_ListItem); + +var _Menu = require('../Menu/Menu'); + +var _Menu2 = _interopRequireDefault(_Menu); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var nestedMenuStyle = { + position: 'relative' +}; + +function getStyles(props, context) { + var disabledColor = context.muiTheme.baseTheme.palette.disabledColor; + var textColor = context.muiTheme.baseTheme.palette.textColor; + var indent = props.desktop ? 64 : 72; + var sidePadding = props.desktop ? 24 : 16; + + var styles = { + root: { + color: props.disabled ? disabledColor : textColor, + cursor: props.disabled ? 'default' : 'pointer', + minHeight: props.desktop ? '32px' : '48px', + lineHeight: props.desktop ? '32px' : '48px', + fontSize: props.desktop ? 15 : 16, + whiteSpace: 'nowrap' + }, + + innerDivStyle: { + paddingLeft: props.leftIcon || props.insetChildren || props.checked ? indent : sidePadding, + paddingRight: props.rightIcon ? indent : sidePadding, + paddingBottom: 0, + paddingTop: 0 + }, + + secondaryText: { + float: 'right' + }, + + leftIconDesktop: { + margin: 0, + left: 24, + top: 4 + }, + + rightIconDesktop: { + margin: 0, + right: 24, + top: 4, + fill: context.muiTheme.menuItem.rightIconDesktopFill + } + }; + + return styles; +} + +var MenuItem = function (_Component) { + (0, _inherits3.default)(MenuItem, _Component); + + function MenuItem() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, MenuItem); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = MenuItem.__proto__ || (0, _getPrototypeOf2.default)(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + open: false + }, _this.cloneMenuItem = function (item) { + return _react2.default.cloneElement(item, { + onClick: function onClick(event) { + if (!item.props.menuItems) { + _this.handleRequestClose(); + } + + if (item.props.onClick) { + item.props.onClick(event); + } + } + }); + }, _this.handleClick = function (event) { + event.preventDefault(); + + _this.setState({ + open: true, + anchorEl: _reactDom2.default.findDOMNode(_this) + }); + + if (_this.props.onClick) { + _this.props.onClick(event); + } + }, _this.handleRequestClose = function () { + _this.setState({ + open: false, + anchorEl: null + }); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(MenuItem, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.applyFocusState(); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.state.open && nextProps.focusState === 'none') { + this.handleRequestClose(); + } + } + }, { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps, nextState, nextContext) { + return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState) || !(0, _shallowEqual2.default)(this.context, nextContext); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + this.applyFocusState(); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + if (this.state.open) { + this.setState({ + open: false + }); + } + } + }, { + key: 'applyFocusState', + value: function applyFocusState() { + this.refs.listItem.applyFocusState(this.props.focusState); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + checked = _props.checked, + children = _props.children, + desktop = _props.desktop, + disabled = _props.disabled, + focusState = _props.focusState, + innerDivStyle = _props.innerDivStyle, + insetChildren = _props.insetChildren, + leftIcon = _props.leftIcon, + menuItems = _props.menuItems, + rightIcon = _props.rightIcon, + secondaryText = _props.secondaryText, + style = _props.style, + animation = _props.animation, + anchorOrigin = _props.anchorOrigin, + targetOrigin = _props.targetOrigin, + value = _props.value, + other = (0, _objectWithoutProperties3.default)(_props, ['checked', 'children', 'desktop', 'disabled', 'focusState', 'innerDivStyle', 'insetChildren', 'leftIcon', 'menuItems', 'rightIcon', 'secondaryText', 'style', 'animation', 'anchorOrigin', 'targetOrigin', 'value']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var mergedRootStyles = (0, _simpleAssign2.default)(styles.root, style); + var mergedInnerDivStyles = (0, _simpleAssign2.default)(styles.innerDivStyle, innerDivStyle); + + // Left Icon + var leftIconElement = leftIcon ? leftIcon : checked ? _react2.default.createElement(_check2.default, null) : null; + if (leftIconElement) { + var mergedLeftIconStyles = desktop ? (0, _simpleAssign2.default)(styles.leftIconDesktop, leftIconElement.props.style) : leftIconElement.props.style; + leftIconElement = _react2.default.cloneElement(leftIconElement, { style: mergedLeftIconStyles }); + } + + // Right Icon + var rightIconElement = void 0; + if (rightIcon) { + var mergedRightIconStyles = desktop ? (0, _simpleAssign2.default)(styles.rightIconDesktop, rightIcon.props.style) : rightIcon.props.style; + rightIconElement = _react2.default.cloneElement(rightIcon, { style: mergedRightIconStyles }); + } + + // Secondary Text + var secondaryTextElement = void 0; + if (secondaryText) { + var secondaryTextIsAnElement = _react2.default.isValidElement(secondaryText); + var mergedSecondaryTextStyles = secondaryTextIsAnElement ? (0, _simpleAssign2.default)(styles.secondaryText, secondaryText.props.style) : null; + + secondaryTextElement = secondaryTextIsAnElement ? _react2.default.cloneElement(secondaryText, { style: mergedSecondaryTextStyles }) : _react2.default.createElement( + 'div', + { style: prepareStyles(styles.secondaryText) }, + secondaryText + ); + } + var childMenuPopover = void 0; + if (menuItems) { + childMenuPopover = _react2.default.createElement( + _Popover2.default, + { + animation: animation, + anchorOrigin: anchorOrigin, + anchorEl: this.state.anchorEl, + open: this.state.open, + targetOrigin: targetOrigin, + useLayerForClickAway: false, + onRequestClose: this.handleRequestClose + }, + _react2.default.createElement( + _Menu2.default, + { desktop: desktop, disabled: disabled, style: nestedMenuStyle }, + _react2.default.Children.map(menuItems, this.cloneMenuItem) + ) + ); + other.onClick = this.handleClick; + } + + return _react2.default.createElement( + _ListItem2.default, + (0, _extends3.default)({}, other, { + disabled: disabled, + hoverColor: this.context.muiTheme.menuItem.hoverColor, + innerDivStyle: mergedInnerDivStyles, + insetChildren: insetChildren, + leftIcon: leftIconElement, + ref: 'listItem', + rightIcon: rightIconElement, + role: 'menuitem', + style: mergedRootStyles + }), + children, + secondaryTextElement, + childMenuPopover + ); + } + }]); + return MenuItem; +}(_react.Component); + +MenuItem.muiName = 'MenuItem'; +MenuItem.defaultProps = { + anchorOrigin: { horizontal: 'right', vertical: 'top' }, + checked: false, + desktop: false, + disabled: false, + focusState: 'none', + insetChildren: false, + targetOrigin: { horizontal: 'left', vertical: 'top' } +}; +MenuItem.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? MenuItem.propTypes = { + /** + * Location of the anchor for the popover of nested `MenuItem` + * elements. + * Options: + * horizontal: [left, middle, right] + * vertical: [top, center, bottom]. + */ + anchorOrigin: _propTypes4.default.origin, + /** + * Override the default animation component used. + */ + animation: _propTypes2.default.func, + /** + * If true, a left check mark will be rendered. + */ + checked: _propTypes2.default.bool, + /** + * Elements passed as children to the underlying `ListItem`. + */ + children: _propTypes2.default.node, + /** + * @ignore + * If true, the menu item will render with compact desktop + * styles. + */ + desktop: _propTypes2.default.bool, + /** + * If true, the menu item will be disabled. + */ + disabled: _propTypes2.default.bool, + /** + * The focus state of the menu item. This prop is used to set the focus + * state of the underlying `ListItem`. + */ + focusState: _propTypes2.default.oneOf(['none', 'focused', 'keyboard-focused']), + /** + * Override the inline-styles of the inner div. + */ + innerDivStyle: _propTypes2.default.object, + /** + * If true, the children will be indented. + * This is only needed when there is no `leftIcon`. + */ + insetChildren: _propTypes2.default.bool, + /** + * The `SvgIcon` or `FontIcon` to be displayed on the left side. + */ + leftIcon: _propTypes2.default.element, + /** + * `MenuItem` elements to nest within the menu item. + */ + menuItems: _propTypes2.default.node, + /** + * Callback function fired when the menu item is clicked. + * + * @param {object} event Click event targeting the menu item. + */ + onClick: _propTypes2.default.func, + /** + * Can be used to render primary text within the menu item. + */ + primaryText: _propTypes2.default.node, + /** + * The `SvgIcon` or `FontIcon` to be displayed on the right side. + */ + rightIcon: _propTypes2.default.element, + /** + * Can be used to render secondary text within the menu item. + */ + secondaryText: _propTypes2.default.node, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Location on the popover of nested `MenuItem` elements that will attach + * to the anchor's origin. + * Options: + * horizontal: [left, middle, right] + * vertical: [top, center, bottom]. + */ + targetOrigin: _propTypes4.default.origin, + /** + * The value of the menu item. + */ + value: _propTypes2.default.any +} : void 0; +exports.default = MenuItem; \ No newline at end of file diff --git a/MenuItem/index.js b/MenuItem/index.js new file mode 100644 index 00000000000000..afd18cb7cd4ed3 --- /dev/null +++ b/MenuItem/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _MenuItem = require('./MenuItem'); + +var _MenuItem2 = _interopRequireDefault(_MenuItem); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _MenuItem2.default; \ No newline at end of file diff --git a/Paper/Paper.js b/Paper/Paper.js new file mode 100644 index 00000000000000..73aba11dc845a1 --- /dev/null +++ b/Paper/Paper.js @@ -0,0 +1,151 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var rounded = props.rounded, + circle = props.circle, + transitionEnabled = props.transitionEnabled, + zDepth = props.zDepth; + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + paper = _context$muiTheme.paper, + borderRadius = _context$muiTheme.borderRadius; + + + return { + root: { + color: paper.color, + backgroundColor: paper.backgroundColor, + transition: transitionEnabled && _transitions2.default.easeOut(), + boxSizing: 'border-box', + fontFamily: baseTheme.fontFamily, + WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) + boxShadow: paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers + borderRadius: circle ? '50%' : rounded ? borderRadius : '0px' + } + }; +} + +var Paper = function (_Component) { + (0, _inherits3.default)(Paper, _Component); + + function Paper() { + (0, _classCallCheck3.default)(this, Paper); + return (0, _possibleConstructorReturn3.default)(this, (Paper.__proto__ || (0, _getPrototypeOf2.default)(Paper)).apply(this, arguments)); + } + + (0, _createClass3.default)(Paper, [{ + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + circle = _props.circle, + rounded = _props.rounded, + style = _props.style, + transitionEnabled = _props.transitionEnabled, + zDepth = _props.zDepth, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'circle', 'rounded', 'style', 'transitionEnabled', 'zDepth']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + children + ); + } + }]); + return Paper; +}(_react.Component); + +Paper.defaultProps = { + circle: false, + rounded: true, + transitionEnabled: true, + zDepth: 1 +}; +Paper.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Paper.propTypes = { + /** + * Children passed into the paper element. + */ + children: _propTypes2.default.node, + /** + * Set to true to generate a circular paper container. + */ + circle: _propTypes2.default.bool, + /** + * By default, the paper container will have a border radius. + * Set this to false to generate a container with sharp corners. + */ + rounded: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Set to false to disable CSS transitions for the paper element. + */ + transitionEnabled: _propTypes2.default.bool, + /** + * This number represents the zDepth of the paper shadow. + */ + zDepth: _propTypes4.default.zDepth +} : void 0; +exports.default = Paper; \ No newline at end of file diff --git a/Paper/index.js b/Paper/index.js new file mode 100644 index 00000000000000..d96aeaa959c0f0 --- /dev/null +++ b/Paper/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Paper = require('./Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Paper2.default; \ No newline at end of file diff --git a/Popover/Popover.js b/Popover/Popover.js new file mode 100644 index 00000000000000..317cc980ec456f --- /dev/null +++ b/Popover/Popover.js @@ -0,0 +1,526 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _reactEventListener = require('react-event-listener'); + +var _reactEventListener2 = _interopRequireDefault(_reactEventListener); + +var _RenderToLayer = require('../internal/RenderToLayer'); + +var _RenderToLayer2 = _interopRequireDefault(_RenderToLayer); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _lodash = require('lodash.throttle'); + +var _lodash2 = _interopRequireDefault(_lodash); + +var _PopoverAnimationDefault = require('./PopoverAnimationDefault'); + +var _PopoverAnimationDefault2 = _interopRequireDefault(_PopoverAnimationDefault); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var styles = { + root: { + display: 'none' + } +}; + +var Popover = function (_Component) { + (0, _inherits3.default)(Popover, _Component); + + function Popover(props, context) { + (0, _classCallCheck3.default)(this, Popover); + + var _this = (0, _possibleConstructorReturn3.default)(this, (Popover.__proto__ || (0, _getPrototypeOf2.default)(Popover)).call(this, props, context)); + + _this.timeout = null; + + _this.renderLayer = function () { + var _this$props = _this.props, + animated = _this$props.animated, + animation = _this$props.animation, + anchorEl = _this$props.anchorEl, + anchorOrigin = _this$props.anchorOrigin, + autoCloseWhenOffScreen = _this$props.autoCloseWhenOffScreen, + canAutoPosition = _this$props.canAutoPosition, + children = _this$props.children, + onRequestClose = _this$props.onRequestClose, + style = _this$props.style, + targetOrigin = _this$props.targetOrigin, + useLayerForClickAway = _this$props.useLayerForClickAway, + scrollableContainer = _this$props.scrollableContainer, + other = (0, _objectWithoutProperties3.default)(_this$props, ['animated', 'animation', 'anchorEl', 'anchorOrigin', 'autoCloseWhenOffScreen', 'canAutoPosition', 'children', 'onRequestClose', 'style', 'targetOrigin', 'useLayerForClickAway', 'scrollableContainer']); + + + var styleRoot = style; + + if (!animated) { + styleRoot = { + position: 'fixed', + zIndex: _this.context.muiTheme.zIndex.popover + }; + + if (!_this.state.open) { + return null; + } + + return _react2.default.createElement( + _Paper2.default, + (0, _extends3.default)({ style: (0, _simpleAssign2.default)(styleRoot, style) }, other), + children + ); + } + + var Animation = animation || _PopoverAnimationDefault2.default; + + return _react2.default.createElement( + Animation, + (0, _extends3.default)({ + targetOrigin: targetOrigin, + style: styleRoot + }, other, { + open: _this.state.open && !_this.state.closing + }), + children + ); + }; + + _this.componentClickAway = function () { + _this.requestClose('clickAway'); + }; + + _this.setPlacement = function (scrolling) { + if (!_this.state.open) { + return; + } + + if (!_this.popoverRefs.layer.getLayer()) { + return; + } + + var targetEl = _this.popoverRefs.layer.getLayer().children[0]; + if (!targetEl) { + return; + } + + var _this$props2 = _this.props, + targetOrigin = _this$props2.targetOrigin, + anchorOrigin = _this$props2.anchorOrigin; + + var anchorEl = _this.props.anchorEl || _this.anchorEl; + + var anchor = _this.getAnchorPosition(anchorEl); + var target = _this.getTargetPosition(targetEl); + + var targetPosition = { + top: anchor[anchorOrigin.vertical] - target[targetOrigin.vertical], + left: anchor[anchorOrigin.horizontal] - target[targetOrigin.horizontal] + }; + + if (scrolling && _this.props.autoCloseWhenOffScreen) { + _this.autoCloseWhenOffScreen(anchor); + } + + if (_this.props.canAutoPosition) { + target = _this.getTargetPosition(targetEl); // update as height may have changed + targetPosition = _this.applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition); + } + + targetEl.style.top = targetPosition.top + 'px'; + targetEl.style.left = targetPosition.left + 'px'; + targetEl.style.maxHeight = window.innerHeight + 'px'; + }; + + _this.handleResize = (0, _lodash2.default)(_this.setPlacement, 100); + _this.handleScroll = (0, _lodash2.default)(_this.setPlacement.bind(_this, true), 50); + + _this.popoverRefs = {}; + + _this.state = { + open: props.open, + closing: false + }; + return _this; + } + + (0, _createClass3.default)(Popover, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.placementTimeout = setTimeout(this.setPlacement); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var _this2 = this; + + if (nextProps.open === this.props.open) { + return; + } + + if (nextProps.open) { + clearTimeout(this.timeout); + this.timeout = null; + this.anchorEl = nextProps.anchorEl || this.props.anchorEl; + this.setState({ + open: true, + closing: false + }); + } else { + if (nextProps.animated) { + if (this.timeout !== null) return; + this.setState({ closing: true }); + this.timeout = setTimeout(function () { + _this2.setState({ + open: false + }, function () { + _this2.timeout = null; + }); + }, 500); + } else { + this.setState({ + open: false + }); + } + } + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + clearTimeout(this.placementTimeout); + this.placementTimeout = setTimeout(this.setPlacement); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.handleResize.cancel(); + this.handleScroll.cancel(); + + if (this.placementTimeout) { + clearTimeout(this.placementTimeout); + this.placementTimeout = null; + } + + if (this.timeout) { + clearTimeout(this.timeout); + this.timeout = null; + } + } + }, { + key: 'requestClose', + value: function requestClose(reason) { + if (this.props.onRequestClose) { + this.props.onRequestClose(reason); + } + } + }, { + key: 'getAnchorPosition', + value: function getAnchorPosition(el) { + if (!el) { + el = _reactDom2.default.findDOMNode(this); + } + + var rect = el.getBoundingClientRect(); + var a = { + top: rect.top, + left: rect.left, + width: el.offsetWidth, + height: el.offsetHeight + }; + + a.right = rect.right || a.left + a.width; + a.bottom = rect.bottom || a.top + a.height; + a.middle = a.left + (a.right - a.left) / 2; + a.center = a.top + (a.bottom - a.top) / 2; + + return a; + } + }, { + key: 'getTargetPosition', + value: function getTargetPosition(targetEl) { + return { + top: 0, + center: targetEl.offsetHeight / 2, + bottom: targetEl.offsetHeight, + left: 0, + middle: targetEl.offsetWidth / 2, + right: targetEl.offsetWidth + }; + } + }, { + key: 'autoCloseWhenOffScreen', + value: function autoCloseWhenOffScreen(anchorPosition) { + if (anchorPosition.top < 0 || anchorPosition.top > window.innerHeight || anchorPosition.left < 0 || anchorPosition.left > window.innerWidth) { + this.requestClose('offScreen'); + } + } + }, { + key: 'getOverlapMode', + value: function getOverlapMode(anchor, target, median) { + if ([anchor, target].indexOf(median) >= 0) return 'auto'; + if (anchor === target) return 'inclusive'; + return 'exclusive'; + } + }, { + key: 'getPositions', + value: function getPositions(anchor, target) { + var a = (0, _extends3.default)({}, anchor); + var t = (0, _extends3.default)({}, target); + + var positions = { + x: ['left', 'right'].filter(function (p) { + return p !== t.horizontal; + }), + y: ['top', 'bottom'].filter(function (p) { + return p !== t.vertical; + }) + }; + + var overlap = { + x: this.getOverlapMode(a.horizontal, t.horizontal, 'middle'), + y: this.getOverlapMode(a.vertical, t.vertical, 'center') + }; + + positions.x.splice(overlap.x === 'auto' ? 0 : 1, 0, 'middle'); + positions.y.splice(overlap.y === 'auto' ? 0 : 1, 0, 'center'); + + if (overlap.y !== 'auto') { + a.vertical = a.vertical === 'top' ? 'bottom' : 'top'; + if (overlap.y === 'inclusive') { + t.vertical = t.vertical; + } + } + + if (overlap.x !== 'auto') { + a.horizontal = a.horizontal === 'left' ? 'right' : 'left'; + if (overlap.y === 'inclusive') { + t.horizontal = t.horizontal; + } + } + + return { + positions: positions, + anchorPos: a + }; + } + }, { + key: 'applyAutoPositionIfNeeded', + value: function applyAutoPositionIfNeeded(anchor, target, targetOrigin, anchorOrigin, targetPosition) { + var _getPositions = this.getPositions(anchorOrigin, targetOrigin), + positions = _getPositions.positions, + anchorPos = _getPositions.anchorPos; + + if (targetPosition.top < 0 || targetPosition.top + target.bottom > window.innerHeight) { + var newTop = anchor[anchorPos.vertical] - target[positions.y[0]]; + if (newTop + target.bottom <= window.innerHeight) { + targetPosition.top = Math.max(0, newTop); + } else { + newTop = anchor[anchorPos.vertical] - target[positions.y[1]]; + if (newTop + target.bottom <= window.innerHeight) { + targetPosition.top = Math.max(0, newTop); + } + } + } + + if (targetPosition.left < 0 || targetPosition.left + target.right > window.innerWidth) { + var newLeft = anchor[anchorPos.horizontal] - target[positions.x[0]]; + if (newLeft + target.right <= window.innerWidth) { + targetPosition.left = Math.max(0, newLeft); + } else { + newLeft = anchor[anchorPos.horizontal] - target[positions.x[1]]; + if (newLeft + target.right <= window.innerWidth) { + targetPosition.left = Math.max(0, newLeft); + } + } + } + + return targetPosition; + } + }, { + key: 'render', + value: function render() { + var _this3 = this; + + var eventListener = this.state.open ? _react2.default.createElement(_reactEventListener2.default, { + target: this.props.scrollableContainer, + onScroll: this.handleScroll, + onResize: this.handleResize + }) : null; + return _react2.default.createElement( + 'div', + { style: styles.root }, + eventListener, + _react2.default.createElement(_RenderToLayer2.default, { + ref: function ref(_ref) { + return _this3.popoverRefs.layer = _ref; + }, + open: this.state.open, + componentClickAway: this.componentClickAway, + useLayerForClickAway: this.props.useLayerForClickAway, + render: this.renderLayer + }) + ); + } + }]); + return Popover; +}(_react.Component); + +Popover.defaultProps = { + anchorOrigin: { + vertical: 'bottom', + horizontal: 'left' + }, + animated: true, + autoCloseWhenOffScreen: true, + canAutoPosition: true, + onRequestClose: function onRequestClose() {}, + open: false, + scrollableContainer: 'window', + style: { + overflowY: 'auto' + }, + targetOrigin: { + vertical: 'top', + horizontal: 'left' + }, + useLayerForClickAway: true, + zDepth: 1 +}; +Popover.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Popover.propTypes = { + /** + * This is the DOM element that will be used to set the position of the + * popover. + */ + anchorEl: _propTypes2.default.object, + /** + * This is the point on the anchor where the popover's + * `targetOrigin` will attach to. + * Options: + * vertical: [top, center, bottom] + * horizontal: [left, middle, right]. + */ + anchorOrigin: _propTypes4.default.origin, + /** + * If true, the popover will apply transitions when + * it is added to the DOM. + */ + animated: _propTypes2.default.bool, + /** + * Override the default animation component used. + */ + animation: _propTypes2.default.func, + /** + * If true, the popover will hide when the anchor is scrolled off the screen. + */ + autoCloseWhenOffScreen: _propTypes2.default.bool, + /** + * If true, the popover (potentially) ignores `targetOrigin` + * and `anchorOrigin` to make itself fit on screen, + * which is useful for mobile devices. + */ + canAutoPosition: _propTypes2.default.bool, + /** + * The content of the popover. + */ + children: _propTypes2.default.node, + /** + * The CSS class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Callback function fired when the popover is requested to be closed. + * + * @param {string} reason The reason for the close request. Possibles values + * are 'clickAway' and 'offScreen'. + */ + onRequestClose: _propTypes2.default.func, + /** + * If true, the popover is visible. + */ + open: _propTypes2.default.bool, + /** + * Represents the parent scrollable container. + * It can be an element or a string like `window`. + */ + scrollableContainer: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.string]), + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * This is the point on the popover which will attach to + * the anchor's origin. + * Options: + * vertical: [top, center, bottom] + * horizontal: [left, middle, right]. + */ + targetOrigin: _propTypes4.default.origin, + /** + * If true, the popover will render on top of an invisible + * layer, which will prevent clicks to the underlying + * elements, and trigger an `onRequestClose('clickAway')` call. + */ + useLayerForClickAway: _propTypes2.default.bool, + /** + * The zDepth of the popover. + */ + zDepth: _propTypes4.default.zDepth +} : void 0; +exports.default = Popover; \ No newline at end of file diff --git a/Popover/PopoverAnimationDefault.js b/Popover/PopoverAnimationDefault.js new file mode 100644 index 00000000000000..3465e71027bcdd --- /dev/null +++ b/Popover/PopoverAnimationDefault.js @@ -0,0 +1,172 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var targetOrigin = props.targetOrigin; + var open = state.open; + var muiTheme = context.muiTheme; + + var horizontal = targetOrigin.horizontal.replace('middle', 'vertical'); + + return { + root: { + position: 'fixed', + zIndex: muiTheme.zIndex.popover, + opacity: open ? 1 : 0, + transform: open ? 'scale(1, 1)' : 'scale(0, 0)', + transformOrigin: horizontal + ' ' + targetOrigin.vertical, + transition: _transitions2.default.easeOut('250ms', ['transform', 'opacity']), + maxHeight: '100%' + }, + horizontal: { + maxHeight: '100%', + overflowY: 'auto', + transform: open ? 'scaleX(1)' : 'scaleX(0)', + opacity: open ? 1 : 0, + transformOrigin: horizontal + ' ' + targetOrigin.vertical, + transition: _transitions2.default.easeOut('250ms', ['transform', 'opacity']) + }, + vertical: { + opacity: open ? 1 : 0, + transform: open ? 'scaleY(1)' : 'scaleY(0)', + transformOrigin: horizontal + ' ' + targetOrigin.vertical, + transition: _transitions2.default.easeOut('500ms', ['transform', 'opacity']) + } + }; +} + +var PopoverAnimationDefault = function (_Component) { + (0, _inherits3.default)(PopoverAnimationDefault, _Component); + + function PopoverAnimationDefault() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, PopoverAnimationDefault); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = PopoverAnimationDefault.__proto__ || (0, _getPrototypeOf2.default)(PopoverAnimationDefault)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + open: false + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(PopoverAnimationDefault, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + this.setState({ + open: nextProps.open + }); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + className = _props.className, + style = _props.style, + zDepth = _props.zDepth; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + return _react2.default.createElement( + _Paper2.default, + { + style: (0, _simpleAssign2.default)(styles.root, style), + zDepth: zDepth, + className: className + }, + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.horizontal) }, + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.vertical) }, + this.props.children + ) + ) + ); + } + }]); + return PopoverAnimationDefault; +}(_react.Component); + +PopoverAnimationDefault.defaultProps = { + style: {}, + zDepth: 1 +}; +PopoverAnimationDefault.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? PopoverAnimationDefault.propTypes = { + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + open: _propTypes2.default.bool.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + targetOrigin: _propTypes4.default.origin.isRequired, + zDepth: _propTypes4.default.zDepth +} : void 0; +exports.default = PopoverAnimationDefault; \ No newline at end of file diff --git a/Popover/PopoverAnimationVertical.js b/Popover/PopoverAnimationVertical.js new file mode 100644 index 00000000000000..7f29bbc3ed17f9 --- /dev/null +++ b/Popover/PopoverAnimationVertical.js @@ -0,0 +1,147 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _propTypes3 = require('../utils/propTypes'); + +var _propTypes4 = _interopRequireDefault(_propTypes3); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var targetOrigin = props.targetOrigin; + var open = state.open; + var muiTheme = context.muiTheme; + + var horizontal = targetOrigin.horizontal.replace('middle', 'center'); + + return { + root: { + position: 'fixed', + zIndex: muiTheme.zIndex.popover, + opacity: open ? 1 : 0, + transform: open ? 'scaleY(1)' : 'scaleY(0)', + transformOrigin: horizontal + ' ' + targetOrigin.vertical, + transition: _transitions2.default.easeOut('450ms', ['transform', 'opacity']), + maxHeight: '100%' + } + }; +} + +var PopoverAnimationVertical = function (_Component) { + (0, _inherits3.default)(PopoverAnimationVertical, _Component); + + function PopoverAnimationVertical() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, PopoverAnimationVertical); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = PopoverAnimationVertical.__proto__ || (0, _getPrototypeOf2.default)(PopoverAnimationVertical)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + open: false + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(PopoverAnimationVertical, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + this.setState({ + open: nextProps.open + }); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + className = _props.className, + style = _props.style, + zDepth = _props.zDepth; + + + var styles = getStyles(this.props, this.context, this.state); + + return _react2.default.createElement( + _Paper2.default, + { + style: (0, _simpleAssign2.default)(styles.root, style), + zDepth: zDepth, + className: className + }, + this.props.children + ); + } + }]); + return PopoverAnimationVertical; +}(_react.Component); + +PopoverAnimationVertical.defaultProps = { + style: {}, + zDepth: 1 +}; +PopoverAnimationVertical.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? PopoverAnimationVertical.propTypes = { + children: _propTypes2.default.node, + className: _propTypes2.default.string, + open: _propTypes2.default.bool.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + targetOrigin: _propTypes4.default.origin.isRequired, + zDepth: _propTypes4.default.zDepth +} : void 0; +exports.default = PopoverAnimationVertical; \ No newline at end of file diff --git a/Popover/index.js b/Popover/index.js new file mode 100644 index 00000000000000..90207b8b035ea8 --- /dev/null +++ b/Popover/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.PopoverAnimationVertical = exports.Popover = undefined; + +var _Popover2 = require('./Popover'); + +var _Popover3 = _interopRequireDefault(_Popover2); + +var _PopoverAnimationVertical2 = require('./PopoverAnimationVertical'); + +var _PopoverAnimationVertical3 = _interopRequireDefault(_PopoverAnimationVertical2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Popover = _Popover3.default; +exports.PopoverAnimationVertical = _PopoverAnimationVertical3.default; +exports.default = _Popover3.default; \ No newline at end of file diff --git a/ROADMAP.md b/ROADMAP.md deleted file mode 100644 index 32cba1cad43bd2..00000000000000 --- a/ROADMAP.md +++ /dev/null @@ -1,128 +0,0 @@ -# Roadmap - -The roadmap is a living document, and it is likely that priorities will change, but the list below should give some indication of our plans for the next major release, and for the future. - -:warning: New features based on `v0.18.x` have low priority and will most likely not be reviewed nor merged. We want to focus on bug fixes. - -## Version 1 (published on NPM under the next tag) - -Version 1 release is going to be huge :sparkles:. -We host a temporary [documentation](https://material-ui-1dab0.firebaseapp.com) for the pre-releases. - -Material-UI was started [3 years ago](https://github.com/callemall/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46). -The ecosystem has evolved a lot since then, we have also learned a lot. -[@nathanmarks](https://github.com/nathanmarks/) started an ambitious task, rebuilding Material-UI from the **ground-up** -taking advantage of this knowledge to address long-standing issues. -Expect various **breaking changes**. - -The core team is now helping him in the [v1-beta](https://github.com/callemall/material-ui/tree/v1-beta) branch. -If you are interested in following our progress or if you want to help us reach that goal faster, you can have a look at the following milestones: -- ~~[v1.0.0-beta](https://github.com/callemall/material-ui/milestone/22)~~ - complete! -- [v1.0.0-prerelease](https://github.com/callemall/material-ui/milestone/14) - -## Q&A with the v1-beta branch - -The `v1-beta` branch has become more mature. -We think that it's a good time to communicate more on this effort. -We have a lot of people opening PRs and getting them closed, this is not a good thing. -This Q&A tries to answer some of your questions. - -### Summarizing, what are our main problems with CSS? - -The CSS (cascading style sheets) specification emerged in 1994. -At that time, a bunch of others specifications were competing. -It was the cascading concept that made CSS succeed over its competitors, by allowing users to provide their own style-sheet, that will be later combined with browsers and authors style-sheets. -That feature was removed 2 years ago from the most popular browser. -My point is, our needs have evolved quite a bit since then. - -Back in the beginning of Material-UI, we had many issues with the first **LESS approach**. -Aside from [the problem with CSS at scale](https://speakerdeck.com/vjeux/react-css-in-js) raised by @vjeux, we had the following ones: -- We had a **dependency** on the LESS build chain with no way to abstract it away. -Users needed to change their theme variables. @gpbl was maintaining a [SASS version]( https://github.com/gpbl/material-ui-sass). (Today, we could be using *[cssnext](http://cssnext.io/)*). -- The theme was computed at **build time** but a Material component must be able to render quite differently depending on his context that can only be known at runtime. -(Tomorrow, CSS variables will help a lot) -- We were shipping a **big monolithic** CSS file. -That's not great for performance (for example it goes against the [PRPL pattern](https://www.polymer-project.org/1.0/toolbox/server) suggested by the Polymer team). -That was also an issue for users wanting to use a single component without paying for all the CSS upfront. -- We used multi-level selectors, making the **override** of styles challenging. - -We later came up with an **inline-style approach** solving the majority of our issues. -But: -- We had lost around 25% of the performance :turtle:. -Computing the inline-style at each render with no caching isn't really efficient. -- Some more advanced CSS feature wasn't available, e.g. keyframes, pseudo-elements, pseudo-classes :nail_care:. -- Media queries aren't available on the server. At least [not yet](http://caniuse.com/#feat=client-hints-dpr-width-viewport). -- The debugging was really challenging. Browser dev tools aren't tuned for inline-styles. -- React v15 has changed the method of injecting styles into the DOM meaning, for example, that prefixing all browsers for `display:flex` is no longer possible :boom:. - -### Does JSS solve them? - -Yes, it does. You can have a look at [this presentation](https://github.com/oliviertassinari/a-journey-toward-better-style) for more details. - -## What does it mean to migrate a component? Should we discuss each one of them first? - -Migrating a component to the `v1-beta` branch isn't just a style migration. -We think that it's our best opportunity to clear the API and improve the implementation of the components. -@nathanmarks ended up fixing a lot of long standing issues in the process. - -Yes, it would much better to discuss an action plan for each of them. -That would save us quite some time following a wrong path. -We should answer the following questions: -- What will the API look like? -- What tradeoffs are we going to make? -- What features will be implemented? - -That conversation could start on one of the following [issues](https://github.com/callemall/material-ui/issues?q=is%3Aissue+is%3Aopen+label%3ARefactoring+label%3Anext). - -### How do I know if a component still needs to be migrated `v1-beta`? - -We have [Github project](https://github.com/callemall/material-ui/projects/1) to **coordinate** the work toward the `v1-beta` release. -You can check the *Component to migrate* column to know the ones needing to be migrated to `v1-beta`. - -### How do I start migrating components to the `v1-beta` branch? - -Once we agree on the migration plan you're gonna have to get your hands dirty. -That's really up to you. At least, you gonna have to -- clone the `v1-beta` branch -- install the npm dependencies -- play with the documentation site -- write some documentation -- write some tests (unit, integration, visual) - -### When do we intend to release `v1-beta`? - -We don't have an ETA for the release of the `v1-beta` branch, -however, we are going to try to follow this plan: - -1. We completely address the styling issue before moving from *alpha* to [*beta*](https://github.com/callemall/material-ui/milestone/22). -2. We publish our first beta releases. -3. We fix the last API inconsistencies (as we can make breaking changes without having to worry much). -4. We merge the beta branch into master -5. We publish our first pre-releases, if all goes well, we move to the next step. -6. We publish v1 :tada: - -At that point, some features and components from the v0.x will be missing in the v1. -So, what about them? -- First, both versions can be used at the same time, people can progressively migrate, one component at the time. -- Then, **with the help of the community** and over time, we will support more and more components. -- We would rather **support few use-cases very well and allow people to build on top of it** than many poorly. - -### Have we ever considered using the best libraries for each piece of functionality and provide only a wrapper for the UI? - -We have, it really depends on the problem we are trying to solve. -For UI related things, providing a wrapper for the functionality is often the wrong approach. -We think that it should be done the other way around, i.e. providing a low-level API that can be combined with third-party libraries, e.g.: - - [react-virtualized](https://github.com/bvaughn/react-virtualized) - - [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) - - [react-dnd](https://github.com/gaearon/react-dnd) - -On the other hand, using a smart date library for the DatePicker / TimePicker would probably be much better as date management is tricky and not a core business. - -## Future - -- [[#2863](https://github.com/callemall/material-ui/issues/2863)] Add missing components, and missing features from current ones. -- [[#593](https://github.com/callemall/material-ui/issues/593)] Full support for react-native. -- Add example on how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) / [react-list](https://github.com/orgsync/react-list) for lists, menu items and table. -- [[#2493](https://github.com/callemall/material-ui/pull/2493)] Use higher order components across the library to abstract themes passed down from context. -- [[#2784](https://github.com/callemall/material-ui/issues/2784)] Stateless components. -- [[#1673](https://github.com/callemall/material-ui/issues/1673)] I18n for the doc-site. diff --git a/RadioButton/RadioButton.js b/RadioButton/RadioButton.js new file mode 100644 index 00000000000000..0dc3cb2eb3a3ed --- /dev/null +++ b/RadioButton/RadioButton.js @@ -0,0 +1,275 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _EnhancedSwitch = require('../internal/EnhancedSwitch'); + +var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); + +var _radioButtonUnchecked = require('../svg-icons/toggle/radio-button-unchecked'); + +var _radioButtonUnchecked2 = _interopRequireDefault(_radioButtonUnchecked); + +var _radioButtonChecked = require('../svg-icons/toggle/radio-button-checked'); + +var _radioButtonChecked2 = _interopRequireDefault(_radioButtonChecked); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var radioButton = context.muiTheme.radioButton; + + + return { + icon: { + height: radioButton.size, + width: radioButton.size + }, + target: { + transition: _transitions2.default.easeOut(), + position: 'absolute', + opacity: 1, + transform: 'scale(1)', + fill: radioButton.borderColor + }, + fill: { + position: 'absolute', + opacity: 1, + transform: 'scale(0)', + transformOrigin: '50% 50%', + transition: _transitions2.default.easeOut(), + fill: radioButton.checkedColor + }, + targetWhenChecked: { + opacity: 0, + transform: 'scale(0)' + }, + fillWhenChecked: { + opacity: 1, + transform: 'scale(1)' + }, + targetWhenDisabled: { + fill: radioButton.disabledColor + }, + fillWhenDisabled: { + fill: radioButton.disabledColor + }, + label: { + color: props.disabled ? radioButton.labelDisabledColor : radioButton.labelColor + }, + ripple: { + color: props.checked ? radioButton.checkedColor : radioButton.borderColor + } + }; +} + +var RadioButton = function (_Component) { + (0, _inherits3.default)(RadioButton, _Component); + + function RadioButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, RadioButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = RadioButton.__proto__ || (0, _getPrototypeOf2.default)(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleSwitch = function (event) { + if (_this.props.onCheck) { + _this.props.onCheck(event, _this.props.value); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + // Only called when selected, not when unselected. + + + (0, _createClass3.default)(RadioButton, [{ + key: 'isChecked', + value: function isChecked() { + return this.refs.enhancedSwitch.isSwitched(); + } + + // Use RadioButtonGroup.setSelectedValue(newSelectionValue) to set a + // RadioButton's checked value. + + }, { + key: 'setChecked', + value: function setChecked(newCheckedValue) { + this.refs.enhancedSwitch.setSwitched(newCheckedValue); + } + }, { + key: 'getValue', + value: function getValue() { + return this.refs.enhancedSwitch.getValue(); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + checkedIcon = _props.checkedIcon, + checked = _props.checked, + iconStyle = _props.iconStyle, + labelStyle = _props.labelStyle, + labelPosition = _props.labelPosition, + onCheck = _props.onCheck, + uncheckedIcon = _props.uncheckedIcon, + disabled = _props.disabled, + other = (0, _objectWithoutProperties3.default)(_props, ['checkedIcon', 'checked', 'iconStyle', 'labelStyle', 'labelPosition', 'onCheck', 'uncheckedIcon', 'disabled']); + + + var styles = getStyles(this.props, this.context); + + var uncheckedStyles = (0, _simpleAssign2.default)(styles.target, checked && styles.targetWhenChecked, iconStyle, disabled && styles.targetWhenDisabled); + + var checkedStyles = (0, _simpleAssign2.default)(styles.fill, checked && styles.fillWhenChecked, iconStyle, disabled && styles.fillWhenDisabled); + + var uncheckedElement = _react2.default.isValidElement(uncheckedIcon) ? _react2.default.cloneElement(uncheckedIcon, { + style: (0, _simpleAssign2.default)(uncheckedStyles, uncheckedIcon.props.style) + }) : _react2.default.createElement(_radioButtonUnchecked2.default, { style: uncheckedStyles }); + + var checkedElement = _react2.default.isValidElement(checkedIcon) ? _react2.default.cloneElement(checkedIcon, { + style: (0, _simpleAssign2.default)(checkedStyles, checkedIcon.props.style) + }) : _react2.default.createElement(_radioButtonChecked2.default, { style: checkedStyles }); + + var mergedIconStyle = (0, _simpleAssign2.default)(styles.icon, iconStyle); + var mergedLabelStyle = (0, _simpleAssign2.default)(styles.label, labelStyle); + + return _react2.default.createElement(_EnhancedSwitch2.default, (0, _extends3.default)({}, other, { + ref: 'enhancedSwitch', + inputType: 'radio', + checked: checked, + switched: checked, + disabled: disabled, + rippleColor: styles.ripple.color, + iconStyle: mergedIconStyle, + labelStyle: mergedLabelStyle, + labelPosition: labelPosition, + onSwitch: this.handleSwitch, + switchElement: _react2.default.createElement( + 'div', + null, + uncheckedElement, + checkedElement + ) + })); + } + }]); + return RadioButton; +}(_react.Component); + +RadioButton.defaultProps = { + checked: false, + disabled: false, + labelPosition: 'right' +}; +RadioButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? RadioButton.propTypes = { + /** + * @ignore + * checked if true + * Used internally by `RadioButtonGroup`. + */ + checked: _propTypes2.default.bool, + /** + * The icon element to show when the radio button is checked. + */ + checkedIcon: _propTypes2.default.element, + /** + * If true, the radio button is disabled. + */ + disabled: _propTypes2.default.bool, + /** + * Override the inline-styles of the icon element. + */ + iconStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the input element. + */ + inputStyle: _propTypes2.default.object, + /** + * @ignore + * Used internally by `RadioButtonGroup`. Use the `labelPosition` property of `RadioButtonGroup` instead. + * Where the label will be placed next to the radio button. + */ + labelPosition: _propTypes2.default.oneOf(['left', 'right']), + /** + * Override the inline-styles of the label element. + */ + labelStyle: _propTypes2.default.object, + /** + * @ignore + * Callback function fired when the radio button is checked. Note that this + * function will not be called if the radio button is part of a + * radio button group: in this case, use the `onChange` property of + * `RadioButtonGroup`. + * + * @param {object} event `change` event targeting the element. + * @param {string} value The element's `value`. + */ + onCheck: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The icon element to show when the radio button is unchecked. + */ + uncheckedIcon: _propTypes2.default.element, + /** + * The value of the radio button. + */ + value: _propTypes2.default.any +} : void 0; +exports.default = RadioButton; \ No newline at end of file diff --git a/RadioButton/RadioButtonGroup.js b/RadioButton/RadioButtonGroup.js new file mode 100644 index 00000000000000..7b49a3c3343953 --- /dev/null +++ b/RadioButton/RadioButtonGroup.js @@ -0,0 +1,239 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _RadioButton = require('./RadioButton'); + +var _RadioButton2 = _interopRequireDefault(_RadioButton); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var RadioButtonGroup = function (_Component) { + (0, _inherits3.default)(RadioButtonGroup, _Component); + + function RadioButtonGroup() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, RadioButtonGroup); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = RadioButtonGroup.__proto__ || (0, _getPrototypeOf2.default)(RadioButtonGroup)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + numberCheckedRadioButtons: 0, + selected: '' + }, _this.handleChange = function (event, newSelection) { + _this.updateRadioButtons(newSelection); + + // Successful update + if (_this.state.numberCheckedRadioButtons === 0) { + if (_this.props.onChange) _this.props.onChange(event, newSelection); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(RadioButtonGroup, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var _this2 = this; + + var cnt = 0; + var selected = ''; + var _props = this.props, + valueSelected = _props.valueSelected, + defaultSelected = _props.defaultSelected; + + if (valueSelected !== undefined) { + selected = valueSelected; + } else if (defaultSelected !== undefined) { + selected = defaultSelected; + } + + _react2.default.Children.forEach(this.props.children, function (option) { + if (_this2.hasCheckAttribute(option)) cnt++; + }, this); + + this.setState({ + numberCheckedRadioButtons: cnt, + selected: selected + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.hasOwnProperty('valueSelected')) { + this.setState({ + selected: nextProps.valueSelected + }); + } + } + }, { + key: 'hasCheckAttribute', + value: function hasCheckAttribute(radioButton) { + return radioButton.props.hasOwnProperty('checked') && radioButton.props.checked; + } + }, { + key: 'updateRadioButtons', + value: function updateRadioButtons(newSelection) { + if (this.state.numberCheckedRadioButtons === 0) { + this.setState({ selected: newSelection }); + } else { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Cannot select a different radio button while another radio button\n has the \'checked\' property set to true.') : void 0; + } + } + }, { + key: 'getSelectedValue', + value: function getSelectedValue() { + return this.state.selected; + } + }, { + key: 'setSelectedValue', + value: function setSelectedValue(newSelectionValue) { + this.updateRadioButtons(newSelectionValue); + } + }, { + key: 'clearValue', + value: function clearValue() { + this.setSelectedValue(''); + } + }, { + key: 'render', + value: function render() { + var _this3 = this; + + var prepareStyles = this.context.muiTheme.prepareStyles; + + + var options = _react2.default.Children.map(this.props.children, function (option) { + var _option$props = option.props, + name = _option$props.name, + value = _option$props.value, + label = _option$props.label, + onCheck = _option$props.onCheck, + other = (0, _objectWithoutProperties3.default)(_option$props, ['name', 'value', 'label', 'onCheck']); + + + return _react2.default.createElement(_RadioButton2.default, (0, _extends3.default)({}, other, { + ref: option.props.value, + name: _this3.props.name, + key: option.props.value, + value: option.props.value, + label: option.props.label, + labelPosition: _this3.props.labelPosition, + onCheck: _this3.handleChange, + checked: option.props.value === _this3.state.selected + })); + }, this); + + return _react2.default.createElement( + 'div', + { + style: prepareStyles((0, _simpleAssign2.default)({}, this.props.style)), + className: this.props.className + }, + options + ); + } + }]); + return RadioButtonGroup; +}(_react.Component); + +RadioButtonGroup.defaultProps = { + style: {} +}; +RadioButtonGroup.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? RadioButtonGroup.propTypes = { + /** + * Should be used to pass `RadioButton` components. + */ + children: _propTypes2.default.node, + /** + * The CSS class name of the root element. + */ + className: _propTypes2.default.string, + /** + * The `value` property of the radio button that will be + * selected by default. This takes precedence over the `checked` property + * of the `RadioButton` elements. + */ + defaultSelected: _propTypes2.default.any, + /** + * Where the label will be placed for all child radio buttons. + * This takes precedence over the `labelPosition` property of the + * `RadioButton` elements. + */ + labelPosition: _propTypes2.default.oneOf(['left', 'right']), + /** + * The name that will be applied to all child radio buttons. + */ + name: _propTypes2.default.string.isRequired, + /** + * Callback function that is fired when a radio button has + * been checked. + * + * @param {object} event `change` event targeting the selected + * radio button. + * @param {*} value The `value` of the selected radio button. + */ + onChange: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The `value` of the currently selected radio button. + */ + valueSelected: _propTypes2.default.any +} : void 0; +exports.default = RadioButtonGroup; \ No newline at end of file diff --git a/RadioButton/index.js b/RadioButton/index.js new file mode 100644 index 00000000000000..cf7f46fa7c9de4 --- /dev/null +++ b/RadioButton/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.RadioButtonGroup = exports.RadioButton = undefined; + +var _RadioButton2 = require('./RadioButton'); + +var _RadioButton3 = _interopRequireDefault(_RadioButton2); + +var _RadioButtonGroup2 = require('./RadioButtonGroup'); + +var _RadioButtonGroup3 = _interopRequireDefault(_RadioButtonGroup2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.RadioButton = _RadioButton3.default; +exports.RadioButtonGroup = _RadioButtonGroup3.default; +exports.default = _RadioButton3.default; \ No newline at end of file diff --git a/RaisedButton/RaisedButton.js b/RaisedButton/RaisedButton.js new file mode 100644 index 00000000000000..589ae4ca9f1583 --- /dev/null +++ b/RaisedButton/RaisedButton.js @@ -0,0 +1,489 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _colorManipulator = require('../utils/colorManipulator'); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function validateLabel(props, propName, componentName) { + if (process.env.NODE_ENV !== 'production') { + if (!props.children && props.label !== 0 && !props.label && !props.icon) { + return new Error('Required prop label or children or icon was not specified in ' + componentName + '.'); + } + } +} + +function getStyles(props, context, state) { + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + button = _context$muiTheme.button, + raisedButton = _context$muiTheme.raisedButton, + borderRadius = _context$muiTheme.borderRadius; + var disabled = props.disabled, + disabledBackgroundColor = props.disabledBackgroundColor, + disabledLabelColor = props.disabledLabelColor, + fullWidth = props.fullWidth, + icon = props.icon, + label = props.label, + labelPosition = props.labelPosition, + primary = props.primary, + secondary = props.secondary, + style = props.style; + + + var amount = primary || secondary ? 0.4 : 0.08; + + var backgroundColor = raisedButton.color; + var labelColor = raisedButton.textColor; + + if (disabled) { + backgroundColor = disabledBackgroundColor || raisedButton.disabledColor; + labelColor = disabledLabelColor || raisedButton.disabledTextColor; + } else if (primary) { + backgroundColor = raisedButton.primaryColor; + labelColor = raisedButton.primaryTextColor; + } else if (secondary) { + backgroundColor = raisedButton.secondaryColor; + labelColor = raisedButton.secondaryTextColor; + } else { + if (props.backgroundColor) { + backgroundColor = props.backgroundColor; + } + if (props.labelColor) { + labelColor = props.labelColor; + } + } + + var buttonHeight = style && style.height || button.height; + + return { + root: { + display: 'inline-block', + transition: _transitions2.default.easeOut(), + minWidth: fullWidth ? '100%' : button.minWidth + }, + button: { + height: buttonHeight, + lineHeight: buttonHeight + 'px', + width: '100%', + padding: 0, + borderRadius: borderRadius, + transition: _transitions2.default.easeOut(), + backgroundColor: backgroundColor, + // That's the default value for a button but not a link + textAlign: 'center' + }, + label: { + position: 'relative', + opacity: 1, + fontSize: raisedButton.fontSize, + letterSpacing: 0, + textTransform: raisedButton.textTransform || button.textTransform || 'uppercase', + fontWeight: raisedButton.fontWeight, + margin: 0, + userSelect: 'none', + paddingLeft: icon && labelPosition !== 'before' ? 8 : baseTheme.spacing.desktopGutterLess, + paddingRight: icon && labelPosition === 'before' ? 8 : baseTheme.spacing.desktopGutterLess, + color: labelColor + }, + icon: { + verticalAlign: 'middle', + marginLeft: label && labelPosition !== 'before' ? 12 : 0, + marginRight: label && labelPosition === 'before' ? 12 : 0 + }, + overlay: { + height: buttonHeight, + borderRadius: borderRadius, + backgroundColor: (state.keyboardFocused || state.hovered) && !disabled && (0, _colorManipulator.fade)(labelColor, amount), + transition: _transitions2.default.easeOut(), + top: 0 + }, + ripple: { + color: labelColor, + opacity: !(primary || secondary) ? 0.1 : 0.16 + } + }; +} + +var RaisedButton = function (_Component) { + (0, _inherits3.default)(RaisedButton, _Component); + + function RaisedButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, RaisedButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = RaisedButton.__proto__ || (0, _getPrototypeOf2.default)(RaisedButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false, + keyboardFocused: false, + touched: false, + initialZDepth: 0, + zDepth: 0 + }, _this.handleMouseDown = function (event) { + // only listen to left clicks + if (event.button === 0) { + _this.setState({ + zDepth: _this.state.initialZDepth + 1 + }); + } + if (_this.props.onMouseDown) { + _this.props.onMouseDown(event); + } + }, _this.handleMouseUp = function (event) { + _this.setState({ + zDepth: _this.state.initialZDepth + }); + if (_this.props.onMouseUp) { + _this.props.onMouseUp(event); + } + }, _this.handleMouseLeave = function (event) { + if (!_this.state.keyboardFocused) { + _this.setState({ + zDepth: _this.state.initialZDepth, + hovered: false + }); + } + if (_this.props.onMouseLeave) { + _this.props.onMouseLeave(event); + } + }, _this.handleMouseEnter = function (event) { + if (!_this.state.keyboardFocused && !_this.state.touched) { + _this.setState({ + hovered: true + }); + } + if (_this.props.onMouseEnter) { + _this.props.onMouseEnter(event); + } + }, _this.handleTouchStart = function (event) { + _this.setState({ + touched: true, + zDepth: _this.state.initialZDepth + 1 + }); + + if (_this.props.onTouchStart) { + _this.props.onTouchStart(event); + } + }, _this.handleTouchEnd = function (event) { + _this.setState({ + touched: true, + zDepth: _this.state.initialZDepth + }); + + if (_this.props.onTouchEnd) { + _this.props.onTouchEnd(event); + } + }, _this.handleKeyboardFocus = function (event, keyboardFocused) { + var zDepth = keyboardFocused && !_this.props.disabled ? _this.state.initialZDepth + 1 : _this.state.initialZDepth; + + _this.setState({ + zDepth: zDepth, + keyboardFocused: keyboardFocused + }); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(RaisedButton, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var zDepth = this.props.disabled ? 0 : 1; + this.setState({ + zDepth: zDepth, + initialZDepth: zDepth + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var zDepth = nextProps.disabled ? 0 : 1; + var nextState = { + zDepth: zDepth, + initialZDepth: zDepth + }; + + if (nextProps.disabled) { + nextState.hovered = false; + } + + this.setState(nextState); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + backgroundColor = _props.backgroundColor, + buttonStyle = _props.buttonStyle, + children = _props.children, + className = _props.className, + disabled = _props.disabled, + disabledBackgroundColor = _props.disabledBackgroundColor, + disabledLabelColor = _props.disabledLabelColor, + fullWidth = _props.fullWidth, + icon = _props.icon, + label = _props.label, + labelColor = _props.labelColor, + labelPosition = _props.labelPosition, + labelStyle = _props.labelStyle, + overlayStyle = _props.overlayStyle, + primary = _props.primary, + rippleStyle = _props.rippleStyle, + secondary = _props.secondary, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['backgroundColor', 'buttonStyle', 'children', 'className', 'disabled', 'disabledBackgroundColor', 'disabledLabelColor', 'fullWidth', 'icon', 'label', 'labelColor', 'labelPosition', 'labelStyle', 'overlayStyle', 'primary', 'rippleStyle', 'secondary', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + var mergedRippleStyles = (0, _simpleAssign2.default)({}, styles.ripple, rippleStyle); + + var buttonEventHandlers = disabled ? {} : { + onMouseDown: this.handleMouseDown, + onMouseUp: this.handleMouseUp, + onMouseLeave: this.handleMouseLeave, + onMouseEnter: this.handleMouseEnter, + onTouchStart: this.handleTouchStart, + onTouchEnd: this.handleTouchEnd, + onKeyboardFocus: this.handleKeyboardFocus + }; + + var labelElement = label && _react2.default.createElement( + 'span', + { style: prepareStyles((0, _simpleAssign2.default)(styles.label, labelStyle)), key: 'labelElement' }, + label + ); + + var iconCloned = icon && (0, _react.cloneElement)(icon, { + color: icon.props.color || styles.label.color, + style: (0, _simpleAssign2.default)(styles.icon, icon.props.style), + key: 'iconCloned' + }); + + var overlayBackgroundProxy = { + backgroundColor: overlayStyle && styles.overlay.backgroundColor && overlayStyle.backgroundColor || styles.overlay.backgroundColor + }; + + // Place label before or after children. + var enhancedButtonChildren = labelPosition === 'before' ? [labelElement, iconCloned, children] : [children, iconCloned, labelElement]; + + return _react2.default.createElement( + _Paper2.default, + { + className: className, + style: (0, _simpleAssign2.default)(styles.root, style), + zDepth: this.state.zDepth + }, + _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, buttonEventHandlers, { + ref: 'container', + disabled: disabled, + style: (0, _simpleAssign2.default)(styles.button, buttonStyle), + focusRippleColor: mergedRippleStyles.color, + touchRippleColor: mergedRippleStyles.color, + focusRippleOpacity: mergedRippleStyles.opacity, + touchRippleOpacity: mergedRippleStyles.opacity + }), + _react2.default.createElement( + 'div', + { + ref: 'overlay', + style: prepareStyles((0, _simpleAssign2.default)(styles.overlay, overlayStyle, overlayBackgroundProxy)) + }, + enhancedButtonChildren + ) + ) + ); + } + }]); + return RaisedButton; +}(_react.Component); + +RaisedButton.muiName = 'RaisedButton'; +RaisedButton.defaultProps = { + disabled: false, + labelPosition: 'after', + fullWidth: false, + primary: false, + secondary: false +}; +RaisedButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? RaisedButton.propTypes = { + /** + * Override the default background color for the button, + * but not the default disabled background color + * (use `disabledBackgroundColor` for this). + */ + backgroundColor: _propTypes2.default.string, + /** + * Override the inline-styles of the button element. + */ + buttonStyle: _propTypes2.default.object, + /** + * The content of the button. + * If a label is provided via the `label` prop, the text within the label + * will be displayed in addition to the content provided here. + */ + children: _propTypes2.default.node, + /** + * The CSS class name of the root element. + */ + className: _propTypes2.default.string, + /** + * The element to use as the container for the RaisedButton. Either a string to + * use a DOM element or a ReactElement. This is useful for wrapping the + * RaisedButton in a custom Link component. If a ReactElement is given, ensure + * that it passes all of its given props through to the underlying DOM + * element and renders its children prop for proper integration. + */ + containerElement: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]), + /** + * If true, the element's ripple effect will be disabled. + */ + disableTouchRipple: _propTypes2.default.bool, + /** + * If true, the button will be disabled. + */ + disabled: _propTypes2.default.bool, + /** + * Override the default background color for the button + * when it is disabled. + */ + disabledBackgroundColor: _propTypes2.default.string, + /** + * The color of the button's label when the button is disabled. + */ + disabledLabelColor: _propTypes2.default.string, + /** + * If true, the button will take up the full width of its container. + */ + fullWidth: _propTypes2.default.bool, + /** + * The URL to link to when the button is clicked. + */ + href: _propTypes2.default.string, + /** + * An icon to be displayed within the button. + */ + icon: _propTypes2.default.node, + /** + * The label to be displayed within the button. + * If content is provided via the `children` prop, that content will be + * displayed in addition to the label provided here. + */ + label: validateLabel, + /** + * The color of the button's label. + */ + labelColor: _propTypes2.default.string, + /** + * The position of the button's label relative to the button's `children`. + */ + labelPosition: _propTypes2.default.oneOf(['before', 'after']), + /** + * Override the inline-styles of the button's label element. + */ + labelStyle: _propTypes2.default.object, + /** + * Callback function fired when the button is clicked. + * + * @param {object} event Click event targeting the button. + */ + onClick: _propTypes2.default.func, + /** @ignore */ + onMouseDown: _propTypes2.default.func, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** @ignore */ + onMouseUp: _propTypes2.default.func, + /** @ignore */ + onTouchEnd: _propTypes2.default.func, + /** @ignore */ + onTouchStart: _propTypes2.default.func, + /** + * Override the inline style of the button overlay. + */ + overlayStyle: _propTypes2.default.object, + /** + * If true, the button will use the theme's primary color. + */ + primary: _propTypes2.default.bool, + /** + * Override the inline style of the ripple element. + */ + rippleStyle: _propTypes2.default.object, + /** + * If true, the button will use the theme's secondary color. + * If both `secondary` and `primary` are true, the button will use + * the theme's primary color. + */ + secondary: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = RaisedButton; \ No newline at end of file diff --git a/RaisedButton/index.js b/RaisedButton/index.js new file mode 100644 index 00000000000000..a9d8c241234449 --- /dev/null +++ b/RaisedButton/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _RaisedButton = require('./RaisedButton'); + +var _RaisedButton2 = _interopRequireDefault(_RaisedButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _RaisedButton2.default; \ No newline at end of file diff --git a/RefreshIndicator/RefreshIndicator.js b/RefreshIndicator/RefreshIndicator.js new file mode 100644 index 00000000000000..1b6894718ffcaa --- /dev/null +++ b/RefreshIndicator/RefreshIndicator.js @@ -0,0 +1,417 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray'); + +var _slicedToArray3 = _interopRequireDefault(_slicedToArray2); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _autoPrefix = require('../utils/autoPrefix'); + +var _autoPrefix2 = _interopRequireDefault(_autoPrefix); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var VIEWBOX_SIZE = 32; + +function getStyles(props) { + var padding = props.size * 0.1; // same implementation of `this.getPaddingSize()` + return { + root: { + position: 'absolute', + zIndex: 2, + width: props.size, + height: props.size, + padding: padding, + top: -10000, + left: -10000, + transform: 'translate(' + (10000 + props.left) + 'px, ' + (10000 + props.top) + 'px)', + opacity: props.status === 'hide' ? 0 : 1, + transition: props.status === 'hide' ? _transitions2.default.create('all', '.3s', 'ease-out') : 'none' + } + }; +} + +var RefreshIndicator = function (_Component) { + (0, _inherits3.default)(RefreshIndicator, _Component); + + function RefreshIndicator() { + (0, _classCallCheck3.default)(this, RefreshIndicator); + return (0, _possibleConstructorReturn3.default)(this, (RefreshIndicator.__proto__ || (0, _getPrototypeOf2.default)(RefreshIndicator)).apply(this, arguments)); + } + + (0, _createClass3.default)(RefreshIndicator, [{ + key: 'componentDidMount', + value: function componentDidMount() { + this.scalePath(this.refs.path, 0); + this.rotateWrapper(this.refs.wrapper); + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate() { + clearTimeout(this.scalePathTimer); + clearTimeout(this.rotateWrapperTimer); + clearTimeout(this.rotateWrapperSecondTimer); + + this.scalePath(this.refs.path, 0); + this.rotateWrapper(this.refs.wrapper); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.scalePathTimer); + clearTimeout(this.rotateWrapperTimer); + clearTimeout(this.rotateWrapperSecondTimer); + } + }, { + key: 'renderChildren', + value: function renderChildren() { + var prepareStyles = this.context.muiTheme.prepareStyles; + + var paperSize = this.getPaperSize(); + + var childrenCmp = null; + if (this.props.status !== 'ready') { + var circleStyle = this.getCircleStyle(paperSize); + childrenCmp = _react2.default.createElement( + 'div', + { + ref: 'wrapper', + style: prepareStyles({ + transition: _transitions2.default.create('transform', '20s', null, 'linear'), + width: '100%', + height: '100%' + }) + }, + _react2.default.createElement( + 'svg', + { + style: { + width: paperSize, + height: paperSize + }, + viewBox: '0 0 ' + VIEWBOX_SIZE + ' ' + VIEWBOX_SIZE + }, + _react2.default.createElement('circle', (0, _extends3.default)({ + ref: 'path', + style: prepareStyles((0, _simpleAssign2.default)(circleStyle.style, { + transition: _transitions2.default.create('all', '1.5s', null, 'ease-in-out') + })) + }, circleStyle.attr)) + ) + ); + } else { + var _circleStyle = this.getCircleStyle(paperSize); + var polygonStyle = this.getPolygonStyle(paperSize); + childrenCmp = _react2.default.createElement( + 'svg', + { + style: { + width: paperSize, + height: paperSize + }, + viewBox: '0 0 ' + VIEWBOX_SIZE + ' ' + VIEWBOX_SIZE + }, + _react2.default.createElement('circle', (0, _extends3.default)({ + style: prepareStyles(_circleStyle.style) + }, _circleStyle.attr)), + _react2.default.createElement('polygon', (0, _extends3.default)({ + style: prepareStyles(polygonStyle.style) + }, polygonStyle.attr)) + ); + } + + return childrenCmp; + } + }, { + key: 'getTheme', + value: function getTheme() { + return this.context.muiTheme.refreshIndicator; + } + }, { + key: 'getPaddingSize', + value: function getPaddingSize() { + var padding = this.props.size * 0.1; + return padding; + } + }, { + key: 'getPaperSize', + value: function getPaperSize() { + return this.props.size - this.getPaddingSize() * 2; + } + }, { + key: 'getCircleAttr', + value: function getCircleAttr() { + return { + radiu: VIEWBOX_SIZE / 2 - 5, + originX: VIEWBOX_SIZE / 2, + originY: VIEWBOX_SIZE / 2, + strokeWidth: 3 + }; + } + }, { + key: 'getArcDeg', + value: function getArcDeg() { + var p = this.props.percentage / 100; + + var beginDeg = p * 120; + var endDeg = p * 410; + return [beginDeg, endDeg]; + } + }, { + key: 'getFactor', + value: function getFactor() { + var p = this.props.percentage / 100; + var p1 = Math.min(1, p / 0.4); + + return p1; + } + }, { + key: 'getCircleStyle', + value: function getCircleStyle() { + var isLoading = this.props.status === 'loading'; + var p1 = isLoading ? 1 : this.getFactor(); + var circle = this.getCircleAttr(); + var perimeter = Math.PI * 2 * circle.radiu; + + var _getArcDeg = this.getArcDeg(), + _getArcDeg2 = (0, _slicedToArray3.default)(_getArcDeg, 2), + beginDeg = _getArcDeg2[0], + endDeg = _getArcDeg2[1]; + + var arcLen = (endDeg - beginDeg) * perimeter / 360; + var dashOffset = -beginDeg * perimeter / 360; + + var theme = this.getTheme(); + return { + style: { + strokeDasharray: arcLen + ', ' + (perimeter - arcLen), + strokeDashoffset: dashOffset, + stroke: isLoading || this.props.percentage === 100 ? this.props.loadingColor || theme.loadingStrokeColor : this.props.color || theme.strokeColor, + strokeLinecap: 'round', + opacity: p1, + strokeWidth: circle.strokeWidth * p1, + fill: 'none' + }, + attr: { + cx: circle.originX, + cy: circle.originY, + r: circle.radiu + } + }; + } + }, { + key: 'getPolygonStyle', + value: function getPolygonStyle() { + var p1 = this.getFactor(); + var circle = this.getCircleAttr(); + + var triangleCx = circle.originX + circle.radiu; + var triangleCy = circle.originY; + var dx = circle.strokeWidth * 7 / 4 * p1; + var trianglePath = triangleCx - dx + ',' + triangleCy + ' ' + (triangleCx + dx) + ',' + triangleCy + ' ' + triangleCx + ',' + (triangleCy + dx); + + var _getArcDeg3 = this.getArcDeg(), + _getArcDeg4 = (0, _slicedToArray3.default)(_getArcDeg3, 2), + endDeg = _getArcDeg4[1]; + + var theme = this.getTheme(); + return { + style: { + fill: this.props.percentage === 100 ? this.props.loadingColor || theme.loadingStrokeColor : this.props.color || theme.strokeColor, + transform: 'rotate(' + endDeg + 'deg)', + transformOrigin: circle.originX + 'px ' + circle.originY + 'px', + opacity: p1 + }, + attr: { + points: trianglePath + } + }; + } + }, { + key: 'scalePath', + value: function scalePath(path, step) { + var _this2 = this; + + if (this.props.status !== 'loading') return; + + var currStep = (step || 0) % 3; + + var circle = this.getCircleAttr(); + var perimeter = Math.PI * 2 * circle.radiu; + var arcLen = perimeter * 0.64; + + var strokeDasharray = void 0; + var strokeDashoffset = void 0; + var transitionDuration = void 0; + + if (currStep === 0) { + strokeDasharray = '1, 200'; + strokeDashoffset = 0; + transitionDuration = '0ms'; + } else if (currStep === 1) { + strokeDasharray = arcLen + ', 200'; + strokeDashoffset = -15; + transitionDuration = '750ms'; + } else { + strokeDasharray = arcLen + ', 200'; + strokeDashoffset = -(perimeter - 1); + transitionDuration = '850ms'; + } + + _autoPrefix2.default.set(path.style, 'strokeDasharray', strokeDasharray); + _autoPrefix2.default.set(path.style, 'strokeDashoffset', strokeDashoffset); + _autoPrefix2.default.set(path.style, 'transitionDuration', transitionDuration); + + this.scalePathTimer = setTimeout(function () { + return _this2.scalePath(path, currStep + 1); + }, currStep ? 750 : 250); + } + }, { + key: 'rotateWrapper', + value: function rotateWrapper(wrapper) { + var _this3 = this; + + if (this.props.status !== 'loading') return; + + _autoPrefix2.default.set(wrapper.style, 'transform', null); + _autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(0deg)'); + _autoPrefix2.default.set(wrapper.style, 'transitionDuration', '0ms'); + + this.rotateWrapperSecondTimer = setTimeout(function () { + _autoPrefix2.default.set(wrapper.style, 'transform', 'rotate(1800deg)'); + _autoPrefix2.default.set(wrapper.style, 'transitionDuration', '10s'); + _autoPrefix2.default.set(wrapper.style, 'transitionTimingFunction', 'linear'); + }, 50); + + this.rotateWrapperTimer = setTimeout(function () { + return _this3.rotateWrapper(wrapper); + }, 10050); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + style = _props.style, + top = _props.top, + left = _props.left, + percentage = _props.percentage, + status = _props.status, + loadingColor = _props.loadingColor, + other = (0, _objectWithoutProperties3.default)(_props, ['style', 'top', 'left', 'percentage', 'status', 'loadingColor']); + + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + _Paper2.default, + (0, _extends3.default)({ + circle: true, + style: (0, _simpleAssign2.default)(styles.root, style) + }, other), + this.renderChildren() + ); + } + }]); + return RefreshIndicator; +}(_react.Component); + +RefreshIndicator.defaultProps = { + percentage: 0, + size: 40, + status: 'hide' +}; +RefreshIndicator.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? RefreshIndicator.propTypes = { + /** + * Override the theme's color of the indicator while it's status is + * "ready" and it's percentage is less than 100. + */ + color: _propTypes2.default.string, + /** + * The absolute left position of the indicator in pixels. + */ + left: _propTypes2.default.number.isRequired, + /** + * Override the theme's color of the indicator while + * it's status is "loading" or when it's percentage is 100. + */ + loadingColor: _propTypes2.default.string, + /** + * The confirmation progress to fetch data. Max value is 100. + */ + percentage: _propTypes2.default.number, + /** + * Size in pixels. + */ + size: _propTypes2.default.number, + /** + * The display status of the indicator. If the status is + * "ready", the indicator will display the ready state + * arrow. If the status is "loading", it will display + * the loading progress indicator. If the status is "hide", + * the indicator will be hidden. + */ + status: _propTypes2.default.oneOf(['ready', 'loading', 'hide']), + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The absolute top position of the indicator in pixels. + */ + top: _propTypes2.default.number.isRequired +} : void 0; +exports.default = RefreshIndicator; \ No newline at end of file diff --git a/RefreshIndicator/index.js b/RefreshIndicator/index.js new file mode 100644 index 00000000000000..da21d4e593a28d --- /dev/null +++ b/RefreshIndicator/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _RefreshIndicator = require('./RefreshIndicator'); + +var _RefreshIndicator2 = _interopRequireDefault(_RefreshIndicator); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _RefreshIndicator2.default; \ No newline at end of file diff --git a/SelectField/SelectField.js b/SelectField/SelectField.js new file mode 100644 index 00000000000000..a09271a621ac29 --- /dev/null +++ b/SelectField/SelectField.js @@ -0,0 +1,321 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _TextField = require('../TextField'); + +var _TextField2 = _interopRequireDefault(_TextField); + +var _DropDownMenu = require('../DropDownMenu'); + +var _DropDownMenu2 = _interopRequireDefault(_DropDownMenu); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props) { + return { + label: { + paddingLeft: 0, + top: props.floatingLabelText ? 6 : -4 + }, + icon: { + right: 0, + top: props.floatingLabelText ? 8 : 0 + }, + hideDropDownUnderline: { + borderTop: 'none' + }, + dropDownMenu: { + display: 'block' + } + }; +} + +var SelectField = function (_Component) { + (0, _inherits3.default)(SelectField, _Component); + + function SelectField() { + (0, _classCallCheck3.default)(this, SelectField); + return (0, _possibleConstructorReturn3.default)(this, (SelectField.__proto__ || (0, _getPrototypeOf2.default)(SelectField)).apply(this, arguments)); + } + + (0, _createClass3.default)(SelectField, [{ + key: 'render', + value: function render() { + var _props = this.props, + autoWidth = _props.autoWidth, + multiple = _props.multiple, + children = _props.children, + style = _props.style, + labelStyle = _props.labelStyle, + iconStyle = _props.iconStyle, + id = _props.id, + underlineDisabledStyle = _props.underlineDisabledStyle, + underlineFocusStyle = _props.underlineFocusStyle, + menuItemStyle = _props.menuItemStyle, + selectedMenuItemStyle = _props.selectedMenuItemStyle, + underlineStyle = _props.underlineStyle, + dropDownMenuProps = _props.dropDownMenuProps, + errorStyle = _props.errorStyle, + disabled = _props.disabled, + floatingLabelFixed = _props.floatingLabelFixed, + floatingLabelText = _props.floatingLabelText, + floatingLabelStyle = _props.floatingLabelStyle, + hintStyle = _props.hintStyle, + hintText = _props.hintText, + fullWidth = _props.fullWidth, + errorText = _props.errorText, + listStyle = _props.listStyle, + maxHeight = _props.maxHeight, + menuStyle = _props.menuStyle, + onFocus = _props.onFocus, + onBlur = _props.onBlur, + onChange = _props.onChange, + selectionRenderer = _props.selectionRenderer, + value = _props.value, + other = (0, _objectWithoutProperties3.default)(_props, ['autoWidth', 'multiple', 'children', 'style', 'labelStyle', 'iconStyle', 'id', 'underlineDisabledStyle', 'underlineFocusStyle', 'menuItemStyle', 'selectedMenuItemStyle', 'underlineStyle', 'dropDownMenuProps', 'errorStyle', 'disabled', 'floatingLabelFixed', 'floatingLabelText', 'floatingLabelStyle', 'hintStyle', 'hintText', 'fullWidth', 'errorText', 'listStyle', 'maxHeight', 'menuStyle', 'onFocus', 'onBlur', 'onChange', 'selectionRenderer', 'value']); + + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + _TextField2.default, + (0, _extends3.default)({}, other, { + style: style, + disabled: disabled, + floatingLabelFixed: floatingLabelFixed, + floatingLabelText: floatingLabelText, + floatingLabelStyle: floatingLabelStyle, + hintStyle: hintStyle, + hintText: !hintText && !floatingLabelText ? ' ' : hintText, + fullWidth: fullWidth, + errorText: errorText, + underlineStyle: underlineStyle, + errorStyle: errorStyle, + onFocus: onFocus, + onBlur: onBlur, + id: id, + underlineDisabledStyle: underlineDisabledStyle, + underlineFocusStyle: underlineFocusStyle + }), + _react2.default.createElement( + _DropDownMenu2.default, + (0, _extends3.default)({ + disabled: disabled, + style: (0, _simpleAssign2.default)(styles.dropDownMenu, menuStyle), + labelStyle: (0, _simpleAssign2.default)(styles.label, labelStyle), + iconStyle: (0, _simpleAssign2.default)(styles.icon, iconStyle), + menuItemStyle: menuItemStyle, + selectedMenuItemStyle: selectedMenuItemStyle, + underlineStyle: styles.hideDropDownUnderline, + listStyle: listStyle, + autoWidth: autoWidth, + value: value, + onChange: onChange, + maxHeight: maxHeight, + multiple: multiple, + selectionRenderer: selectionRenderer + }, dropDownMenuProps), + children + ) + ); + } + }]); + return SelectField; +}(_react.Component); + +SelectField.defaultProps = { + autoWidth: false, + disabled: false, + fullWidth: false, + multiple: false +}; +SelectField.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? SelectField.propTypes = { + /** + * If true, the width will automatically be set according to the + * items inside the menu. + * To control the width in CSS instead, leave this prop set to `false`. + */ + autoWidth: _propTypes2.default.bool, + /** + * The `MenuItem` elements to populate the select field with. + * If the menu items have a `label` prop, that value will + * represent the selected menu item in the rendered select field. + */ + children: _propTypes2.default.node, + /** + * If true, the select field will be disabled. + */ + disabled: _propTypes2.default.bool, + /** + * Object that can handle and override any property of component DropDownMenu. + */ + dropDownMenuProps: _propTypes2.default.object, + /** + * Override the inline-styles of the error element. + */ + errorStyle: _propTypes2.default.object, + /** + * The error content to display. + */ + errorText: _propTypes2.default.node, + /** + * If true, the floating label will float even when no value is selected. + */ + floatingLabelFixed: _propTypes2.default.bool, + /** + * Override the inline-styles of the floating label. + */ + floatingLabelStyle: _propTypes2.default.object, + /** + * The content of the floating label. + */ + floatingLabelText: _propTypes2.default.node, + /** + * If true, the select field will take up the full width of its container. + */ + fullWidth: _propTypes2.default.bool, + /** + * Override the inline-styles of the hint element. + */ + hintStyle: _propTypes2.default.object, + /** + * The hint content to display. + */ + hintText: _propTypes2.default.node, + /** + * Override the inline-styles of the icon element. + */ + iconStyle: _propTypes2.default.object, + /** + * The id prop for the text field. + */ + id: _propTypes2.default.string, + /** + * Override the label style when the select field is inactive. + */ + labelStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the underlying `List` element. + */ + listStyle: _propTypes2.default.object, + /** + * Override the default max-height of the underlying `DropDownMenu` element. + */ + maxHeight: _propTypes2.default.number, + /** + * Override the inline-styles of menu items. + */ + menuItemStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the underlying `DropDownMenu` element. + */ + menuStyle: _propTypes2.default.object, + /** + * If true, `value` must be an array and the menu will support + * multiple selections. + */ + multiple: _propTypes2.default.bool, + /** @ignore */ + onBlur: _propTypes2.default.func, + /** + * Callback function fired when a menu item is selected. + * + * @param {object} event Click event targeting the menu item + * that was selected. + * @param {number} key The index of the selected menu item, or undefined + * if `multiple` is true. + * @param {any} payload If `multiple` is true, the menu's `value` + * array with either the menu item's `value` added (if + * it wasn't already selected) or omitted (if it was already selected). + * Otherwise, the `value` of the menu item. + */ + onChange: _propTypes2.default.func, + /** @ignore */ + onFocus: _propTypes2.default.func, + /** + * Override the inline-styles of selected menu items. + */ + selectedMenuItemStyle: _propTypes2.default.object, + /** + * Customize the rendering of the selected item. + * + * @param {any} value If `multiple` is true, the menu's `value` + * array with either the menu item's `value` added (if + * it wasn't already selected) or omitted (if it was already selected). + * Otherwise, the `value` of the menu item. + * @param {any} menuItem The selected `MenuItem`. + * If `multiple` is true, this will be an array with the `MenuItem`s matching the `value`s parameter. + */ + selectionRenderer: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Override the inline-styles of the underline element when the select + * field is disabled. + */ + underlineDisabledStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the underline element when the select field + * is focused. + */ + underlineFocusStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the underline element. + */ + underlineStyle: _propTypes2.default.object, + /** + * If `multiple` is true, an array of the `value`s of the selected + * menu items. Otherwise, the `value` of the selected menu item. + * If provided, the menu will be a controlled component. + */ + value: _propTypes2.default.any +} : void 0; +exports.default = SelectField; \ No newline at end of file diff --git a/SelectField/index.js b/SelectField/index.js new file mode 100644 index 00000000000000..a5ab23fc1e2c79 --- /dev/null +++ b/SelectField/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _SelectField = require('./SelectField'); + +var _SelectField2 = _interopRequireDefault(_SelectField); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _SelectField2.default; \ No newline at end of file diff --git a/Slider/Slider.js b/Slider/Slider.js new file mode 100644 index 00000000000000..bc12cfb241a1a1 --- /dev/null +++ b/Slider/Slider.js @@ -0,0 +1,883 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); + +var _defineProperty3 = _interopRequireDefault(_defineProperty2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _FocusRipple = require('../internal/FocusRipple'); + +var _FocusRipple2 = _interopRequireDefault(_FocusRipple); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +/** + * Verifies min/max range. + * @param {Object} props Properties of the React component. + * @param {String} propName Name of the property to validate. + * @param {String} componentName Name of the component whose property is being validated. + * @returns {Object} Returns an Error if min >= max otherwise null. + */ +var minMaxPropType = function minMaxPropType(props, propName, componentName) { + for (var _len = arguments.length, rest = Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) { + rest[_key - 3] = arguments[_key]; + } + + var error = _propTypes2.default.number.apply(_propTypes2.default, [props, propName, componentName].concat(rest)); + if (error !== null) { + return error; + } + + if (props.min >= props.max) { + var errorMsg = propName === 'min' ? 'min should be less than max' : 'max should be greater than min'; + return new Error(errorMsg); + } +}; + +/** + * Verifies value is within the min/max range. + * @param {Object} props Properties of the React component. + * @param {String} propName Name of the property to validate. + * @param {String} componentName Name of the component whose property is being validated. + * @returns {Object} Returns an Error if the value is not within the range otherwise null. + */ +var valueInRangePropType = function valueInRangePropType(props, propName, componentName) { + for (var _len2 = arguments.length, rest = Array(_len2 > 3 ? _len2 - 3 : 0), _key2 = 3; _key2 < _len2; _key2++) { + rest[_key2 - 3] = arguments[_key2]; + } + + var error = _propTypes2.default.number.apply(_propTypes2.default, [props, propName, componentName].concat(rest)); + if (error !== null) { + return error; + } + + var value = props[propName]; + if (value < props.min || props.max < value) { + return new Error(propName + ' should be within the range specified by min and max'); + } +}; + +var crossAxisProperty = { + x: 'height', + 'x-reverse': 'height', + y: 'width', + 'y-reverse': 'width' +}; + +var crossAxisOffsetProperty = { + x: 'top', + 'x-reverse': 'top', + y: 'left', + 'y-reverse': 'left' +}; + +var mainAxisProperty = { + x: 'width', + 'x-reverse': 'width', + y: 'height', + 'y-reverse': 'height' +}; + +var mainAxisMarginFromEnd = { + x: 'marginRight', + 'x-reverse': 'marginLeft', + y: 'marginTop', + 'y-reverse': 'marginBottom' +}; + +var mainAxisMarginFromStart = { + x: 'marginLeft', + 'x-reverse': 'marginRight', + y: 'marginBottom', + 'y-reverse': 'marginTop' +}; + +var mainAxisOffsetProperty = { + x: 'left', + 'x-reverse': 'right', + y: 'bottom', + 'y-reverse': 'top' +}; + +var mainAxisClientProperty = { + x: 'clientWidth', + 'x-reverse': 'clientWidth', + y: 'clientHeight', + 'y-reverse': 'clientHeight' +}; + +var mainAxisClientOffsetProperty = { + x: 'clientX', + 'x-reverse': 'clientX', + y: 'clientY', + 'y-reverse': 'clientY' +}; + +var reverseMainAxisOffsetProperty = { + x: 'right', + 'x-reverse': 'left', + y: 'top', + 'y-reverse': 'bottom' +}; + +var isMouseControlInverted = function isMouseControlInverted(axis) { + return axis === 'x-reverse' || axis === 'y'; +}; + +var calculateAxis = function calculateAxis(axis, isRtl) { + if (isRtl) { + switch (axis) { + case 'x': + return 'x-reverse'; + case 'x-reverse': + return 'x'; + } + } + return axis; +}; + +function getPercent(value, min, max) { + var percent = (value - min) / (max - min); + if (isNaN(percent)) { + percent = 0; + } + + return percent; +} + +var getStyles = function getStyles(props, context, state) { + var _slider, _track, _filledAndRemaining, _handle, _objectAssign2, _objectAssign3; + + var axis = props.axis, + disabled = props.disabled, + max = props.max, + min = props.min; + var _context$muiTheme = context.muiTheme, + isRtl = _context$muiTheme.isRtl, + _context$muiTheme$sli = _context$muiTheme.slider, + handleColorZero = _context$muiTheme$sli.handleColorZero, + handleFillColor = _context$muiTheme$sli.handleFillColor, + handleSize = _context$muiTheme$sli.handleSize, + handleSizeDisabled = _context$muiTheme$sli.handleSizeDisabled, + handleSizeActive = _context$muiTheme$sli.handleSizeActive, + trackSize = _context$muiTheme$sli.trackSize, + trackColor = _context$muiTheme$sli.trackColor, + trackColorSelected = _context$muiTheme$sli.trackColorSelected, + rippleColor = _context$muiTheme$sli.rippleColor, + selectionColor = _context$muiTheme$sli.selectionColor; + + + var fillGutter = handleSize / 2; + var disabledGutter = trackSize + handleSizeDisabled / 2; + var calcDisabledSpacing = disabled ? ' - ' + disabledGutter + 'px' : ''; + var percent = getPercent(state.value, min, max); + var calculatedAxis = calculateAxis(axis, isRtl); + + var styles = { + slider: (_slider = { + touchCallout: 'none', + userSelect: 'none', + cursor: 'default' + }, (0, _defineProperty3.default)(_slider, crossAxisProperty[calculatedAxis], handleSizeActive), (0, _defineProperty3.default)(_slider, mainAxisProperty[calculatedAxis], '100%'), (0, _defineProperty3.default)(_slider, 'position', 'relative'), (0, _defineProperty3.default)(_slider, 'marginTop', 24), (0, _defineProperty3.default)(_slider, 'marginBottom', 48), _slider), + track: (_track = { + position: 'absolute' + }, (0, _defineProperty3.default)(_track, crossAxisOffsetProperty[calculatedAxis], (handleSizeActive - trackSize) / 2), (0, _defineProperty3.default)(_track, mainAxisOffsetProperty[calculatedAxis], 0), (0, _defineProperty3.default)(_track, mainAxisProperty[calculatedAxis], '100%'), (0, _defineProperty3.default)(_track, crossAxisProperty[calculatedAxis], trackSize), _track), + filledAndRemaining: (_filledAndRemaining = { + directionInvariant: true, + position: 'absolute' + }, (0, _defineProperty3.default)(_filledAndRemaining, crossAxisOffsetProperty, 0), (0, _defineProperty3.default)(_filledAndRemaining, crossAxisProperty[calculatedAxis], '100%'), (0, _defineProperty3.default)(_filledAndRemaining, 'transition', _transitions2.default.easeOut(null, 'margin')), _filledAndRemaining), + handle: (_handle = { + directionInvariant: true, + boxSizing: 'border-box', + position: 'absolute', + cursor: 'pointer', + pointerEvents: 'inherit' + }, (0, _defineProperty3.default)(_handle, crossAxisOffsetProperty[calculatedAxis], 0), (0, _defineProperty3.default)(_handle, mainAxisOffsetProperty[calculatedAxis], percent === 0 ? '0%' : percent * 100 + '%'), (0, _defineProperty3.default)(_handle, 'zIndex', 1), (0, _defineProperty3.default)(_handle, 'margin', { + x: trackSize / 2 + 'px 0 0 0', + 'x-reverse': trackSize / 2 + 'px 0 0 0', + y: '0 0 0 ' + trackSize / 2 + 'px', + 'y-reverse': '0 0 0 ' + trackSize / 2 + 'px' + }[calculatedAxis]), (0, _defineProperty3.default)(_handle, 'width', handleSize), (0, _defineProperty3.default)(_handle, 'height', handleSize), (0, _defineProperty3.default)(_handle, 'backgroundColor', selectionColor), (0, _defineProperty3.default)(_handle, 'backgroundClip', 'padding-box'), (0, _defineProperty3.default)(_handle, 'border', '0px solid transparent'), (0, _defineProperty3.default)(_handle, 'borderRadius', '50%'), (0, _defineProperty3.default)(_handle, 'transform', { + x: 'translate(-50%, -50%)', + 'x-reverse': 'translate(50%, -50%)', + y: 'translate(-50%, 50%)', + 'y-reverse': 'translate(-50%, -50%)' + }[calculatedAxis]), (0, _defineProperty3.default)(_handle, 'transition', _transitions2.default.easeOut('450ms', 'background') + ', ' + _transitions2.default.easeOut('450ms', 'border-color') + ', ' + _transitions2.default.easeOut('450ms', 'width') + ', ' + _transitions2.default.easeOut('450ms', 'height')), (0, _defineProperty3.default)(_handle, 'overflow', 'visible'), (0, _defineProperty3.default)(_handle, 'outline', 'none'), _handle), + handleWhenDisabled: { + boxSizing: 'content-box', + cursor: 'not-allowed', + backgroundColor: trackColor, + width: handleSizeDisabled, + height: handleSizeDisabled, + border: 'none' + }, + handleWhenPercentZero: { + border: trackSize + 'px solid ' + handleColorZero, + backgroundColor: handleFillColor, + boxShadow: 'none' + }, + handleWhenPercentZeroAndDisabled: { + cursor: 'not-allowed', + width: handleSizeDisabled, + height: handleSizeDisabled + }, + handleWhenPercentZeroAndFocused: { + border: trackSize + 'px solid ' + trackColorSelected + }, + handleWhenActive: { + width: handleSizeActive, + height: handleSizeActive + }, + ripple: { + height: handleSize, + width: handleSize, + overflow: 'visible' + }, + rippleWhenPercentZero: { + top: -trackSize, + left: -trackSize + }, + rippleInner: { + height: '300%', + width: '300%', + top: -handleSize, + left: -handleSize + }, + rippleColor: { + fill: percent === 0 ? handleColorZero : rippleColor + } + }; + styles.filled = (0, _simpleAssign2.default)({}, styles.filledAndRemaining, (_objectAssign2 = {}, (0, _defineProperty3.default)(_objectAssign2, mainAxisOffsetProperty[calculatedAxis], 0), (0, _defineProperty3.default)(_objectAssign2, 'backgroundColor', disabled ? trackColor : selectionColor), (0, _defineProperty3.default)(_objectAssign2, mainAxisMarginFromEnd[calculatedAxis], fillGutter), (0, _defineProperty3.default)(_objectAssign2, mainAxisProperty[calculatedAxis], 'calc(' + percent * 100 + '%' + calcDisabledSpacing + ')'), _objectAssign2)); + styles.remaining = (0, _simpleAssign2.default)({}, styles.filledAndRemaining, (_objectAssign3 = {}, (0, _defineProperty3.default)(_objectAssign3, reverseMainAxisOffsetProperty[calculatedAxis], 0), (0, _defineProperty3.default)(_objectAssign3, 'backgroundColor', (state.hovered || state.focused) && !disabled ? trackColorSelected : trackColor), (0, _defineProperty3.default)(_objectAssign3, mainAxisMarginFromStart[calculatedAxis], fillGutter), (0, _defineProperty3.default)(_objectAssign3, mainAxisProperty[calculatedAxis], 'calc(' + (1 - percent) * 100 + '%' + calcDisabledSpacing + ')'), _objectAssign3)); + + return styles; +}; + +var Slider = function (_Component) { + (0, _inherits3.default)(Slider, _Component); + + function Slider() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Slider); + + for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { + args[_key3] = arguments[_key3]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Slider.__proto__ || (0, _getPrototypeOf2.default)(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + active: false, + dragging: false, + focused: false, + hovered: false, + value: 0 + }, _this.track = null, _this.handle = null, _this.resolveValue = function (value, min, max) { + if (value > max) { + return max; + } + + if (value < min) { + return min; + } + + return value; + }, _this.handleKeyDown = function (event) { + var _this$props = _this.props, + axis = _this$props.axis, + min = _this$props.min, + max = _this$props.max, + step = _this$props.step; + var isRtl = _this.context.muiTheme.isRtl; + + + var calculatedAxis = calculateAxis(axis, isRtl); + + var action = void 0; + + switch ((0, _keycode2.default)(event)) { + case 'page down': + case 'down': + if (calculatedAxis === 'y-reverse') { + action = 'increase'; + } else { + action = 'decrease'; + } + break; + case 'left': + if (calculatedAxis === 'x-reverse') { + action = 'increase'; + } else { + action = 'decrease'; + } + break; + case 'page up': + case 'up': + if (calculatedAxis === 'y-reverse') { + action = 'decrease'; + } else { + action = 'increase'; + } + break; + case 'right': + if (calculatedAxis === 'x-reverse') { + action = 'decrease'; + } else { + action = 'increase'; + } + break; + case 'home': + action = 'min'; + break; + case 'end': + action = 'max'; + break; + } + + if (action) { + var newValue = void 0; + + // Cancel scroll + event.preventDefault(); + + switch (action) { + case 'decrease': + newValue = _this.state.value - step; + break; + case 'increase': + newValue = _this.state.value + step; + break; + case 'min': + newValue = min; + break; + case 'max': + newValue = max; + break; + } + + // We need to use toFixed() because of float point errors. + // For example, 0.01 + 0.06 = 0.06999999999999999 + newValue = _this.resolveValue(parseFloat(newValue.toFixed(5)), min, max); + + if (_this.state.value !== newValue) { + _this.setState({ + value: newValue + }); + + if (_this.props.onChange) { + _this.props.onChange(event, newValue); + } + } + } + }, _this.handleDragMouseMove = function (event) { + _this.onDragUpdate(event, 'mouse'); + }, _this.handleTouchMove = function (event) { + _this.onDragUpdate(event, 'touch'); + }, _this.handleMouseEnd = function (event) { + document.removeEventListener('mousemove', _this.handleDragMouseMove); + document.removeEventListener('mouseup', _this.handleMouseEnd); + + _this.onDragStop(event); + }, _this.handleTouchEnd = function (event) { + document.removeEventListener('touchmove', _this.handleTouchMove); + document.removeEventListener('touchup', _this.handleTouchEnd); + document.removeEventListener('touchend', _this.handleTouchEnd); + document.removeEventListener('touchcancel', _this.handleTouchEnd); + + _this.onDragStop(event); + }, _this.handleTouchStart = function (event) { + var _this$props2 = _this.props, + axis = _this$props2.axis, + disabled = _this$props2.disabled; + var isRtl = _this.context.muiTheme.isRtl; + + + if (disabled) { + return; + } + + var calculatedAxis = calculateAxis(axis, isRtl); + + var position = void 0; + if (isMouseControlInverted(calculatedAxis)) { + position = _this.getTrackOffset() - event.touches[0][mainAxisClientOffsetProperty[calculatedAxis]]; + } else { + position = event.touches[0][mainAxisClientOffsetProperty[calculatedAxis]] - _this.getTrackOffset(); + } + _this.setValueFromPosition(event, position); + + document.addEventListener('touchmove', _this.handleTouchMove); + document.addEventListener('touchup', _this.handleTouchEnd); + document.addEventListener('touchend', _this.handleTouchEnd); + document.addEventListener('touchcancel', _this.handleTouchEnd); + + _this.onDragStart(event); + + // Cancel scroll and context menu + event.preventDefault(); + }, _this.handleFocus = function (event) { + _this.setState({ + focused: true + }); + + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + }, _this.handleBlur = function (event) { + _this.setState({ + focused: false, + active: false + }); + + if (_this.props.onBlur) { + _this.props.onBlur(event); + } + }, _this.handleMouseDown = function (event) { + var _this$props3 = _this.props, + axis = _this$props3.axis, + disabled = _this$props3.disabled; + var isRtl = _this.context.muiTheme.isRtl; + + + if (disabled) { + return; + } + + var calculatedAxis = calculateAxis(axis, isRtl); + + var position = void 0; + if (isMouseControlInverted(calculatedAxis)) { + position = _this.getTrackOffset() - event[mainAxisClientOffsetProperty[calculatedAxis]]; + } else { + position = event[mainAxisClientOffsetProperty[calculatedAxis]] - _this.getTrackOffset(); + } + _this.setValueFromPosition(event, position); + + document.addEventListener('mousemove', _this.handleDragMouseMove); + document.addEventListener('mouseup', _this.handleMouseEnd); + + // Cancel text selection + event.preventDefault(); + + // Set focus manually since we called preventDefault() + _this.handle.focus(); + + _this.onDragStart(event); + }, _this.handleMouseUp = function () { + if (!_this.props.disabled) { + _this.setState({ + active: false + }); + } + }, _this.handleMouseEnter = function () { + _this.setState({ + hovered: true + }); + }, _this.handleMouseLeave = function () { + _this.setState({ + hovered: false + }); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Slider, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var _props = this.props, + defaultValue = _props.defaultValue, + min = _props.min, + max = _props.max; + var value = this.props.value; + + + if (value === undefined) { + value = defaultValue !== undefined ? defaultValue : min; + } + + this.setState({ + value: this.resolveValue(value, min, max) + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.value !== undefined && !this.state.dragging) { + var _nextProps$min = nextProps.min, + min = _nextProps$min === undefined ? this.props.min : _nextProps$min, + _nextProps$max = nextProps.max, + max = _nextProps$max === undefined ? this.props.max : _nextProps$max; + + + this.setState({ + value: this.resolveValue(nextProps.value, min, max) + }); + } + } + }, { + key: 'getValue', + value: function getValue() { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI Slider: getValue() method is deprecated.\n Use the onChange callbacks instead.\n It will be removed with v0.17.0.') : void 0; + + return this.state.value; + } + }, { + key: 'clearValue', + value: function clearValue() { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI Slider: clearValue() method is deprecated.\n Use the value property to control the component instead.\n It will be removed with v0.17.0.') : void 0; + + this.setState({ + value: this.props.min + }); + } + }, { + key: 'getTrackOffset', + value: function getTrackOffset() { + var axis = this.props.axis; + var isRtl = this.context.muiTheme.isRtl; + + + var calculatedAxis = calculateAxis(axis, isRtl); + + if (!this.track) return 0; + return this.track.getBoundingClientRect()[mainAxisOffsetProperty[calculatedAxis]]; + } + }, { + key: 'onDragStart', + value: function onDragStart(event) { + this.setState({ + dragging: true, + active: true + }); + + if (this.props.onDragStart) { + this.props.onDragStart(event); + } + } + }, { + key: 'onDragUpdate', + value: function onDragUpdate(event, type) { + var _this2 = this; + + var _props2 = this.props, + axis = _props2.axis, + disabled = _props2.disabled; + var isRtl = this.context.muiTheme.isRtl; + + + if (this.dragRunning) { + return; + } + this.dragRunning = true; + + requestAnimationFrame(function () { + _this2.dragRunning = false; + + var calculatedAxis = calculateAxis(axis, isRtl); + var source = type === 'touch' ? event.touches[0] : event; + + var position = void 0; + if (isMouseControlInverted(calculatedAxis)) { + position = _this2.getTrackOffset() - source[mainAxisClientOffsetProperty[calculatedAxis]]; + } else { + position = source[mainAxisClientOffsetProperty[calculatedAxis]] - _this2.getTrackOffset(); + } + + if (!disabled) { + _this2.setValueFromPosition(event, position); + } + }); + } + }, { + key: 'onDragStop', + value: function onDragStop(event) { + this.setState({ + dragging: false, + active: false + }); + + if (this.props.onDragStop) { + this.props.onDragStop(event); + } + } + }, { + key: 'setValueFromPosition', + value: function setValueFromPosition(event, position) { + var _props3 = this.props, + axis = _props3.axis, + step = _props3.step, + min = _props3.min, + max = _props3.max; + var isRtl = this.context.muiTheme.isRtl; + + + var calculatedAxis = calculateAxis(axis, isRtl); + var positionMax = this.track[mainAxisClientProperty[calculatedAxis]]; + + var value = void 0; + + if (position <= 0) { + value = min; + } else if (position >= positionMax) { + value = max; + } else { + value = position / positionMax * (max - min); + value = Math.round(value / step) * step + min; + value = parseFloat(value.toFixed(5)); + } + + value = this.resolveValue(value, min, max); + + if (this.state.value !== value) { + this.setState({ + value: value + }); + + if (this.props.onChange) { + this.props.onChange(event, value); + } + } + } + }, { + key: 'render', + value: function render() { + var _this3 = this; + + var _props4 = this.props, + axis = _props4.axis, + disabled = _props4.disabled, + disableFocusRipple = _props4.disableFocusRipple, + max = _props4.max, + min = _props4.min, + name = _props4.name, + onBlur = _props4.onBlur, + onChange = _props4.onChange, + onDragStart = _props4.onDragStart, + onDragStop = _props4.onDragStop, + onFocus = _props4.onFocus, + required = _props4.required, + sliderStyle = _props4.sliderStyle, + step = _props4.step, + style = _props4.style, + propValue = _props4.value, + other = (0, _objectWithoutProperties3.default)(_props4, ['axis', 'disabled', 'disableFocusRipple', 'max', 'min', 'name', 'onBlur', 'onChange', 'onDragStart', 'onDragStop', 'onFocus', 'required', 'sliderStyle', 'step', 'style', 'value']); + var _state = this.state, + active = _state.active, + focused = _state.focused, + hovered = _state.hovered, + value = _state.value; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + var percent = getPercent(value, min, max); + + var handleStyles = {}; + if (percent === 0) { + handleStyles = (0, _simpleAssign2.default)({}, styles.handle, styles.handleWhenPercentZero, active && styles.handleWhenActive, (hovered || focused) && !disabled && styles.handleWhenPercentZeroAndFocused, disabled && styles.handleWhenPercentZeroAndDisabled); + } else { + handleStyles = (0, _simpleAssign2.default)({}, styles.handle, active && styles.handleWhenActive, disabled && styles.handleWhenDisabled); + } + + var rippleStyle = (0, _simpleAssign2.default)({}, styles.ripple, percent === 0 && styles.rippleWhenPercentZero); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)({}, style)) }), + _react2.default.createElement( + 'div', + { + style: prepareStyles((0, _simpleAssign2.default)({}, styles.slider, sliderStyle)), + onFocus: this.handleFocus, + onBlur: this.handleBlur, + onMouseDown: this.handleMouseDown, + onMouseEnter: this.handleMouseEnter, + onMouseLeave: this.handleMouseLeave, + onMouseUp: this.handleMouseUp, + onTouchStart: this.handleTouchStart, + onKeyDown: !disabled ? this.handleKeyDown : undefined + }, + _react2.default.createElement( + 'div', + { ref: function ref(node) { + return _this3.track = node; + }, style: prepareStyles(styles.track) }, + _react2.default.createElement('div', { style: prepareStyles(styles.filled) }), + _react2.default.createElement('div', { style: prepareStyles(styles.remaining) }), + _react2.default.createElement( + 'div', + { + ref: function ref(node) { + return _this3.handle = node; + }, + style: prepareStyles(handleStyles), + tabIndex: 0 + }, + !disabled && !disableFocusRipple && _react2.default.createElement(_FocusRipple2.default, { + style: rippleStyle, + innerStyle: styles.rippleInner, + show: (hovered || focused) && !active, + color: styles.rippleColor.fill + }) + ) + ) + ), + _react2.default.createElement('input', { + type: 'hidden', + name: name, + value: value, + required: required, + min: min, + max: max, + step: step + }) + ); + } + }]); + return Slider; +}(_react.Component); + +Slider.defaultProps = { + axis: 'x', + disabled: false, + disableFocusRipple: false, + max: 1, + min: 0, + required: true, + step: 0.01, + style: {} +}; +Slider.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Slider.propTypes = { + /** + * The axis on which the slider will slide. + */ + axis: _propTypes2.default.oneOf(['x', 'x-reverse', 'y', 'y-reverse']), + /** + * The default value of the slider. + */ + defaultValue: valueInRangePropType, + /** + * Disables focus ripple if set to true. + */ + disableFocusRipple: _propTypes2.default.bool, + /** + * If true, the slider will not be interactable. + */ + disabled: _propTypes2.default.bool, + /** + * The maximum value the slider can slide to on + * a scale from 0 to 1 inclusive. Cannot be equal to min. + */ + max: minMaxPropType, + /** + * The minimum value the slider can slide to on a scale + * from 0 to 1 inclusive. Cannot be equal to max. + */ + min: minMaxPropType, + /** + * The name of the slider. Behaves like the name attribute + * of an input element. + */ + name: _propTypes2.default.string, + /** @ignore */ + onBlur: _propTypes2.default.func, + /** + * Callback function that is fired when the slider's value changed. + * + * @param {object} event KeyDown event targeting the slider. + * @param {number} newValue The new value of the slider. + */ + onChange: _propTypes2.default.func, + /** + * Callback function that is fired when the slider has begun to move. + * + * @param {object} event MouseDown or TouchStart event targeting the slider. + */ + onDragStart: _propTypes2.default.func, + /** + * Callback function that is fired when the slide has stopped moving. + * + * @param {object} event MouseEnd or TouchEnd event targeting the slider. + */ + onDragStop: _propTypes2.default.func, + /** @ignore */ + onFocus: _propTypes2.default.func, + /** + * Whether or not the slider is required in a form. + */ + required: _propTypes2.default.bool, + /** + * Override the inline-styles of the inner slider element. + */ + sliderStyle: _propTypes2.default.object, + /** + * The granularity the slider can step through values. + */ + step: _propTypes2.default.number, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The value of the slider. + */ + value: valueInRangePropType +} : void 0; +exports.default = Slider; \ No newline at end of file diff --git a/Slider/index.js b/Slider/index.js new file mode 100644 index 00000000000000..8fb882b8c684ac --- /dev/null +++ b/Slider/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Slider = require('./Slider'); + +var _Slider2 = _interopRequireDefault(_Slider); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Slider2.default; \ No newline at end of file diff --git a/Snackbar/Snackbar.js b/Snackbar/Snackbar.js new file mode 100644 index 00000000000000..6f6d848c3c0520 --- /dev/null +++ b/Snackbar/Snackbar.js @@ -0,0 +1,317 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _ClickAwayListener = require('../internal/ClickAwayListener'); + +var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener); + +var _SnackbarBody = require('./SnackbarBody'); + +var _SnackbarBody2 = _interopRequireDefault(_SnackbarBody); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var _context$muiTheme = context.muiTheme, + desktopSubheaderHeight = _context$muiTheme.baseTheme.spacing.desktopSubheaderHeight, + zIndex = _context$muiTheme.zIndex; + var open = state.open; + + + var styles = { + root: { + position: 'fixed', + left: '50%', + display: 'flex', + bottom: 0, + zIndex: zIndex.snackbar, + visibility: open ? 'visible' : 'hidden', + transform: open ? 'translate(-50%, 0)' : 'translate(-50%, ' + desktopSubheaderHeight + 'px)', + transition: _transitions2.default.easeOut('400ms', 'transform') + ', ' + _transitions2.default.easeOut('400ms', 'visibility') + } + }; + + return styles; +} + +var Snackbar = function (_Component) { + (0, _inherits3.default)(Snackbar, _Component); + + function Snackbar() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Snackbar); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Snackbar.__proto__ || (0, _getPrototypeOf2.default)(Snackbar)).call.apply(_ref, [this].concat(args))), _this), _this.componentClickAway = function () { + if (_this.timerTransitionId) { + // If transitioning, don't close the snackbar. + return; + } + + if (_this.props.open !== null && _this.props.onRequestClose) { + _this.props.onRequestClose(Snackbar.reasons.CLICKAWAY); + } else { + _this.setState({ open: false }); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Snackbar, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + open: this.props.open, + message: this.props.message, + action: this.props.action + }); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + if (this.state.open) { + this.setAutoHideTimer(); + this.setTransitionTimer(); + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var _this2 = this; + + if (this.props.open && nextProps.open && (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) { + this.setState({ + open: false + }); + + clearTimeout(this.timerOneAtTheTimeId); + this.timerOneAtTheTimeId = setTimeout(function () { + _this2.setState({ + message: nextProps.message, + action: nextProps.action, + open: true + }); + }, 400); + } else { + var open = nextProps.open; + + this.setState({ + open: open !== null ? open : this.state.open, + message: nextProps.message, + action: nextProps.action + }); + } + } + }, { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps, prevState) { + if (prevState.open !== this.state.open) { + if (this.state.open) { + this.setAutoHideTimer(); + this.setTransitionTimer(); + } else { + clearTimeout(this.timerAutoHideId); + } + } + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + clearTimeout(this.timerAutoHideId); + clearTimeout(this.timerTransitionId); + clearTimeout(this.timerOneAtTheTimeId); + } + }, { + key: 'setAutoHideTimer', + + + // Timer that controls delay before snackbar auto hides + value: function setAutoHideTimer() { + var _this3 = this; + + var autoHideDuration = this.props.autoHideDuration; + + if (autoHideDuration > 0) { + clearTimeout(this.timerAutoHideId); + this.timerAutoHideId = setTimeout(function () { + if (_this3.props.open !== null && _this3.props.onRequestClose) { + _this3.props.onRequestClose(Snackbar.reasons.TIMEOUT); + } else { + _this3.setState({ open: false }); + } + }, autoHideDuration); + } + } + + // Timer that controls delay before click-away events are captured (based on when animation completes) + + }, { + key: 'setTransitionTimer', + value: function setTransitionTimer() { + var _this4 = this; + + this.timerTransitionId = setTimeout(function () { + _this4.timerTransitionId = undefined; + }, 400); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + autoHideDuration = _props.autoHideDuration, + contentStyle = _props.contentStyle, + bodyStyle = _props.bodyStyle, + messageProp = _props.message, + onRequestClose = _props.onRequestClose, + onActionClick = _props.onActionClick, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['autoHideDuration', 'contentStyle', 'bodyStyle', 'message', 'onRequestClose', 'onActionClick', 'style']); + var _state = this.state, + action = _state.action, + message = _state.message, + open = _state.open; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + return _react2.default.createElement( + _ClickAwayListener2.default, + { onClickAway: open ? this.componentClickAway : null }, + _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + _react2.default.createElement(_SnackbarBody2.default, { + action: action, + contentStyle: contentStyle, + message: message, + open: open, + onActionClick: onActionClick, + style: bodyStyle + }) + ) + ); + } + }]); + return Snackbar; +}(_react.Component); + +Snackbar.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +Snackbar.reasons = { + CLICKAWAY: 'clickaway', + TIMEOUT: 'timeout' +}; +process.env.NODE_ENV !== "production" ? Snackbar.propTypes = { + /** + * The label for the action on the snackbar. + */ + action: _propTypes2.default.node, + /** + * The number of milliseconds to wait before automatically dismissing. + * If no value is specified the snackbar will dismiss normally. + * If a value is provided the snackbar can still be dismissed normally. + * If a snackbar is dismissed before the timer expires, the timer will be cleared. + */ + autoHideDuration: _propTypes2.default.number, + /** + * Override the inline-styles of the body element. + */ + bodyStyle: _propTypes2.default.object, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Override the inline-styles of the content element. + */ + contentStyle: _propTypes2.default.object, + /** + * The message to be displayed. + * + * (Note: If the message is an element or array, and the `Snackbar` may re-render while it is still open, + * ensure that the same object remains as the `message` property if you want to avoid the `Snackbar` hiding and + * showing again) + */ + message: _propTypes2.default.node.isRequired, + /** + * Fired when the action button is clicked. + * + * @param {object} event Action button event. + */ + onActionClick: _propTypes2.default.func, + /** + * Fired when the `Snackbar` is requested to be closed by a click outside the `Snackbar`, or after the + * `autoHideDuration` timer expires. + * + * Typically `onRequestClose` is used to set state in the parent component, which is used to control the `Snackbar` + * `open` prop. + * + * The `reason` parameter can optionally be used to control the response to `onRequestClose`, + * for example ignoring `clickaway`. + * + * @param {string} reason Can be:`"timeout"` (`autoHideDuration` expired) or: `"clickaway"` + */ + onRequestClose: _propTypes2.default.func, + /** + * Controls whether the `Snackbar` is opened or not. + */ + open: _propTypes2.default.bool.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Snackbar; \ No newline at end of file diff --git a/Snackbar/SnackbarBody.js b/Snackbar/SnackbarBody.js new file mode 100644 index 00000000000000..cfac615c5c1505 --- /dev/null +++ b/Snackbar/SnackbarBody.js @@ -0,0 +1,170 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.SnackbarBody = undefined; + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _withWidth = require('../utils/withWidth'); + +var _withWidth2 = _interopRequireDefault(_withWidth); + +var _FlatButton = require('../FlatButton'); + +var _FlatButton2 = _interopRequireDefault(_FlatButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var open = props.open, + width = props.width; + var _context$muiTheme = context.muiTheme, + _context$muiTheme$bas = _context$muiTheme.baseTheme, + _context$muiTheme$bas2 = _context$muiTheme$bas.spacing, + desktopGutter = _context$muiTheme$bas2.desktopGutter, + desktopSubheaderHeight = _context$muiTheme$bas2.desktopSubheaderHeight, + fontFamily = _context$muiTheme$bas.fontFamily, + _context$muiTheme$sna = _context$muiTheme.snackbar, + backgroundColor = _context$muiTheme$sna.backgroundColor, + textColor = _context$muiTheme$sna.textColor, + actionColor = _context$muiTheme$sna.actionColor, + borderRadius = _context$muiTheme.borderRadius; + + + var isSmall = width === _withWidth.SMALL; + + var styles = { + root: { + fontFamily: fontFamily, + backgroundColor: backgroundColor, + padding: '0 ' + desktopGutter + 'px', + height: desktopSubheaderHeight, + lineHeight: desktopSubheaderHeight + 'px', + borderRadius: isSmall ? 0 : borderRadius, + maxWidth: isSmall ? 'inherit' : 568, + minWidth: isSmall ? 'inherit' : 288, + width: isSmall ? 'calc(100vw - ' + desktopGutter * 2 + 'px)' : 'auto', + flexGrow: isSmall ? 1 : 0 + }, + content: { + fontSize: 14, + color: textColor, + opacity: open ? 1 : 0, + transition: open ? _transitions2.default.easeOut('500ms', 'opacity', '100ms') : _transitions2.default.easeOut('400ms', 'opacity') + }, + action: { + color: actionColor, + float: 'right', + marginTop: 6, + marginRight: -16, + marginLeft: desktopGutter, + backgroundColor: 'transparent' + } + }; + + return styles; +} + +var SnackbarBody = function SnackbarBody(props, context) { + var action = props.action, + contentStyle = props.contentStyle, + message = props.message, + open = props.open, + onActionClick = props.onActionClick, + style = props.style, + other = (0, _objectWithoutProperties3.default)(props, ['action', 'contentStyle', 'message', 'open', 'onActionClick', 'style']); + var prepareStyles = context.muiTheme.prepareStyles; + + var styles = getStyles(props, context); + + var actionButton = action && _react2.default.createElement(_FlatButton2.default, { + style: styles.action, + label: action, + onClick: onActionClick + }); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.content, contentStyle)) }, + _react2.default.createElement( + 'span', + null, + message + ), + actionButton + ) + ); +}; + +exports.SnackbarBody = SnackbarBody; +process.env.NODE_ENV !== "production" ? SnackbarBody.propTypes = { + /** + * The label for the action on the snackbar. + */ + action: _propTypes2.default.node, + /** + * Override the inline-styles of the content element. + */ + contentStyle: _propTypes2.default.object, + /** + * The message to be displayed. + * + * (Note: If the message is an element or array, and the `Snackbar` may re-render while it is still open, + * ensure that the same object remains as the `message` property if you want to avoid the `Snackbar` hiding and + * showing again) + */ + message: _propTypes2.default.node.isRequired, + /** + * Fired when the action button is clicked. + * + * @param {object} event Action button event. + */ + onActionClick: _propTypes2.default.func, + /** + * @ignore + * Controls whether the `Snackbar` is opened or not. + */ + open: _propTypes2.default.bool.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * @ignore + * Width of the screen. + */ + width: _propTypes2.default.number.isRequired +} : void 0; + +SnackbarBody.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; + +exports.default = (0, _withWidth2.default)()(SnackbarBody); \ No newline at end of file diff --git a/Snackbar/index.js b/Snackbar/index.js new file mode 100644 index 00000000000000..1ed0c3acd686d0 --- /dev/null +++ b/Snackbar/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Snackbar = require('./Snackbar'); + +var _Snackbar2 = _interopRequireDefault(_Snackbar); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Snackbar2.default; \ No newline at end of file diff --git a/Stepper/Step.js b/Stepper/Step.js new file mode 100644 index 00000000000000..2517e9abb1dad0 --- /dev/null +++ b/Stepper/Step.js @@ -0,0 +1,162 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var getStyles = function getStyles(_ref, _ref2) { + var index = _ref.index; + var stepper = _ref2.stepper; + var orientation = stepper.orientation; + + var styles = { + root: { + flex: '0 0 auto' + } + }; + + if (index > 0) { + if (orientation === 'horizontal') { + styles.root.marginLeft = -6; + } else if (orientation === 'vertical') { + styles.root.marginTop = -14; + } + } + + return styles; +}; + +var Step = function (_Component) { + (0, _inherits3.default)(Step, _Component); + + function Step() { + var _ref3; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Step); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref3 = Step.__proto__ || (0, _getPrototypeOf2.default)(Step)).call.apply(_ref3, [this].concat(args))), _this), _this.renderChild = function (child) { + var _this$props = _this.props, + active = _this$props.active, + completed = _this$props.completed, + disabled = _this$props.disabled, + index = _this$props.index, + last = _this$props.last; + + + var icon = index + 1; + + return _react2.default.cloneElement(child, (0, _simpleAssign2.default)({ active: active, completed: completed, disabled: disabled, icon: icon, last: last }, child.props)); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Step, [{ + key: 'render', + value: function render() { + var _props = this.props, + active = _props.active, + completed = _props.completed, + disabled = _props.disabled, + index = _props.index, + last = _props.last, + children = _props.children, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['active', 'completed', 'disabled', 'index', 'last', 'children', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other), + _react2.default.Children.map(children, this.renderChild) + ); + } + }]); + return Step; +}(_react.Component); + +Step.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired, + stepper: _propTypes2.default.object +}; +process.env.NODE_ENV !== "production" ? Step.propTypes = { + /** + * Sets the step as active. Is passed to child components. + */ + active: _propTypes2.default.bool, + /** + * Should be `Step` sub-components such as `StepLabel`. + */ + children: _propTypes2.default.node, + /** + * Mark the step as completed. Is passed to child components. + */ + completed: _propTypes2.default.bool, + /** + * Mark the step as disabled, will also disable the button if + * `StepButton` is a child of `Step`. Is passed to child components. + */ + disabled: _propTypes2.default.bool, + /** + * @ignore + * Used internally for numbering. + */ + index: _propTypes2.default.number, + /** + * @ignore + */ + last: _propTypes2.default.bool, + /** + * Override the inline-style of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Step; \ No newline at end of file diff --git a/Stepper/StepButton.js b/Stepper/StepButton.js new file mode 100644 index 00000000000000..e25ec8e04da00a --- /dev/null +++ b/Stepper/StepButton.js @@ -0,0 +1,217 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +var _StepLabel = require('./StepLabel'); + +var _StepLabel2 = _interopRequireDefault(_StepLabel); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var isLabel = function isLabel(child) { + return child && child.type && child.type.muiName === 'StepLabel'; +}; + +var getStyles = function getStyles(props, context, state) { + var hovered = state.hovered; + var _context$muiTheme$ste = context.muiTheme.stepper, + backgroundColor = _context$muiTheme$ste.backgroundColor, + hoverBackgroundColor = _context$muiTheme$ste.hoverBackgroundColor; + + + var styles = { + root: { + padding: 0, + backgroundColor: hovered ? hoverBackgroundColor : backgroundColor, + transition: _transitions2.default.easeOut() + } + }; + + if (context.stepper.orientation === 'vertical') { + styles.root.width = '100%'; + } + + return styles; +}; + +var StepButton = function (_Component) { + (0, _inherits3.default)(StepButton, _Component); + + function StepButton() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, StepButton); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = StepButton.__proto__ || (0, _getPrototypeOf2.default)(StepButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false, + touched: false + }, _this.handleMouseEnter = function (event) { + var onMouseEnter = _this.props.onMouseEnter; + // Cancel hover styles for touch devices + + if (!_this.state.touched) { + _this.setState({ hovered: true }); + } + if (typeof onMouseEnter === 'function') { + onMouseEnter(event); + } + }, _this.handleMouseLeave = function (event) { + var onMouseLeave = _this.props.onMouseLeave; + + _this.setState({ hovered: false }); + if (typeof onMouseLeave === 'function') { + onMouseLeave(event); + } + }, _this.handleTouchStart = function (event) { + var onTouchStart = _this.props.onTouchStart; + + if (!_this.state.touched) { + _this.setState({ touched: true }); + } + if (typeof onTouchStart === 'function') { + onTouchStart(event); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(StepButton, [{ + key: 'render', + value: function render() { + var _props = this.props, + active = _props.active, + children = _props.children, + completed = _props.completed, + disabled = _props.disabled, + icon = _props.icon, + iconContainerStyle = _props.iconContainerStyle, + last = _props.last, + onMouseEnter = _props.onMouseEnter, + onMouseLeave = _props.onMouseLeave, + onTouchStart = _props.onTouchStart, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['active', 'children', 'completed', 'disabled', 'icon', 'iconContainerStyle', 'last', 'onMouseEnter', 'onMouseLeave', 'onTouchStart', 'style']); + + + var styles = getStyles(this.props, this.context, this.state); + + var child = isLabel(children) ? children : _react2.default.createElement( + _StepLabel2.default, + null, + children + ); + + return _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({ + disabled: disabled, + style: (0, _simpleAssign2.default)(styles.root, style), + onMouseEnter: this.handleMouseEnter, + onMouseLeave: this.handleMouseLeave, + onTouchStart: this.handleTouchStart + }, other), + _react2.default.cloneElement(child, { active: active, completed: completed, disabled: disabled, icon: icon, iconContainerStyle: iconContainerStyle }) + ); + } + }]); + return StepButton; +}(_react.Component); + +StepButton.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired, + stepper: _propTypes2.default.object +}; +process.env.NODE_ENV !== "production" ? StepButton.propTypes = { + /** + * Passed from `Step` Is passed to StepLabel. + */ + active: _propTypes2.default.bool, + /** + * Can be a `StepLabel` or a node to place inside `StepLabel` as children. + */ + children: _propTypes2.default.node, + /** + * Sets completed styling. Is passed to StepLabel. + */ + completed: _propTypes2.default.bool, + /** + * Disables the button and sets disabled styling. Is passed to StepLabel. + */ + disabled: _propTypes2.default.bool, + /** + * The icon displayed by the step label. + */ + icon: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string, _propTypes2.default.number]), + /** + * Override the inline-styles of the icon container element. + */ + iconContainerStyle: _propTypes2.default.object, + /** @ignore */ + last: _propTypes2.default.bool, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** @ignore */ + onTouchStart: _propTypes2.default.func, + /** + * Override the inline-style of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = StepButton; \ No newline at end of file diff --git a/Stepper/StepConnector.js b/Stepper/StepConnector.js new file mode 100644 index 00000000000000..426412533d47b7 --- /dev/null +++ b/Stepper/StepConnector.js @@ -0,0 +1,77 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.PlainStepConnector = undefined; + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _pure = require('recompose/pure'); + +var _pure2 = _interopRequireDefault(_pure); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var propTypes = { + /** + * Override the inline-style of the root element. + */ + style: _propTypes2.default.object +}; + +var contextTypes = { + muiTheme: _propTypes2.default.object.isRequired, + stepper: _propTypes2.default.object +}; + +var StepConnector = function StepConnector(props, context) { + var muiTheme = context.muiTheme, + stepper = context.stepper; + + + var styles = { + wrapper: { + flex: '1 1 auto' + }, + line: { + display: 'block', + borderColor: muiTheme.stepper.connectorLineColor + } + }; + + /** + * Clean up once we can use CSS pseudo elements + */ + if (stepper.orientation === 'horizontal') { + styles.line.marginLeft = -6; + styles.line.borderTopStyle = 'solid'; + styles.line.borderTopWidth = 1; + } else if (stepper.orientation === 'vertical') { + styles.wrapper.marginLeft = 14 + 11; // padding + 1/2 icon + styles.line.borderLeftStyle = 'solid'; + styles.line.borderLeftWidth = 1; + styles.line.minHeight = 28; + } + + var prepareStyles = muiTheme.prepareStyles; + + + return _react2.default.createElement( + 'div', + { style: prepareStyles(styles.wrapper) }, + _react2.default.createElement('span', { style: prepareStyles(styles.line) }) + ); +}; + +process.env.NODE_ENV !== "production" ? StepConnector.propTypes = propTypes : void 0; +StepConnector.contextTypes = contextTypes; + +exports.PlainStepConnector = StepConnector; +exports.default = (0, _pure2.default)(StepConnector); \ No newline at end of file diff --git a/Stepper/StepContent.js b/Stepper/StepContent.js new file mode 100644 index 00000000000000..7d49b8e4fb2bfb --- /dev/null +++ b/Stepper/StepContent.js @@ -0,0 +1,168 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _ExpandTransition = require('../internal/ExpandTransition'); + +var _ExpandTransition2 = _interopRequireDefault(_ExpandTransition); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function ExpandTransition(props) { + return _react2.default.createElement(_ExpandTransition2.default, props); +} + +var getStyles = function getStyles(props, context) { + var styles = { + root: { + marginTop: -14, + marginLeft: 14 + 11, // padding + 1/2 icon + paddingLeft: 24 - 11 + 8, + paddingRight: 16, + overflow: 'hidden' + } + }; + + if (!props.last) { + styles.root.borderLeft = '1px solid ' + context.muiTheme.stepper.connectorLineColor; + } + + return styles; +}; + +var StepContent = function (_Component) { + (0, _inherits3.default)(StepContent, _Component); + + function StepContent() { + (0, _classCallCheck3.default)(this, StepContent); + return (0, _possibleConstructorReturn3.default)(this, (StepContent.__proto__ || (0, _getPrototypeOf2.default)(StepContent)).apply(this, arguments)); + } + + (0, _createClass3.default)(StepContent, [{ + key: 'render', + value: function render() { + var _props = this.props, + active = _props.active, + children = _props.children, + completed = _props.completed, + last = _props.last, + style = _props.style, + transition = _props.transition, + transitionDuration = _props.transitionDuration, + other = (0, _objectWithoutProperties3.default)(_props, ['active', 'children', 'completed', 'last', 'style', 'transition', 'transitionDuration']); + var _context = this.context, + stepper = _context.stepper, + prepareStyles = _context.muiTheme.prepareStyles; + + + if (stepper.orientation !== 'vertical') { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: is only designed for use with the vertical stepper.') : void 0; + return null; + } + + var styles = getStyles(this.props, this.context); + var transitionProps = { + enterDelay: transitionDuration, + transitionDuration: transitionDuration, + open: active + }; + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other), + _react2.default.createElement(transition, transitionProps, _react2.default.createElement( + 'div', + { style: { overflow: 'hidden' } }, + children + )) + ); + } + }]); + return StepContent; +}(_react.Component); + +StepContent.defaultProps = { + transition: ExpandTransition, + transitionDuration: 450 +}; +StepContent.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired, + stepper: _propTypes2.default.object +}; +process.env.NODE_ENV !== "production" ? StepContent.propTypes = { + /** + * Expands the content + */ + active: _propTypes2.default.bool, + /** + * Step content + */ + children: _propTypes2.default.node, + /** + * @ignore + */ + completed: _propTypes2.default.bool, + /** + * @ignore + */ + last: _propTypes2.default.bool, + /** + * Override the inline-style of the root element. + */ + style: _propTypes2.default.object, + /** + * ReactTransitionGroup component. + */ + transition: _propTypes2.default.func, + /** + * Adjust the duration of the content expand transition. Passed as a prop to the transition component. + */ + transitionDuration: _propTypes2.default.number +} : void 0; +exports.default = StepContent; \ No newline at end of file diff --git a/Stepper/StepLabel.js b/Stepper/StepLabel.js new file mode 100644 index 00000000000000..b19223b736b2fa --- /dev/null +++ b/Stepper/StepLabel.js @@ -0,0 +1,196 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _typeof2 = require('babel-runtime/helpers/typeof'); + +var _typeof3 = _interopRequireDefault(_typeof2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _checkCircle = require('../svg-icons/action/check-circle'); + +var _checkCircle2 = _interopRequireDefault(_checkCircle); + +var _SvgIcon = require('../SvgIcon'); + +var _SvgIcon2 = _interopRequireDefault(_SvgIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var getStyles = function getStyles(_ref, _ref2) { + var active = _ref.active, + completed = _ref.completed, + disabled = _ref.disabled; + var muiTheme = _ref2.muiTheme, + stepper = _ref2.stepper; + var _muiTheme$stepper = muiTheme.stepper, + textColor = _muiTheme$stepper.textColor, + disabledTextColor = _muiTheme$stepper.disabledTextColor, + iconColor = _muiTheme$stepper.iconColor, + inactiveIconColor = _muiTheme$stepper.inactiveIconColor; + var baseTheme = muiTheme.baseTheme; + var orientation = stepper.orientation; + + + var styles = { + root: { + height: orientation === 'horizontal' ? 72 : 64, + color: textColor, + display: 'flex', + alignItems: 'center', + fontFamily: baseTheme.fontFamily, + fontSize: 14, + paddingLeft: 14, + paddingRight: 14 + }, + icon: { + color: iconColor, + display: 'block', + fontSize: 24, + width: 24, + height: 24 + }, + iconContainer: { + paddingRight: 8 + } + }; + + if (active) { + styles.root.fontWeight = 500; + } + + if (!completed && !active) { + styles.icon.color = inactiveIconColor; + } + + if (disabled) { + styles.icon.color = inactiveIconColor; + styles.root.color = disabledTextColor; + styles.root.cursor = 'default'; + } + + return styles; +}; + +var renderIcon = function renderIcon(completed, icon, styles) { + var iconType = typeof icon === 'undefined' ? 'undefined' : (0, _typeof3.default)(icon); + + if (iconType === 'number' || iconType === 'string') { + if (completed) { + return _react2.default.createElement(_checkCircle2.default, { + color: styles.icon.color, + style: styles.icon + }); + } + + return _react2.default.createElement( + _SvgIcon2.default, + { color: styles.icon.color, style: styles.icon }, + _react2.default.createElement('circle', { cx: '12', cy: '12', r: '10' }), + _react2.default.createElement( + 'text', + { + x: '12', + y: '16', + textAnchor: 'middle', + fontSize: '12', + fill: '#fff' + }, + icon + ) + ); + } + + return icon; +}; + +var StepLabel = function StepLabel(props, context) { + var active = props.active, + children = props.children, + completed = props.completed, + userIcon = props.icon, + iconContainerStyle = props.iconContainerStyle, + last = props.last, + style = props.style, + other = (0, _objectWithoutProperties3.default)(props, ['active', 'children', 'completed', 'icon', 'iconContainerStyle', 'last', 'style']); + var prepareStyles = context.muiTheme.prepareStyles; + + var styles = getStyles(props, context); + var icon = renderIcon(completed, userIcon, styles); + + return _react2.default.createElement( + 'span', + (0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, other), + icon && _react2.default.createElement( + 'span', + { style: prepareStyles((0, _simpleAssign2.default)(styles.iconContainer, iconContainerStyle)) }, + icon + ), + children + ); +}; + +StepLabel.muiName = 'StepLabel'; + +process.env.NODE_ENV !== "production" ? StepLabel.propTypes = { + /** + * Sets active styling. Overrides disabled coloring. + */ + active: _propTypes2.default.bool, + /** + * The label text node + */ + children: _propTypes2.default.node, + /** + * Sets completed styling. Overrides disabled coloring. + */ + completed: _propTypes2.default.bool, + /** + * Sets disabled styling. + */ + disabled: _propTypes2.default.bool, + /** + * The icon displayed by the step label. + */ + icon: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.string, _propTypes2.default.number]), + /** + * Override the inline-styles of the icon container element. + */ + iconContainerStyle: _propTypes2.default.object, + /** + * @ignore + */ + last: _propTypes2.default.bool, + /** + * Override the inline-style of the root element. + */ + style: _propTypes2.default.object +} : void 0; + +StepLabel.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired, + stepper: _propTypes2.default.object +}; + +exports.default = StepLabel; \ No newline at end of file diff --git a/Stepper/Stepper.js b/Stepper/Stepper.js new file mode 100644 index 00000000000000..15075e877fc9a7 --- /dev/null +++ b/Stepper/Stepper.js @@ -0,0 +1,158 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _StepConnector = require('./StepConnector'); + +var _StepConnector2 = _interopRequireDefault(_StepConnector); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var getStyles = function getStyles(props) { + var orientation = props.orientation; + + return { + root: { + display: 'flex', + flexDirection: orientation === 'horizontal' ? 'row' : 'column', + alignContent: 'center', + alignItems: orientation === 'horizontal' ? 'center' : 'stretch', + justifyContent: 'space-between' + } + }; +}; + +var Stepper = function (_Component) { + (0, _inherits3.default)(Stepper, _Component); + + function Stepper() { + (0, _classCallCheck3.default)(this, Stepper); + return (0, _possibleConstructorReturn3.default)(this, (Stepper.__proto__ || (0, _getPrototypeOf2.default)(Stepper)).apply(this, arguments)); + } + + (0, _createClass3.default)(Stepper, [{ + key: 'getChildContext', + value: function getChildContext() { + var orientation = this.props.orientation; + + return { stepper: { orientation: orientation } }; + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + activeStep = _props.activeStep, + children = _props.children, + connector = _props.connector, + linear = _props.linear, + style = _props.style; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + /** + * One day, we may be able to use real CSS tools + * For now, we need to create our own "pseudo" elements + * and nth child selectors, etc + * That's what some of this garbage is for :) + */ + var numChildren = _react.Children.count(children); + var steps = _react.Children.map(children, function (step, index) { + if (!_react2.default.isValidElement(step)) { + return null; + } + var controlProps = { index: index }; + + if (activeStep === index) { + controlProps.active = true; + } else if (linear && activeStep > index) { + controlProps.completed = true; + } else if (linear && activeStep < index) { + controlProps.disabled = true; + } + + if (index + 1 === numChildren) { + controlProps.last = true; + } + + return [index > 0 && connector, _react2.default.cloneElement(step, (0, _simpleAssign2.default)(controlProps, step.props))]; + }); + + return _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, + steps + ); + } + }]); + return Stepper; +}(_react.Component); + +Stepper.defaultProps = { + connector: _react2.default.createElement(_StepConnector2.default, null), + orientation: 'horizontal', + linear: true +}; +Stepper.contextTypes = { muiTheme: _propTypes2.default.object.isRequired }; +Stepper.childContextTypes = { stepper: _propTypes2.default.object }; +process.env.NODE_ENV !== "production" ? Stepper.propTypes = { + /** + * Set the active step (zero based index). This will enable `Step` control helpers. + */ + activeStep: _propTypes2.default.number, + /** + * Should be two or more `` components. + */ + children: _propTypes2.default.node, + /** + * A component to be placed between each step. + */ + connector: _propTypes2.default.node, + /** + * If set to `true`, the `Stepper` will assist in controlling steps for linear flow + */ + linear: _propTypes2.default.bool, + /** + * The stepper orientation (layout flow direction) + */ + orientation: _propTypes2.default.oneOf(['horizontal', 'vertical']), + /** + * Override the inline-style of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Stepper; \ No newline at end of file diff --git a/Stepper/index.js b/Stepper/index.js new file mode 100644 index 00000000000000..2801d827a252d4 --- /dev/null +++ b/Stepper/index.js @@ -0,0 +1,34 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.Stepper = exports.StepLabel = exports.StepContent = exports.StepButton = exports.Step = undefined; + +var _Step2 = require('./Step'); + +var _Step3 = _interopRequireDefault(_Step2); + +var _StepButton2 = require('./StepButton'); + +var _StepButton3 = _interopRequireDefault(_StepButton2); + +var _StepContent2 = require('./StepContent'); + +var _StepContent3 = _interopRequireDefault(_StepContent2); + +var _StepLabel2 = require('./StepLabel'); + +var _StepLabel3 = _interopRequireDefault(_StepLabel2); + +var _Stepper2 = require('./Stepper'); + +var _Stepper3 = _interopRequireDefault(_Stepper2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Step = _Step3.default; +exports.StepButton = _StepButton3.default; +exports.StepContent = _StepContent3.default; +exports.StepLabel = _StepLabel3.default; +exports.Stepper = _Stepper3.default; \ No newline at end of file diff --git a/Subheader/Subheader.js b/Subheader/Subheader.js new file mode 100644 index 00000000000000..a165f2b04e8b7d --- /dev/null +++ b/Subheader/Subheader.js @@ -0,0 +1,83 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var Subheader = function Subheader(props, context) { + var children = props.children, + inset = props.inset, + style = props.style, + other = (0, _objectWithoutProperties3.default)(props, ['children', 'inset', 'style']); + var _context$muiTheme = context.muiTheme, + prepareStyles = _context$muiTheme.prepareStyles, + subheader = _context$muiTheme.subheader; + + + var styles = { + root: { + boxSizing: 'border-box', + color: subheader.color, + fontSize: 14, + fontWeight: subheader.fontWeight, + lineHeight: '48px', + paddingLeft: inset ? 72 : 16, + width: '100%' + } + }; + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }), + children + ); +}; + +Subheader.muiName = 'Subheader'; + +process.env.NODE_ENV !== "production" ? Subheader.propTypes = { + /** + * Node that will be placed inside the `Subheader`. + */ + children: _propTypes2.default.node, + /** + * If true, the `Subheader` will be indented. + */ + inset: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; + +Subheader.defaultProps = { + inset: false +}; + +Subheader.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; + +exports.default = Subheader; \ No newline at end of file diff --git a/Subheader/index.js b/Subheader/index.js new file mode 100644 index 00000000000000..08b6390124b1f4 --- /dev/null +++ b/Subheader/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Subheader = require('./Subheader'); + +var _Subheader2 = _interopRequireDefault(_Subheader); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Subheader2.default; \ No newline at end of file diff --git a/SvgIcon/SvgIcon.js b/SvgIcon/SvgIcon.js new file mode 100644 index 00000000000000..ed9a5dcbf2da2e --- /dev/null +++ b/SvgIcon/SvgIcon.js @@ -0,0 +1,165 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var SvgIcon = function (_Component) { + (0, _inherits3.default)(SvgIcon, _Component); + + function SvgIcon() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, SvgIcon); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = SvgIcon.__proto__ || (0, _getPrototypeOf2.default)(SvgIcon)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false + }, _this.handleMouseLeave = function (event) { + _this.setState({ hovered: false }); + _this.props.onMouseLeave(event); + }, _this.handleMouseEnter = function (event) { + _this.setState({ hovered: true }); + _this.props.onMouseEnter(event); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(SvgIcon, [{ + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + color = _props.color, + hoverColor = _props.hoverColor, + onMouseEnter = _props.onMouseEnter, + onMouseLeave = _props.onMouseLeave, + style = _props.style, + viewBox = _props.viewBox, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'color', 'hoverColor', 'onMouseEnter', 'onMouseLeave', 'style', 'viewBox']); + var _context$muiTheme = this.context.muiTheme, + svgIcon = _context$muiTheme.svgIcon, + prepareStyles = _context$muiTheme.prepareStyles; + + + var offColor = color ? color : 'currentColor'; + var onColor = hoverColor ? hoverColor : offColor; + + var mergedStyles = (0, _simpleAssign2.default)({ + display: 'inline-block', + color: svgIcon.color, + fill: this.state.hovered ? onColor : offColor, + height: 24, + width: 24, + userSelect: 'none', + transition: _transitions2.default.easeOut() + }, style); + + return _react2.default.createElement( + 'svg', + (0, _extends3.default)({}, other, { + onMouseEnter: this.handleMouseEnter, + onMouseLeave: this.handleMouseLeave, + style: prepareStyles(mergedStyles), + viewBox: viewBox + }), + children + ); + } + }]); + return SvgIcon; +}(_react.Component); + +SvgIcon.muiName = 'SvgIcon'; +SvgIcon.defaultProps = { + onMouseEnter: function onMouseEnter() {}, + onMouseLeave: function onMouseLeave() {}, + viewBox: '0 0 24 24' +}; +SvgIcon.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? SvgIcon.propTypes = { + /** + * Elements passed into the SVG Icon. + */ + children: _propTypes2.default.node, + /** + * This is the fill color of the svg icon. + * If not specified, this component will default + * to muiTheme.palette.textColor. + */ + color: _propTypes2.default.string, + /** + * This is the icon color when the mouse hovers over the icon. + */ + hoverColor: _propTypes2.default.string, + /** @ignore */ + onMouseEnter: _propTypes2.default.func, + /** @ignore */ + onMouseLeave: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Allows you to redefine what the coordinates + * without units mean inside an svg element. For example, + * if the SVG element is 500 (width) by 200 (height), and you + * pass viewBox="0 0 50 20", this means that the coordinates inside + * the svg will go from the top left corner (0,0) to bottom right (50,20) + * and each unit will be worth 10px. + */ + viewBox: _propTypes2.default.string +} : void 0; +exports.default = SvgIcon; \ No newline at end of file diff --git a/SvgIcon/index.js b/SvgIcon/index.js new file mode 100644 index 00000000000000..f3e0a35713fe4c --- /dev/null +++ b/SvgIcon/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _SvgIcon = require('./SvgIcon'); + +var _SvgIcon2 = _interopRequireDefault(_SvgIcon); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _SvgIcon2.default; \ No newline at end of file diff --git a/Table/Table.js b/Table/Table.js new file mode 100644 index 00000000000000..4204a7e6fd2ff0 --- /dev/null +++ b/Table/Table.js @@ -0,0 +1,376 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + table = _context$muiTheme.table; + + + return { + root: { + backgroundColor: table.backgroundColor, + width: '100%', + borderCollapse: 'collapse', + borderSpacing: 0, + tableLayout: 'fixed', + fontFamily: baseTheme.fontFamily + }, + bodyTable: { + height: props.fixedHeader || props.fixedFooter ? props.height : 'auto', + overflowX: 'hidden', + overflowY: 'auto' + }, + tableWrapper: { + height: props.fixedHeader || props.fixedFooter ? 'auto' : props.height, + overflow: 'auto' + } + }; +} + +var Table = function (_Component) { + (0, _inherits3.default)(Table, _Component); + + function Table() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Table); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Table.__proto__ || (0, _getPrototypeOf2.default)(Table)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + allRowsSelected: false + }, _this.onCellClick = function (rowNumber, columnNumber, event) { + if (_this.props.onCellClick) _this.props.onCellClick(rowNumber, columnNumber, event); + }, _this.onCellHover = function (rowNumber, columnNumber, event) { + if (_this.props.onCellHover) _this.props.onCellHover(rowNumber, columnNumber, event); + }, _this.onCellHoverExit = function (rowNumber, columnNumber, event) { + if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(rowNumber, columnNumber, event); + }, _this.onRowHover = function (rowNumber) { + if (_this.props.onRowHover) _this.props.onRowHover(rowNumber); + }, _this.onRowHoverExit = function (rowNumber) { + if (_this.props.onRowHoverExit) _this.props.onRowHoverExit(rowNumber); + }, _this.onRowSelection = function (selectedRows) { + if (_this.state.allRowsSelected) { + _this.setState({ allRowsSelected: false }); + } + + if (_this.props.onRowSelection) { + _this.props.onRowSelection(selectedRows); + } + }, _this.onSelectAll = function () { + if (_this.props.onRowSelection) { + if (!_this.state.allRowsSelected) { + _this.props.onRowSelection('all'); + } else { + _this.props.onRowSelection('none'); + } + } + + _this.setState({ allRowsSelected: !_this.state.allRowsSelected }); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Table, [{ + key: 'componentWillMount', + value: function componentWillMount() { + if (this.props.allRowsSelected) { + this.setState({ allRowsSelected: true }); + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.allRowsSelected !== nextProps.allRowsSelected) { + this.setState({ allRowsSelected: nextProps.allRowsSelected }); + } + } + }, { + key: 'isScrollbarVisible', + value: function isScrollbarVisible() { + var tableDivHeight = this.refs.tableDiv.clientHeight; + var tableBodyHeight = this.refs.tableBody.clientHeight; + + return tableBodyHeight > tableDivHeight; + } + }, { + key: 'createTableHeader', + value: function createTableHeader(base) { + return _react2.default.cloneElement(base, { + enableSelectAll: base.props.enableSelectAll && this.props.selectable && this.props.multiSelectable, + onSelectAll: this.onSelectAll, + selectAllSelected: this.state.allRowsSelected + }); + } + }, { + key: 'createTableBody', + value: function createTableBody(base) { + return _react2.default.cloneElement(base, { + allRowsSelected: this.state.allRowsSelected, + multiSelectable: this.props.multiSelectable, + onCellClick: this.onCellClick, + onCellHover: this.onCellHover, + onCellHoverExit: this.onCellHoverExit, + onRowHover: this.onRowHover, + onRowHoverExit: this.onRowHoverExit, + onRowSelection: this.onRowSelection, + selectable: this.props.selectable + }); + } + }, { + key: 'createTableFooter', + value: function createTableFooter(base) { + return base; + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + children = _props.children, + className = _props.className, + fixedFooter = _props.fixedFooter, + fixedHeader = _props.fixedHeader, + style = _props.style, + wrapperStyle = _props.wrapperStyle, + headerStyle = _props.headerStyle, + bodyStyle = _props.bodyStyle, + footerStyle = _props.footerStyle; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var tHead = void 0; + var tFoot = void 0; + var tBody = void 0; + + _react2.default.Children.forEach(children, function (child) { + if (!_react2.default.isValidElement(child)) return; + + var muiName = child.type.muiName; + + if (muiName === 'TableBody') { + tBody = _this2.createTableBody(child); + } else if (muiName === 'TableHeader') { + tHead = _this2.createTableHeader(child); + } else if (muiName === 'TableFooter') { + tFoot = _this2.createTableFooter(child); + } else { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: Children of the Table component must be TableBody or TableHeader or TableFooter.\n Nothing is rendered.') : void 0; + } + }); + + // If we could not find a table-header and a table-body, do not attempt to display anything. + if (!tBody && !tHead) return null; + + var mergedTableStyle = (0, _simpleAssign2.default)(styles.root, style); + var headerTable = void 0; + var footerTable = void 0; + var inlineHeader = void 0; + var inlineFooter = void 0; + + if (fixedHeader) { + headerTable = _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)({}, headerStyle)) }, + _react2.default.createElement( + 'table', + { className: className, style: mergedTableStyle }, + tHead + ) + ); + } else { + inlineHeader = tHead; + } + + if (tFoot !== undefined) { + if (fixedFooter) { + footerTable = _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)({}, footerStyle)) }, + _react2.default.createElement( + 'table', + { className: className, style: prepareStyles(mergedTableStyle) }, + tFoot + ) + ); + } else { + inlineFooter = tFoot; + } + } + + return _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.tableWrapper, wrapperStyle)) }, + headerTable, + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.bodyTable, bodyStyle)), ref: 'tableDiv' }, + _react2.default.createElement( + 'table', + { className: className, style: mergedTableStyle, ref: 'tableBody' }, + inlineHeader, + inlineFooter, + tBody + ) + ), + footerTable + ); + } + }]); + return Table; +}(_react.Component); + +Table.defaultProps = { + allRowsSelected: false, + fixedFooter: true, + fixedHeader: true, + height: 'inherit', + multiSelectable: false, + selectable: true +}; +Table.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Table.propTypes = { + /** + * Set to true to indicate that all rows should be selected. + */ + allRowsSelected: _propTypes2.default.bool, + /** + * Override the inline-styles of the body's table element. + */ + bodyStyle: _propTypes2.default.object, + /** + * Children passed to table. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * If true, the footer will appear fixed below the table. + * The default value is true. + */ + fixedFooter: _propTypes2.default.bool, + /** + * If true, the header will appear fixed above the table. + * The default value is true. + */ + fixedHeader: _propTypes2.default.bool, + /** + * Override the inline-styles of the footer's table element. + */ + footerStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the header's table element. + */ + headerStyle: _propTypes2.default.object, + /** + * The height of the table. + */ + height: _propTypes2.default.string, + /** + * If true, multiple table rows can be selected. + * CTRL/CMD+Click and SHIFT+Click are valid actions. + * The default value is false. + */ + multiSelectable: _propTypes2.default.bool, + /** + * Called when a row cell is clicked. + * rowNumber is the row number and columnId is + * the column number or the column key. + */ + onCellClick: _propTypes2.default.func, + /** + * Called when a table cell is hovered. + * rowNumber is the row number of the hovered row + * and columnId is the column number or the column key of the cell. + */ + onCellHover: _propTypes2.default.func, + /** + * Called when a table cell is no longer hovered. + * rowNumber is the row number of the row and columnId + * is the column number or the column key of the cell. + */ + onCellHoverExit: _propTypes2.default.func, + /** + * Called when a table row is hovered. + * rowNumber is the row number of the hovered row. + */ + onRowHover: _propTypes2.default.func, + /** + * Called when a table row is no longer hovered. + * rowNumber is the row number of the row that is no longer hovered. + */ + onRowHoverExit: _propTypes2.default.func, + /** + * Called when a row is selected. + * selectedRows is an array of all row selections. + * IF all rows have been selected, the string "all" + * will be returned instead to indicate that all rows have been selected. + */ + onRowSelection: _propTypes2.default.func, + /** + * If true, table rows can be selected. + * If multiple row selection is desired, enable multiSelectable. + * The default value is true. + */ + selectable: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Override the inline-styles of the table's wrapper element. + */ + wrapperStyle: _propTypes2.default.object +} : void 0; +exports.default = Table; \ No newline at end of file diff --git a/Table/TableBody.js b/Table/TableBody.js new file mode 100644 index 00000000000000..386ec0b8889176 --- /dev/null +++ b/Table/TableBody.js @@ -0,0 +1,541 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); + +var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); + +var _typeof2 = require('babel-runtime/helpers/typeof'); + +var _typeof3 = _interopRequireDefault(_typeof2); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Checkbox = require('../Checkbox'); + +var _Checkbox2 = _interopRequireDefault(_Checkbox); + +var _TableRowColumn = require('./TableRowColumn'); + +var _TableRowColumn2 = _interopRequireDefault(_TableRowColumn); + +var _ClickAwayListener = require('../internal/ClickAwayListener'); + +var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var TableBody = function (_Component) { + (0, _inherits3.default)(TableBody, _Component); + + function TableBody() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TableBody); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableBody.__proto__ || (0, _getPrototypeOf2.default)(TableBody)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + selectedRows: [] + }, _this.isControlled = false, _this.handleClickAway = function () { + if (_this.props.deselectOnClickaway && _this.state.selectedRows.length > 0) { + var selectedRows = []; + _this.setState({ selectedRows: selectedRows }); + if (_this.props.onRowSelection) { + _this.props.onRowSelection(selectedRows); + } + } + }, _this.onRowClick = function (event, rowNumber) { + event.stopPropagation(); + + if (_this.props.selectable) { + // Prevent text selection while selecting rows. + if (window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects.length > 0) { + window.getSelection().removeAllRanges(); + } + _this.processRowSelection(event, rowNumber); + } + }, _this.onCellClick = function (event, rowNumber, columnNumber) { + event.stopPropagation(); + if (_this.props.onCellClick) { + _this.props.onCellClick(rowNumber, _this.getColumnId(columnNumber), event); + } + }, _this.onCellHover = function (event, rowNumber, columnNumber) { + if (_this.props.onCellHover) { + _this.props.onCellHover(rowNumber, _this.getColumnId(columnNumber), event); + } + _this.onRowHover(event, rowNumber); + }, _this.onCellHoverExit = function (event, rowNumber, columnNumber) { + if (_this.props.onCellHoverExit) { + _this.props.onCellHoverExit(rowNumber, _this.getColumnId(columnNumber), event); + } + _this.onRowHoverExit(event, rowNumber); + }, _this.onRowHover = function (event, rowNumber) { + if (_this.props.onRowHover) { + _this.props.onRowHover(rowNumber); + } + }, _this.onRowHoverExit = function (event, rowNumber) { + if (_this.props.onRowHoverExit) { + _this.props.onRowHoverExit(rowNumber); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TableBody, [{ + key: 'componentWillMount', + value: function componentWillMount() { + if (this.props.preScanRows) { + this.setState({ + selectedRows: this.getSelectedRows(this.props) + }); + } + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + if (!this.props.preScanRows) { + this.setState({ // eslint-disable-line react/no-did-mount-set-state + selectedRows: this.getSelectedRows(this.props) + }); + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (this.props.allRowsSelected !== nextProps.allRowsSelected) { + if (!nextProps.allRowsSelected) { + this.setState({ + selectedRows: [] + }); + return; + } + } + + this.setState({ + selectedRows: this.getSelectedRows(nextProps) + }); + } + }, { + key: 'createRows', + value: function createRows() { + var _this2 = this; + + var numChildren = _react2.default.Children.count(this.props.children); + var rowNumber = 0; + var handlers = { + onCellClick: this.onCellClick, + onCellHover: this.onCellHover, + onCellHoverExit: this.onCellHoverExit, + onRowHover: this.onRowHover, + onRowHoverExit: this.onRowHoverExit, + onRowClick: this.onRowClick + }; + + return _react2.default.Children.map(this.props.children, function (child) { + if (_react2.default.isValidElement(child)) { + var props = { + hoverable: _this2.props.showRowHover, + selected: _this2.isRowSelected(rowNumber), + striped: _this2.props.stripedRows && rowNumber % 2 === 0, + rowNumber: rowNumber++ + }; + + if (rowNumber === numChildren) { + props.displayBorder = false; + } + + var children = [_this2.createRowCheckboxColumn(props)]; + + _react2.default.Children.forEach(child.props.children, function (child) { + children.push(child); + }); + + return _react2.default.cloneElement(child, (0, _extends3.default)({}, props, handlers), children); + } + }); + } + }, { + key: 'createRowCheckboxColumn', + value: function createRowCheckboxColumn(rowProps) { + if (!this.props.displayRowCheckbox) { + return null; + } + + var name = rowProps.rowNumber + '-cb'; + var disabled = !this.props.selectable; + + return _react2.default.createElement( + _TableRowColumn2.default, + { + key: name, + columnNumber: 0, + style: { + width: 24, + cursor: disabled ? 'default' : 'inherit' + } + }, + _react2.default.createElement(_Checkbox2.default, { + name: name, + value: 'selected', + disabled: disabled, + checked: rowProps.selected + }) + ); + } + }, { + key: 'getSelectedRows', + value: function getSelectedRows(props) { + var _this3 = this; + + var selectedRows = []; + + if (props.selectable) { + var index = 0; + _react2.default.Children.forEach(props.children, function (child) { + if (_react2.default.isValidElement(child)) { + if (child.props.selected !== undefined) { + _this3.isControlled = true; + } + + if (child.props.selected && (selectedRows.length === 0 || props.multiSelectable)) { + selectedRows.push(index); + } + + index++; + } + }); + } + + return selectedRows; + } + }, { + key: 'isRowSelected', + value: function isRowSelected(rowNumber) { + var _this4 = this; + + if (this.props.allRowsSelected) { + return true; + } + + return this.state.selectedRows.some(function (row) { + if ((typeof row === 'undefined' ? 'undefined' : (0, _typeof3.default)(row)) === 'object') { + if (_this4.isValueInRange(rowNumber, row)) { + return true; + } + } else { + if (row === rowNumber) { + return true; + } + } + + return false; + }); + } + }, { + key: 'isValueInRange', + value: function isValueInRange(value, range) { + if (!range) return false; + + if (range.start <= value && value <= range.end || range.end <= value && value <= range.start) { + return true; + } + + return false; + } + }, { + key: 'processRowSelection', + value: function processRowSelection(event, rowNumber) { + var selectedRows = [].concat((0, _toConsumableArray3.default)(this.state.selectedRows)); + + if (event.shiftKey && this.props.multiSelectable && selectedRows.length > 0) { + var lastIndex = selectedRows.length - 1; + var lastSelection = selectedRows[lastIndex]; + + if ((typeof lastSelection === 'undefined' ? 'undefined' : (0, _typeof3.default)(lastSelection)) === 'object') { + lastSelection.end = rowNumber; + } else { + selectedRows.splice(lastIndex, 1, { + start: lastSelection, + end: rowNumber + }); + } + } else if ((event.ctrlKey && !event.metaKey || event.metaKey && !event.ctrlKey) && this.props.multiSelectable) { + var idx = selectedRows.indexOf(rowNumber); + if (idx < 0) { + var foundRange = false; + for (var i = 0; i < selectedRows.length; i++) { + var range = selectedRows[i]; + if ((typeof range === 'undefined' ? 'undefined' : (0, _typeof3.default)(range)) !== 'object') continue; + + if (this.isValueInRange(rowNumber, range)) { + var _selectedRows; + + foundRange = true; + var values = this.splitRange(range, rowNumber); + (_selectedRows = selectedRows).splice.apply(_selectedRows, [i, 1].concat((0, _toConsumableArray3.default)(values))); + } + } + + if (!foundRange) selectedRows.push(rowNumber); + } else { + selectedRows.splice(idx, 1); + } + } else { + if (selectedRows.length === 1 && selectedRows[0] === rowNumber) { + selectedRows = []; + } else { + selectedRows = [rowNumber]; + } + } + + if (!this.isControlled) { + this.setState({ selectedRows: selectedRows }); + } + + if (this.props.onRowSelection) { + this.props.onRowSelection(this.flattenRanges(selectedRows)); + } + } + }, { + key: 'splitRange', + value: function splitRange(range, splitPoint) { + var splitValues = []; + var startOffset = range.start - splitPoint; + var endOffset = range.end - splitPoint; + + // Process start half + splitValues.push.apply(splitValues, (0, _toConsumableArray3.default)(this.genRangeOfValues(splitPoint, startOffset))); + + // Process end half + splitValues.push.apply(splitValues, (0, _toConsumableArray3.default)(this.genRangeOfValues(splitPoint, endOffset))); + + return splitValues; + } + }, { + key: 'genRangeOfValues', + value: function genRangeOfValues(start, offset) { + var values = []; + var dir = offset > 0 ? -1 : 1; // This forces offset to approach 0 from either direction. + while (offset !== 0) { + values.push(start + offset); + offset += dir; + } + + return values; + } + }, { + key: 'flattenRanges', + value: function flattenRanges(selectedRows) { + var _this5 = this; + + return selectedRows.reduce(function (rows, row) { + if ((typeof row === 'undefined' ? 'undefined' : (0, _typeof3.default)(row)) === 'object') { + var values = _this5.genRangeOfValues(row.end, row.start - row.end); + rows.push.apply(rows, [row.end].concat((0, _toConsumableArray3.default)(values))); + } else { + rows.push(row); + } + + return rows; + }, []).sort(); + } + }, { + key: 'getColumnId', + value: function getColumnId(columnNumber) { + return columnNumber - 1; + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + style = _props.style, + allRowsSelected = _props.allRowsSelected, + multiSelectable = _props.multiSelectable, + onCellClick = _props.onCellClick, + onCellHover = _props.onCellHover, + onCellHoverExit = _props.onCellHoverExit, + onRowHover = _props.onRowHover, + onRowHoverExit = _props.onRowHoverExit, + onRowSelection = _props.onRowSelection, + selectable = _props.selectable, + deselectOnClickaway = _props.deselectOnClickaway, + showRowHover = _props.showRowHover, + stripedRows = _props.stripedRows, + displayRowCheckbox = _props.displayRowCheckbox, + preScanRows = _props.preScanRows, + other = (0, _objectWithoutProperties3.default)(_props, ['style', 'allRowsSelected', 'multiSelectable', 'onCellClick', 'onCellHover', 'onCellHoverExit', 'onRowHover', 'onRowHoverExit', 'onRowSelection', 'selectable', 'deselectOnClickaway', 'showRowHover', 'stripedRows', 'displayRowCheckbox', 'preScanRows']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + + return _react2.default.createElement( + _ClickAwayListener2.default, + { onClickAway: this.handleClickAway }, + _react2.default.createElement( + 'tbody', + (0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, other), + this.createRows() + ) + ); + } + }]); + return TableBody; +}(_react.Component); + +TableBody.muiName = 'TableBody'; +TableBody.defaultProps = { + allRowsSelected: false, + deselectOnClickaway: true, + displayRowCheckbox: true, + multiSelectable: false, + preScanRows: true, + selectable: true, + style: {} +}; +TableBody.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TableBody.propTypes = { + /** + * @ignore + * Set to true to indicate that all rows should be selected. + */ + allRowsSelected: _propTypes2.default.bool, + /** + * Children passed to table body. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Controls whether or not to deselect all selected + * rows after clicking outside the table. + */ + deselectOnClickaway: _propTypes2.default.bool, + /** + * Controls the display of the row checkbox. The default value is true. + */ + displayRowCheckbox: _propTypes2.default.bool, + /** + * @ignore + * If true, multiple table rows can be selected. + * CTRL/CMD+Click and SHIFT+Click are valid actions. + * The default value is false. + */ + multiSelectable: _propTypes2.default.bool, + /** + * @ignore + * Callback function for when a cell is clicked. + */ + onCellClick: _propTypes2.default.func, + /** + * @ignore + * Called when a table cell is hovered. rowNumber + * is the row number of the hovered row and columnId + * is the column number or the column key of the cell. + */ + onCellHover: _propTypes2.default.func, + /** + * @ignore + * Called when a table cell is no longer hovered. + * rowNumber is the row number of the row and columnId + * is the column number or the column key of the cell. + */ + onCellHoverExit: _propTypes2.default.func, + /** + * @ignore + * Called when a table row is hovered. + * rowNumber is the row number of the hovered row. + */ + onRowHover: _propTypes2.default.func, + /** + * @ignore + * Called when a table row is no longer + * hovered. rowNumber is the row number of the row + * that is no longer hovered. + */ + onRowHoverExit: _propTypes2.default.func, + /** + * @ignore + * Called when a row is selected. selectedRows is an + * array of all row selections. If all rows have been selected, + * the string "all" will be returned instead to indicate that + * all rows have been selected. + */ + onRowSelection: _propTypes2.default.func, + /** + * Controls whether or not the rows are pre-scanned to determine + * initial state. If your table has a large number of rows and + * you are experiencing a delay in rendering, turn off this property. + */ + preScanRows: _propTypes2.default.bool, + /** + * @ignore + * If true, table rows can be selected. If multiple + * row selection is desired, enable multiSelectable. + * The default value is true. + */ + selectable: _propTypes2.default.bool, + /** + * If true, table rows will be highlighted when + * the cursor is hovering over the row. The default + * value is false. + */ + showRowHover: _propTypes2.default.bool, + /** + * If true, every other table row starting + * with the first row will be striped. The default value is false. + */ + stripedRows: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = TableBody; \ No newline at end of file diff --git a/Table/TableFooter.js b/Table/TableFooter.js new file mode 100644 index 00000000000000..7ed8d7afbaf052 --- /dev/null +++ b/Table/TableFooter.js @@ -0,0 +1,154 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); + +var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _TableRowColumn = require('./TableRowColumn'); + +var _TableRowColumn2 = _interopRequireDefault(_TableRowColumn); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var tableFooter = context.muiTheme.tableFooter; + + + return { + cell: { + borderTop: '1px solid ' + tableFooter.borderColor, + verticalAlign: 'bottom', + padding: 20, + textAlign: 'left', + whiteSpace: 'nowrap' + } + }; +} + +var TableFooter = function (_Component) { + (0, _inherits3.default)(TableFooter, _Component); + + function TableFooter() { + (0, _classCallCheck3.default)(this, TableFooter); + return (0, _possibleConstructorReturn3.default)(this, (TableFooter.__proto__ || (0, _getPrototypeOf2.default)(TableFooter)).apply(this, arguments)); + } + + (0, _createClass3.default)(TableFooter, [{ + key: 'render', + value: function render() { + var _props = this.props, + adjustForCheckbox = _props.adjustForCheckbox, + children = _props.children, + className = _props.className, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['adjustForCheckbox', 'children', 'className', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var footerRows = _react2.default.Children.map(children, function (child, rowNumber) { + var newChildProps = { + displayBorder: false, + key: 'f-' + rowNumber, + rowNumber: rowNumber, + style: (0, _simpleAssign2.default)({}, styles.cell, child.props.style) + }; + + var newDescendants = void 0; + + if (adjustForCheckbox) { + newDescendants = [_react2.default.createElement(_TableRowColumn2.default, { key: 'fpcb' + rowNumber, style: { width: 24 } })].concat((0, _toConsumableArray3.default)(_react2.default.Children.toArray(child.props.children))); + } else { + newDescendants = child.props.children; + } + + return _react2.default.cloneElement(child, newChildProps, newDescendants); + }); + + return _react2.default.createElement( + 'tfoot', + (0, _extends3.default)({ className: className, style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, other), + footerRows + ); + } + }]); + return TableFooter; +}(_react.Component); + +TableFooter.muiName = 'TableFooter'; +TableFooter.defaultProps = { + adjustForCheckbox: true, + style: {} +}; +TableFooter.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TableFooter.propTypes = { + /** + * @ignore + * Controls whether or not header rows should be adjusted + * for a checkbox column. If the select all checkbox is true, + * this property will not influence the number of columns. + * This is mainly useful for "super header" rows so that + * the checkbox column does not create an offset that needs + * to be accounted for manually. + */ + adjustForCheckbox: _propTypes2.default.bool, + /** + * Children passed to table footer. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = TableFooter; \ No newline at end of file diff --git a/Table/TableHeader.js b/Table/TableHeader.js new file mode 100644 index 00000000000000..ab4301201d72f2 --- /dev/null +++ b/Table/TableHeader.js @@ -0,0 +1,258 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Checkbox = require('../Checkbox'); + +var _Checkbox2 = _interopRequireDefault(_Checkbox); + +var _TableHeaderColumn = require('./TableHeaderColumn'); + +var _TableHeaderColumn2 = _interopRequireDefault(_TableHeaderColumn); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var tableHeader = context.muiTheme.tableHeader; + + + return { + root: { + borderBottom: '1px solid ' + tableHeader.borderColor + } + }; +} + +var TableHeader = function (_Component) { + (0, _inherits3.default)(TableHeader, _Component); + + function TableHeader() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TableHeader); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableHeader.__proto__ || (0, _getPrototypeOf2.default)(TableHeader)).call.apply(_ref, [this].concat(args))), _this), _this.handleCheckAll = function (event, checked) { + if (_this.props.onSelectAll) { + _this.props.onSelectAll(checked); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TableHeader, [{ + key: 'createSuperHeaderRows', + value: function createSuperHeaderRows() { + var numChildren = _react2.default.Children.count(this.props.children); + if (numChildren === 1) return undefined; + + var superHeaders = []; + for (var index = 0; index < numChildren - 1; index++) { + var child = this.props.children[index]; + + if (!_react2.default.isValidElement(child)) continue; + + var props = { + key: 'sh' + index, + rowNumber: index + }; + superHeaders.push(this.createSuperHeaderRow(child, props)); + } + + if (superHeaders.length) return superHeaders; + } + }, { + key: 'createSuperHeaderRow', + value: function createSuperHeaderRow(child, props) { + var children = []; + if (this.props.adjustForCheckbox) { + children.push(this.getCheckboxPlaceholder(props)); + } + _react2.default.Children.forEach(child.props.children, function (child) { + children.push(child); + }); + + return _react2.default.cloneElement(child, props, children); + } + }, { + key: 'createBaseHeaderRow', + value: function createBaseHeaderRow() { + var childrenArray = _react2.default.Children.toArray(this.props.children); + var numChildren = childrenArray.length; + if (numChildren < 1) { + return null; + } + + var child = childrenArray[numChildren - 1]; + + var props = { + key: 'h' + numChildren, + rowNumber: numChildren + }; + + var children = [this.getSelectAllCheckboxColumn(props)]; + _react2.default.Children.forEach(child.props.children, function (child) { + children.push(child); + }); + + return _react2.default.cloneElement(child, props, children); + } + }, { + key: 'getCheckboxPlaceholder', + value: function getCheckboxPlaceholder(props) { + if (!this.props.adjustForCheckbox) return null; + + var disabled = !this.props.enableSelectAll; + var key = 'hpcb' + props.rowNumber; + return _react2.default.createElement(_TableHeaderColumn2.default, { + key: key, + style: { + width: 24, + cursor: disabled ? 'default' : 'inherit' + } + }); + } + }, { + key: 'getSelectAllCheckboxColumn', + value: function getSelectAllCheckboxColumn(props) { + if (!this.props.displaySelectAll) return this.getCheckboxPlaceholder(props); + + var disabled = !this.props.enableSelectAll; + var checkbox = _react2.default.createElement(_Checkbox2.default, { + key: 'selectallcb', + name: 'selectallcb', + value: 'selected', + disabled: disabled, + checked: this.props.selectAllSelected, + onCheck: this.handleCheckAll + }); + + var key = 'hpcb' + props.rowNumber; + return _react2.default.createElement( + _TableHeaderColumn2.default, + { + key: key, + style: { + width: 24, + cursor: disabled ? 'not-allowed' : 'inherit' + } + }, + checkbox + ); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + className = _props.className, + style = _props.style; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var superHeaderRows = this.createSuperHeaderRows(); + var baseHeaderRow = this.createBaseHeaderRow(); + + return _react2.default.createElement( + 'thead', + { className: className, style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, + superHeaderRows, + baseHeaderRow + ); + } + }]); + return TableHeader; +}(_react.Component); + +TableHeader.muiName = 'TableHeader'; +TableHeader.defaultProps = { + adjustForCheckbox: true, + displaySelectAll: true, + enableSelectAll: true, + selectAllSelected: false +}; +TableHeader.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TableHeader.propTypes = { + /** + * Controls whether or not header rows should be + * adjusted for a checkbox column. If the select all + * checkbox is true, this property will not influence + * the number of columns. This is mainly useful for + * "super header" rows so that the checkbox column + * does not create an offset that needs to be accounted + * for manually. + */ + adjustForCheckbox: _propTypes2.default.bool, + /** + * Children passed to table header. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Controls whether or not the select all checkbox is displayed. + */ + displaySelectAll: _propTypes2.default.bool, + /** + * If set to true, the select all button will be interactable. + * If set to false, the button will not be interactable. + * To hide the checkbox, set displaySelectAll to false. + */ + enableSelectAll: _propTypes2.default.bool, + /** + * @ignore + * Callback when select all has been checked. + */ + onSelectAll: _propTypes2.default.func, + /** + * @ignore + * True when select all has been checked. + */ + selectAllSelected: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = TableHeader; \ No newline at end of file diff --git a/Table/TableHeaderColumn.js b/Table/TableHeaderColumn.js new file mode 100644 index 00000000000000..842d745af2a29d --- /dev/null +++ b/Table/TableHeaderColumn.js @@ -0,0 +1,202 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Tooltip = require('../internal/Tooltip'); + +var _Tooltip2 = _interopRequireDefault(_Tooltip); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var tableHeaderColumn = context.muiTheme.tableHeaderColumn; + + + return { + root: { + fontWeight: 'normal', + fontSize: 12, + paddingLeft: tableHeaderColumn.spacing, + paddingRight: tableHeaderColumn.spacing, + height: tableHeaderColumn.height, + textAlign: 'left', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + color: tableHeaderColumn.textColor, + position: 'relative' + }, + tooltip: { + boxSizing: 'border-box', + marginTop: tableHeaderColumn.height / 2 + } + }; +} + +var TableHeaderColumn = function (_Component) { + (0, _inherits3.default)(TableHeaderColumn, _Component); + + function TableHeaderColumn() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TableHeaderColumn); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableHeaderColumn.__proto__ || (0, _getPrototypeOf2.default)(TableHeaderColumn)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false + }, _this.onMouseEnter = function () { + if (_this.props.tooltip !== undefined) { + _this.setState({ hovered: true }); + } + }, _this.onMouseLeave = function () { + if (_this.props.tooltip !== undefined) { + _this.setState({ hovered: false }); + } + }, _this.onClick = function (event) { + if (_this.props.onClick) { + _this.props.onClick(event, _this.props.columnNumber); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TableHeaderColumn, [{ + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + className = _props.className, + columnNumber = _props.columnNumber, + hoverable = _props.hoverable, + onClick = _props.onClick, + onHover = _props.onHover, + onHoverExit = _props.onHoverExit, + style = _props.style, + tooltip = _props.tooltip, + tooltipStyle = _props.tooltipStyle, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'columnNumber', 'hoverable', 'onClick', 'onHover', 'onHoverExit', 'style', 'tooltip', 'tooltipStyle']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var handlers = { + onMouseEnter: this.onMouseEnter, + onMouseLeave: this.onMouseLeave, + onClick: this.onClick + }; + + var tooltipNode = void 0; + + if (tooltip !== undefined) { + tooltipNode = _react2.default.createElement(_Tooltip2.default, { + label: tooltip, + show: this.state.hovered, + style: (0, _simpleAssign2.default)(styles.tooltip, tooltipStyle) + }); + } + + return _react2.default.createElement( + 'th', + (0, _extends3.default)({ + className: className, + style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) + }, handlers, other), + tooltipNode, + children + ); + } + }]); + return TableHeaderColumn; +}(_react.Component); + +TableHeaderColumn.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TableHeaderColumn.propTypes = { + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Number to identify the header row. This property + * is automatically populated when used with TableHeader. + */ + columnNumber: _propTypes2.default.number, + /** + * @ignore + * Not used here but we need to remove it from the root element. + */ + hoverable: _propTypes2.default.bool, + /** @ignore */ + onClick: _propTypes2.default.func, + /** + * @ignore + * Not used here but we need to remove it from the root element. + */ + onHover: _propTypes2.default.func, + /** + * @ignore + * Not used here but we need to remove it from the root element. + */ + onHoverExit: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The string to supply to the tooltip. If not + * string is supplied no tooltip will be shown. + */ + tooltip: _propTypes2.default.string, + /** + * Additional styling that can be applied to the tooltip. + */ + tooltipStyle: _propTypes2.default.object +} : void 0; +exports.default = TableHeaderColumn; \ No newline at end of file diff --git a/Table/TableRow.js b/Table/TableRow.js new file mode 100644 index 00000000000000..b85dbb8bca8bf9 --- /dev/null +++ b/Table/TableRow.js @@ -0,0 +1,283 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var tableRow = context.muiTheme.tableRow; + + + var cellBgColor = 'inherit'; + if (props.hovered || state.hovered) { + cellBgColor = tableRow.hoverColor; + } else if (props.selected) { + cellBgColor = tableRow.selectedColor; + } else if (props.striped) { + cellBgColor = tableRow.stripeColor; + } + + return { + root: { + borderBottom: props.displayBorder && '1px solid ' + tableRow.borderColor, + color: tableRow.textColor, + height: tableRow.height + }, + cell: { + backgroundColor: cellBgColor + } + }; +} + +var TableRow = function (_Component) { + (0, _inherits3.default)(TableRow, _Component); + + function TableRow() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TableRow); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableRow.__proto__ || (0, _getPrototypeOf2.default)(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false + }, _this.onCellClick = function (event, columnIndex) { + if (_this.props.selectable && _this.props.onCellClick) { + _this.props.onCellClick(event, _this.props.rowNumber, columnIndex); + } + event.ctrlKey = true; + _this.onRowClick(event); + }, _this.onCellHover = function (event, columnIndex) { + if (_this.props.hoverable) { + _this.setState({ hovered: true }); + if (_this.props.onCellHover) _this.props.onCellHover(event, _this.props.rowNumber, columnIndex); + _this.onRowHover(event); + } + }, _this.onCellHoverExit = function (event, columnIndex) { + if (_this.props.hoverable) { + _this.setState({ hovered: false }); + if (_this.props.onCellHoverExit) _this.props.onCellHoverExit(event, _this.props.rowNumber, columnIndex); + _this.onRowHoverExit(event); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TableRow, [{ + key: 'onRowClick', + value: function onRowClick(event) { + if (this.props.selectable && this.props.onRowClick) { + this.props.onRowClick(event, this.props.rowNumber); + } + } + }, { + key: 'onRowHover', + value: function onRowHover(event) { + if (this.props.onRowHover) { + this.props.onRowHover(event, this.props.rowNumber); + } + } + }, { + key: 'onRowHoverExit', + value: function onRowHoverExit(event) { + if (this.props.onRowHoverExit) { + this.props.onRowHoverExit(event, this.props.rowNumber); + } + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + className = _props.className, + displayBorder = _props.displayBorder, + hoverable = _props.hoverable, + hovered = _props.hovered, + onCellClick = _props.onCellClick, + onCellHover = _props.onCellHover, + onCellHoverExit = _props.onCellHoverExit, + onRowClick = _props.onRowClick, + onRowHover = _props.onRowHover, + onRowHoverExit = _props.onRowHoverExit, + rowNumber = _props.rowNumber, + selectable = _props.selectable, + selected = _props.selected, + striped = _props.striped, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['className', 'displayBorder', 'hoverable', 'hovered', 'onCellClick', 'onCellHover', 'onCellHoverExit', 'onRowClick', 'onRowHover', 'onRowHoverExit', 'rowNumber', 'selectable', 'selected', 'striped', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + var rowColumns = _react2.default.Children.map(this.props.children, function (child, columnNumber) { + if (_react2.default.isValidElement(child)) { + return _react2.default.cloneElement(child, { + columnNumber: columnNumber, + hoverable: _this2.props.hoverable, + key: _this2.props.rowNumber + '-' + columnNumber, + onClick: _this2.onCellClick, + onHover: _this2.onCellHover, + onHoverExit: _this2.onCellHoverExit, + style: (0, _simpleAssign2.default)({}, styles.cell, child.props.style) + }); + } + }); + + return _react2.default.createElement( + 'tr', + (0, _extends3.default)({ + className: className, + style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) + }, other), + rowColumns + ); + } + }]); + return TableRow; +}(_react.Component); + +TableRow.defaultProps = { + displayBorder: true, + hoverable: false, + hovered: false, + selectable: true, + striped: false +}; +TableRow.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TableRow.propTypes = { + /** + * Children passed to table row. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * If true, row border will be displayed for the row. + * If false, no border will be drawn. + */ + displayBorder: _propTypes2.default.bool, + /** + * Controls whether or not the row responds to hover events. + */ + hoverable: _propTypes2.default.bool, + /** + * Controls whether or not the row should be rendered as being + * hovered. This property is evaluated in addition to this.state.hovered + * and can be used to synchronize the hovered state with some other + * external events. + */ + hovered: _propTypes2.default.bool, + /** + * @ignore + * Called when a row cell is clicked. + * rowNumber is the row number and columnId is + * the column number or the column key. + */ + onCellClick: _propTypes2.default.func, + /** + * @ignore + * Called when a table cell is hovered. + * rowNumber is the row number of the hovered row + * and columnId is the column number or the column key of the cell. + */ + onCellHover: _propTypes2.default.func, + /** + * @ignore + * Called when a table cell is no longer hovered. + * rowNumber is the row number of the row and columnId + * is the column number or the column key of the cell. + */ + onCellHoverExit: _propTypes2.default.func, + /** + * @ignore + * Called when row is clicked. + */ + onRowClick: _propTypes2.default.func, + /** + * @ignore + * Called when a table row is hovered. + * rowNumber is the row number of the hovered row. + */ + onRowHover: _propTypes2.default.func, + /** + * @ignore + * Called when a table row is no longer hovered. + * rowNumber is the row number of the row that is no longer hovered. + */ + onRowHoverExit: _propTypes2.default.func, + /** + * Number to identify the row. This property is + * automatically populated when used with the TableBody component. + */ + rowNumber: _propTypes2.default.number, + /** + * If true, table rows can be selected. If multiple row + * selection is desired, enable multiSelectable. + * The default value is true. + */ + selectable: _propTypes2.default.bool, + /** + * Indicates that a particular row is selected. + * This property can be used to programmatically select rows. + */ + selected: _propTypes2.default.bool, + /** + * Indicates whether or not the row is striped. + */ + striped: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = TableRow; \ No newline at end of file diff --git a/Table/TableRowColumn.js b/Table/TableRowColumn.js new file mode 100644 index 00000000000000..fefdc55e743609 --- /dev/null +++ b/Table/TableRowColumn.js @@ -0,0 +1,183 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var tableRowColumn = context.muiTheme.tableRowColumn; + + + var styles = { + root: { + paddingLeft: tableRowColumn.spacing, + paddingRight: tableRowColumn.spacing, + height: tableRowColumn.height, + textAlign: 'left', + fontSize: 13, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis' + } + }; + + if (_react2.default.Children.count(props.children) === 1 && !isNaN(props.children)) { + styles.textAlign = 'right'; + } + + return styles; +} + +var TableRowColumn = function (_Component) { + (0, _inherits3.default)(TableRowColumn, _Component); + + function TableRowColumn() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TableRowColumn); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TableRowColumn.__proto__ || (0, _getPrototypeOf2.default)(TableRowColumn)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + hovered: false + }, _this.onClick = function (event) { + if (_this.props.onClick) { + _this.props.onClick(event, _this.props.columnNumber); + } + }, _this.onMouseEnter = function (event) { + if (_this.props.hoverable) { + _this.setState({ hovered: true }); + if (_this.props.onHover) { + _this.props.onHover(event, _this.props.columnNumber); + } + } + }, _this.onMouseLeave = function (event) { + if (_this.props.hoverable) { + _this.setState({ hovered: false }); + if (_this.props.onHoverExit) { + _this.props.onHoverExit(event, _this.props.columnNumber); + } + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TableRowColumn, [{ + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + className = _props.className, + columnNumber = _props.columnNumber, + hoverable = _props.hoverable, + onClick = _props.onClick, + onHover = _props.onHover, + onHoverExit = _props.onHoverExit, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'columnNumber', 'hoverable', 'onClick', 'onHover', 'onHoverExit', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var handlers = { + onClick: this.onClick, + onMouseEnter: this.onMouseEnter, + onMouseLeave: this.onMouseLeave + }; + + return _react2.default.createElement( + 'td', + (0, _extends3.default)({ + className: className, + style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) + }, handlers, other), + children + ); + } + }]); + return TableRowColumn; +}(_react.Component); + +TableRowColumn.defaultProps = { + hoverable: false +}; +TableRowColumn.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TableRowColumn.propTypes = { + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * @ignore + * Number to identify the header row. This property + * is automatically populated when used with TableHeader. + */ + columnNumber: _propTypes2.default.number, + /** + * @ignore + * If true, this column responds to hover events. + */ + hoverable: _propTypes2.default.bool, + /** @ignore */ + onClick: _propTypes2.default.func, + /** @ignore */ + onHover: _propTypes2.default.func, + /** + * @ignore + * Callback function for hover exit event. + */ + onHoverExit: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = TableRowColumn; \ No newline at end of file diff --git a/Table/index.js b/Table/index.js new file mode 100644 index 00000000000000..336167242f9e5c --- /dev/null +++ b/Table/index.js @@ -0,0 +1,45 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.TableRowColumn = exports.TableRow = exports.TableHeaderColumn = exports.TableHeader = exports.TableFooter = exports.TableBody = exports.Table = undefined; + +var _Table2 = require('./Table'); + +var _Table3 = _interopRequireDefault(_Table2); + +var _TableBody2 = require('./TableBody'); + +var _TableBody3 = _interopRequireDefault(_TableBody2); + +var _TableFooter2 = require('./TableFooter'); + +var _TableFooter3 = _interopRequireDefault(_TableFooter2); + +var _TableHeader2 = require('./TableHeader'); + +var _TableHeader3 = _interopRequireDefault(_TableHeader2); + +var _TableHeaderColumn2 = require('./TableHeaderColumn'); + +var _TableHeaderColumn3 = _interopRequireDefault(_TableHeaderColumn2); + +var _TableRow2 = require('./TableRow'); + +var _TableRow3 = _interopRequireDefault(_TableRow2); + +var _TableRowColumn2 = require('./TableRowColumn'); + +var _TableRowColumn3 = _interopRequireDefault(_TableRowColumn2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Table = _Table3.default; +exports.TableBody = _TableBody3.default; +exports.TableFooter = _TableFooter3.default; +exports.TableHeader = _TableHeader3.default; +exports.TableHeaderColumn = _TableHeaderColumn3.default; +exports.TableRow = _TableRow3.default; +exports.TableRowColumn = _TableRowColumn3.default; +exports.default = _Table3.default; \ No newline at end of file diff --git a/Tabs/InkBar.js b/Tabs/InkBar.js new file mode 100644 index 00000000000000..a205b7d14c517a --- /dev/null +++ b/Tabs/InkBar.js @@ -0,0 +1,100 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var _context$muiTheme = context.muiTheme, + inkBar = _context$muiTheme.inkBar, + isRtl = _context$muiTheme.isRtl; + + + return { + root: { + left: props.left, + width: props.width, + bottom: 0, + display: 'block', + backgroundColor: props.color || inkBar.backgroundColor, + height: 2, + marginTop: -2, + position: 'relative', + transition: _transitions2.default.easeOut('1s', isRtl ? 'right' : 'left') + } + }; +} + +var InkBar = function (_Component) { + (0, _inherits3.default)(InkBar, _Component); + + function InkBar() { + (0, _classCallCheck3.default)(this, InkBar); + return (0, _possibleConstructorReturn3.default)(this, (InkBar.__proto__ || (0, _getPrototypeOf2.default)(InkBar)).apply(this, arguments)); + } + + (0, _createClass3.default)(InkBar, [{ + key: 'render', + value: function render() { + var style = this.props.style; + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }); + } + }]); + return InkBar; +}(_react.Component); + +InkBar.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? InkBar.propTypes = { + color: _propTypes2.default.string, + left: _propTypes2.default.string.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + width: _propTypes2.default.string.isRequired +} : void 0; +exports.default = InkBar; \ No newline at end of file diff --git a/Tabs/Tab.js b/Tabs/Tab.js new file mode 100644 index 00000000000000..5d2c9b8149a4a3 --- /dev/null +++ b/Tabs/Tab.js @@ -0,0 +1,210 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _EnhancedButton = require('../internal/EnhancedButton'); + +var _EnhancedButton2 = _interopRequireDefault(_EnhancedButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var tabs = context.muiTheme.tabs; + + + return { + root: { + color: props.selected ? tabs.selectedTextColor : tabs.textColor, + fontWeight: 500, + fontSize: 14, + width: props.width, + textTransform: 'uppercase', + padding: 0 + }, + button: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + height: props.label && props.icon ? 72 : 48 + } + }; +} + +var Tab = function (_Component) { + (0, _inherits3.default)(Tab, _Component); + + function Tab() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Tab); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Tab.__proto__ || (0, _getPrototypeOf2.default)(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) { + if (_this.props.onClick) { + _this.props.onClick(_this.props.value, event, _this); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Tab, [{ + key: 'render', + value: function render() { + var _props = this.props, + icon = _props.icon, + index = _props.index, + onActive = _props.onActive, + onClick = _props.onClick, + selected = _props.selected, + label = _props.label, + buttonStyle = _props.buttonStyle, + style = _props.style, + value = _props.value, + width = _props.width, + other = (0, _objectWithoutProperties3.default)(_props, ['icon', 'index', 'onActive', 'onClick', 'selected', 'label', 'buttonStyle', 'style', 'value', 'width']); + + + var styles = getStyles(this.props, this.context); + + var iconElement = void 0; + if (icon && _react2.default.isValidElement(icon)) { + iconElement = _react2.default.cloneElement(icon, { + style: { + fontSize: 24, + color: icon.props && icon.props.style && icon.props.style.color ? icon.props.style.color : styles.root.color, + marginBottom: label ? 5 : 0 + } + }); + } + + var rippleOpacity = 0.3; + var rippleColor = this.context.muiTheme.tabs.selectedTextColor; + + return _react2.default.createElement( + _EnhancedButton2.default, + (0, _extends3.default)({}, other, { + style: (0, _simpleAssign2.default)(styles.root, style), + focusRippleColor: rippleColor, + touchRippleColor: rippleColor, + focusRippleOpacity: rippleOpacity, + touchRippleOpacity: rippleOpacity, + onClick: this.handleClick + }), + _react2.default.createElement( + 'div', + { style: (0, _simpleAssign2.default)(styles.button, buttonStyle) }, + iconElement, + label + ) + ); + } + }]); + return Tab; +}(_react.Component); + +Tab.muiName = 'Tab'; +Tab.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Tab.propTypes = { + /** + * Override the inline-styles of the button element. + */ + buttonStyle: _propTypes2.default.object, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Sets the icon of the tab, you can pass `FontIcon` or `SvgIcon` elements. + */ + icon: _propTypes2.default.node, + /** + * @ignore + */ + index: _propTypes2.default.any, + /** + * Sets the text value of the tab item to the string specified. + */ + label: _propTypes2.default.node, + /** + * Fired when the active tab changes by touch or tap. + * Use this event to specify any functionality when an active tab changes. + * For example - we are using this to route to home when the third tab becomes active. + * This function will always recieve the active tab as it\'s first argument. + */ + onActive: _propTypes2.default.func, + /** + * @ignore + * This property is overriden by the Tabs component. + */ + onClick: _propTypes2.default.func, + /** + * @ignore + * Defines if the current tab is selected or not. + * The Tabs component is responsible for setting this property. + */ + selected: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * If value prop passed to Tabs component, this value prop is also required. + * It assigns a value to the tab so that it can be selected by the Tabs. + */ + value: _propTypes2.default.any, + /** + * @ignore + * This property is overriden by the Tabs component. + */ + width: _propTypes2.default.string +} : void 0; +exports.default = Tab; \ No newline at end of file diff --git a/Tabs/TabTemplate.js b/Tabs/TabTemplate.js new file mode 100644 index 00000000000000..4b6cc722300c48 --- /dev/null +++ b/Tabs/TabTemplate.js @@ -0,0 +1,51 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var styles = { + width: '100%', + position: 'relative', + textAlign: 'initial' +}; + +var TabTemplate = function TabTemplate(_ref) { + var children = _ref.children, + selected = _ref.selected, + style = _ref.style; + + var templateStyle = (0, _simpleAssign2.default)({}, styles, style); + if (!selected) { + templateStyle.height = 0; + templateStyle.overflow = 'hidden'; + } + + return _react2.default.createElement( + 'div', + { style: templateStyle }, + children + ); +}; + +process.env.NODE_ENV !== "production" ? TabTemplate.propTypes = { + children: _propTypes2.default.node, + selected: _propTypes2.default.bool, + style: _propTypes2.default.object +} : void 0; + +exports.default = TabTemplate; \ No newline at end of file diff --git a/Tabs/Tabs.js b/Tabs/Tabs.js new file mode 100644 index 00000000000000..b12fa286901916 --- /dev/null +++ b/Tabs/Tabs.js @@ -0,0 +1,326 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +var _TabTemplate = require('./TabTemplate'); + +var _TabTemplate2 = _interopRequireDefault(_TabTemplate); + +var _InkBar = require('./InkBar'); + +var _InkBar2 = _interopRequireDefault(_InkBar); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var tabs = context.muiTheme.tabs; + + + return { + tabItemContainer: { + width: '100%', + backgroundColor: tabs.backgroundColor, + whiteSpace: 'nowrap', + display: 'flex' + } + }; +} + +var Tabs = function (_Component) { + (0, _inherits3.default)(Tabs, _Component); + + function Tabs() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Tabs); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Tabs.__proto__ || (0, _getPrototypeOf2.default)(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = { selectedIndex: 0 }, _this.handleTabClick = function (value, event, tab) { + var valueLink = _this.getValueLink(_this.props); + var index = tab.props.index; + + if (valueLink.value && valueLink.value !== value || _this.state.selectedIndex !== index) { + valueLink.requestChange(value, event, tab); + } + + _this.setState({ selectedIndex: index }); + + if (tab.props.onActive) { + tab.props.onActive(tab); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Tabs, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var valueLink = this.getValueLink(this.props); + var initialIndex = this.props.initialSelectedIndex; + + this.setState({ + selectedIndex: valueLink.value !== undefined ? this.getSelectedIndex(this.props) : initialIndex < this.getTabCount() ? initialIndex : 0 + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(newProps, nextContext) { + var valueLink = this.getValueLink(newProps); + var newState = { + muiTheme: nextContext.muiTheme || this.context.muiTheme + }; + + if (valueLink.value !== undefined) { + newState.selectedIndex = this.getSelectedIndex(newProps); + } + + this.setState(newState); + } + }, { + key: 'getTabs', + value: function getTabs() { + var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props; + + var tabs = []; + + _react.Children.forEach(props.children, function (tab) { + if ((0, _react.isValidElement)(tab)) { + tabs.push(tab); + } + }); + + return tabs; + } + }, { + key: 'getTabCount', + value: function getTabCount() { + return this.getTabs().length; + } + + // Do not use outside of this component, it will be removed once valueLink is deprecated + + }, { + key: 'getValueLink', + value: function getValueLink(props) { + return props.valueLink || { + value: props.value, + requestChange: props.onChange + }; + } + }, { + key: 'getSelectedIndex', + value: function getSelectedIndex(props) { + var valueLink = this.getValueLink(props); + var selectedIndex = -1; + + this.getTabs(props).forEach(function (tab, index) { + if (valueLink.value === tab.props.value) { + selectedIndex = index; + } + }); + + return selectedIndex; + } + }, { + key: 'getSelected', + value: function getSelected(tab, index) { + var valueLink = this.getValueLink(this.props); + return valueLink.value ? valueLink.value === tab.props.value : this.state.selectedIndex === index; + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + contentContainerClassName = _props.contentContainerClassName, + contentContainerStyle = _props.contentContainerStyle, + initialSelectedIndex = _props.initialSelectedIndex, + inkBarStyle = _props.inkBarStyle, + inkBarContainerStyle = _props.inkBarContainerStyle, + onChange = _props.onChange, + style = _props.style, + tabItemContainerStyle = _props.tabItemContainerStyle, + tabTemplate = _props.tabTemplate, + tabTemplateStyle = _props.tabTemplateStyle, + other = (0, _objectWithoutProperties3.default)(_props, ['contentContainerClassName', 'contentContainerStyle', 'initialSelectedIndex', 'inkBarStyle', 'inkBarContainerStyle', 'onChange', 'style', 'tabItemContainerStyle', 'tabTemplate', 'tabTemplateStyle']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var valueLink = this.getValueLink(this.props); + var tabValue = valueLink.value; + var tabContent = []; + var width = 100 / this.getTabCount(); + + var tabs = this.getTabs().map(function (tab, index) { + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(tab.type && tab.type.muiName === 'Tab', 'Material-UI: Tabs only accepts Tab Components as children.\n Found ' + (tab.type.muiName || tab.type) + ' as child number ' + (index + 1) + ' of Tabs') : void 0; + + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(!tabValue || tab.props.value !== undefined, 'Material-UI: Tabs value prop has been passed, but Tab ' + index + '\n does not have a value prop. Needs value if Tabs is going\n to be a controlled component.') : void 0; + + tabContent.push(tab.props.children ? (0, _react.createElement)(tabTemplate || _TabTemplate2.default, { + key: index, + selected: _this2.getSelected(tab, index), + style: tabTemplateStyle + }, tab.props.children) : undefined); + + return (0, _react.cloneElement)(tab, { + key: index, + index: index, + selected: _this2.getSelected(tab, index), + width: width + '%', + onClick: _this2.handleTabClick + }); + }); + + var realSelectedIndex = valueLink.value ? this.getSelectedIndex(this.props) : this.state.selectedIndex; + + var inkBar = realSelectedIndex !== -1 ? _react2.default.createElement(_InkBar2.default, { + left: width * realSelectedIndex + '%', + width: width + '%', + style: inkBarStyle + }) : null; + + var inkBarContainerWidth = tabItemContainerStyle ? tabItemContainerStyle.width : '100%'; + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({ style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, other), + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.tabItemContainer, tabItemContainerStyle)) }, + tabs + ), + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)({ width: inkBarContainerWidth }, inkBarContainerStyle)) }, + inkBar + ), + _react2.default.createElement( + 'div', + { + style: prepareStyles((0, _simpleAssign2.default)({}, contentContainerStyle)), + className: contentContainerClassName + }, + tabContent + ) + ); + } + }]); + return Tabs; +}(_react.Component); + +Tabs.defaultProps = { + initialSelectedIndex: 0, + onChange: function onChange() {} +}; +Tabs.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Tabs.propTypes = { + /** + * Should be used to pass `Tab` components. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * The css class name of the content's container. + */ + contentContainerClassName: _propTypes2.default.string, + /** + * Override the inline-styles of the content's container. + */ + contentContainerStyle: _propTypes2.default.object, + /** + * Specify initial visible tab index. + * If `initialSelectedIndex` is set but larger than the total amount of specified tabs, + * `initialSelectedIndex` will revert back to default. + * If `initialSelectedIndex` is set to any negative value, no tab will be selected intially. + */ + initialSelectedIndex: _propTypes2.default.number, + /** + * Override the inline-styles of the InkBar. + */ + inkBarStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the InkBar container. + */ + inkBarContainerStyle: _propTypes2.default.object, + /** + * Called when the selected value change. + */ + onChange: _propTypes2.default.func, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Override the inline-styles of the tab-labels container. + */ + tabItemContainerStyle: _propTypes2.default.object, + /** + * Override the default tab template used to wrap the content of each tab element. + */ + tabTemplate: _propTypes2.default.func, + /** + * Override the inline-styles of the tab template. + */ + tabTemplateStyle: _propTypes2.default.object, + /** + * Makes Tabs controllable and selects the tab whose value prop matches this prop. + */ + value: _propTypes2.default.any +} : void 0; +exports.default = Tabs; \ No newline at end of file diff --git a/Tabs/index.js b/Tabs/index.js new file mode 100644 index 00000000000000..16718e79a78cce --- /dev/null +++ b/Tabs/index.js @@ -0,0 +1,20 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.Tabs = exports.Tab = undefined; + +var _Tab2 = require('./Tab'); + +var _Tab3 = _interopRequireDefault(_Tab2); + +var _Tabs2 = require('./Tabs'); + +var _Tabs3 = _interopRequireDefault(_Tabs2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Tab = _Tab3.default; +exports.Tabs = _Tabs3.default; +exports.default = _Tabs3.default; \ No newline at end of file diff --git a/TextField/EnhancedTextarea.js b/TextField/EnhancedTextarea.js new file mode 100644 index 00000000000000..af4427290c7288 --- /dev/null +++ b/TextField/EnhancedTextarea.js @@ -0,0 +1,257 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactEventListener = require('react-event-listener'); + +var _reactEventListener2 = _interopRequireDefault(_reactEventListener); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var rowsHeight = 24; + +function getStyles(props, context, state) { + return { + root: { + position: 'relative' // because the shadow has position: 'absolute' + }, + textarea: { + height: state.height, + width: '100%', + resize: 'none', + font: 'inherit', + padding: 0, + cursor: 'inherit' + }, + shadow: { + resize: 'none', + // Overflow also needed to here to remove the extra row + // added to textareas in Firefox. + overflow: 'hidden', + // Visibility needed to hide the extra text area on ipads + visibility: 'hidden', + position: 'absolute', + height: 'auto' + } + }; +} + +var EnhancedTextarea = function (_Component) { + (0, _inherits3.default)(EnhancedTextarea, _Component); + + function EnhancedTextarea() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, EnhancedTextarea); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EnhancedTextarea.__proto__ || (0, _getPrototypeOf2.default)(EnhancedTextarea)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + height: null + }, _this.handleResize = function (event) { + _this.syncHeightWithShadow(_this.props.value, event); + }, _this.handleChange = function (event) { + if (!_this.props.hasOwnProperty('value')) { + _this.syncHeightWithShadow(event.target.value); + } + + if (_this.props.hasOwnProperty('valueLink')) { + _this.props.valueLink.requestChange(event.target.value); + } + + if (_this.props.onChange) { + _this.props.onChange(event); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(EnhancedTextarea, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + height: this.props.rows * rowsHeight + }); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + this.syncHeightWithShadow(this.props.value); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.value !== this.props.value || nextProps.rowsMax !== this.props.rowsMax) { + this.syncHeightWithShadow(nextProps.value, null, nextProps); + } + } + }, { + key: 'getInputNode', + value: function getInputNode() { + return this.refs.input; + } + }, { + key: 'setValue', + value: function setValue(value) { + this.getInputNode().value = value; + this.syncHeightWithShadow(value); + } + }, { + key: 'syncHeightWithShadow', + value: function syncHeightWithShadow(newValue, event, props) { + var shadow = this.refs.shadow; + var displayText = this.props.hintText && (newValue === '' || newValue === undefined || newValue === null) ? this.props.hintText : newValue; + + if (displayText !== undefined) { + shadow.value = displayText; + } + + var newHeight = shadow.scrollHeight; + + // Guarding for jsdom, where scrollHeight isn't present. + // See https://github.com/tmpvar/jsdom/issues/1013 + if (newHeight === undefined) return; + + props = props || this.props; + + if (props.rowsMax >= props.rows) { + newHeight = Math.min(props.rowsMax * rowsHeight, newHeight); + } + + newHeight = Math.max(newHeight, rowsHeight); + + if (this.state.height !== newHeight) { + var input = this.refs.input; + var cursorPosition = input.selectionEnd; + this.setState({ + height: newHeight + }, function () { + input.setSelectionRange(cursorPosition, cursorPosition); + }); + + if (props.onHeightChange) { + props.onHeightChange(event, newHeight); + } + } + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + onChange = _props.onChange, + onHeightChange = _props.onHeightChange, + rows = _props.rows, + rowsMax = _props.rowsMax, + shadowStyle = _props.shadowStyle, + style = _props.style, + hintText = _props.hintText, + textareaStyle = _props.textareaStyle, + valueLink = _props.valueLink, + other = (0, _objectWithoutProperties3.default)(_props, ['onChange', 'onHeightChange', 'rows', 'rowsMax', 'shadowStyle', 'style', 'hintText', 'textareaStyle', 'valueLink']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + var rootStyles = (0, _simpleAssign2.default)(styles.root, style); + var textareaStyles = (0, _simpleAssign2.default)(styles.textarea, textareaStyle); + var shadowStyles = (0, _simpleAssign2.default)({}, textareaStyles, styles.shadow, shadowStyle); + var props = {}; + + if (this.props.hasOwnProperty('valueLink')) { + other.value = valueLink.value; + props.valueLink = valueLink; + } + + return _react2.default.createElement( + 'div', + { style: prepareStyles(rootStyles) }, + _react2.default.createElement(_reactEventListener2.default, { target: 'window', onResize: this.handleResize }), + _react2.default.createElement('textarea', (0, _extends3.default)({ + ref: 'shadow', + style: prepareStyles(shadowStyles), + tabIndex: '-1', + rows: this.props.rows, + defaultValue: this.props.defaultValue, + readOnly: true, + value: this.props.value + }, props)), + _react2.default.createElement('textarea', (0, _extends3.default)({}, other, { + ref: 'input', + rows: this.props.rows, + style: prepareStyles(textareaStyles), + onChange: this.handleChange + })) + ); + } + }]); + return EnhancedTextarea; +}(_react.Component); + +EnhancedTextarea.defaultProps = { + rows: 1 +}; +EnhancedTextarea.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? EnhancedTextarea.propTypes = { + defaultValue: _propTypes2.default.any, + disabled: _propTypes2.default.bool, + hintText: _propTypes2.default.node, + onChange: _propTypes2.default.func, + onHeightChange: _propTypes2.default.func, + rows: _propTypes2.default.number, + rowsMax: _propTypes2.default.number, + shadowStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + textareaStyle: _propTypes2.default.object, + value: _propTypes2.default.string, + valueLink: _propTypes2.default.object +} : void 0; +exports.default = EnhancedTextarea; \ No newline at end of file diff --git a/TextField/TextField.js b/TextField/TextField.js new file mode 100644 index 00000000000000..abe9d3ea11e057 --- /dev/null +++ b/TextField/TextField.js @@ -0,0 +1,591 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _shallowEqual = require('recompose/shallowEqual'); + +var _shallowEqual2 = _interopRequireDefault(_shallowEqual); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _EnhancedTextarea = require('./EnhancedTextarea'); + +var _EnhancedTextarea2 = _interopRequireDefault(_EnhancedTextarea); + +var _TextFieldHint = require('./TextFieldHint'); + +var _TextFieldHint2 = _interopRequireDefault(_TextFieldHint); + +var _TextFieldLabel = require('./TextFieldLabel'); + +var _TextFieldLabel2 = _interopRequireDefault(_TextFieldLabel); + +var _TextFieldUnderline = require('./TextFieldUnderline'); + +var _TextFieldUnderline2 = _interopRequireDefault(_TextFieldUnderline); + +var _warning = require('warning'); + +var _warning2 = _interopRequireDefault(_warning); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var getStyles = function getStyles(props, context, state) { + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + _context$muiTheme$tex = _context$muiTheme.textField, + floatingLabelColor = _context$muiTheme$tex.floatingLabelColor, + focusColor = _context$muiTheme$tex.focusColor, + textColor = _context$muiTheme$tex.textColor, + disabledTextColor = _context$muiTheme$tex.disabledTextColor, + backgroundColor = _context$muiTheme$tex.backgroundColor, + errorColor = _context$muiTheme$tex.errorColor; + + + var styles = { + root: { + fontSize: 16, + lineHeight: '24px', + width: props.fullWidth ? '100%' : 256, + height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48), + display: 'inline-block', + position: 'relative', + backgroundColor: backgroundColor, + fontFamily: baseTheme.fontFamily, + transition: _transitions2.default.easeOut('200ms', 'height'), + cursor: props.disabled ? 'not-allowed' : 'auto' + }, + error: { + position: 'relative', + bottom: 2, + fontSize: 12, + lineHeight: '12px', + color: errorColor, + transition: _transitions2.default.easeOut() + }, + floatingLabel: { + color: props.disabled ? disabledTextColor : floatingLabelColor, + pointerEvents: 'none' + }, + input: { + padding: 0, + position: 'relative', + width: '100%', + border: 'none', + outline: 'none', + backgroundColor: 'rgba(0,0,0,0)', + color: props.disabled ? disabledTextColor : textColor, + cursor: 'inherit', + font: 'inherit', + WebkitOpacity: 1, + WebkitTapHighlightColor: 'rgba(0,0,0,0)' // Remove mobile color flashing (deprecated style). + }, + inputNative: { + appearance: 'textfield' // Improve type search style. + } + }; + + styles.textarea = (0, _simpleAssign2.default)({}, styles.input, { + marginTop: props.floatingLabelText ? 36 : 12, + marginBottom: props.floatingLabelText ? -36 : -12, + boxSizing: 'border-box', + font: 'inherit' + }); + + // Do not assign a height to the textarea as he handles it on his own. + styles.input.height = '100%'; + + if (state.isFocused) { + styles.floatingLabel.color = focusColor; + } + + if (props.floatingLabelText) { + styles.input.boxSizing = 'border-box'; + + if (!props.multiLine) { + styles.input.marginTop = 14; + } + + if (state.errorText) { + styles.error.bottom = !props.multiLine ? styles.error.fontSize + 3 : 3; + } + } + + if (state.errorText) { + if (state.isFocused) { + styles.floatingLabel.color = styles.error.color; + } + } + + return styles; +}; + +/** + * Check if a value is valid to be displayed inside an input. + * + * @param The value to check. + * @returns True if the string provided is valid, false otherwise. + */ +function isValid(value) { + return value !== '' && value !== undefined && value !== null && !(Array.isArray(value) && value.length === 0); +} + +var TextField = function (_Component) { + (0, _inherits3.default)(TextField, _Component); + + function TextField() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TextField); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TextField.__proto__ || (0, _getPrototypeOf2.default)(TextField)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + isFocused: false, + errorText: undefined, + hasValue: false + }, _this.handleInputBlur = function (event) { + _this.setState({ isFocused: false }); + if (_this.props.onBlur) { + _this.props.onBlur(event); + } + }, _this.handleInputChange = function (event) { + if (!_this.props.hasOwnProperty('value')) { + _this.setState({ hasValue: isValid(event.target.value) }); + } + if (_this.props.onChange) { + _this.props.onChange(event, event.target.value); + } + }, _this.handleInputFocus = function (event) { + if (_this.props.disabled) { + return; + } + _this.setState({ isFocused: true }); + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + }, _this.handleHeightChange = function (event, height) { + var newHeight = height + 24; + if (_this.props.floatingLabelText) { + newHeight += 24; + } + _reactDom2.default.findDOMNode(_this).style.height = newHeight + 'px'; + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TextField, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var _props = this.props, + children = _props.children, + name = _props.name, + hintText = _props.hintText, + floatingLabelText = _props.floatingLabelText, + id = _props.id; + + + var propsLeaf = children ? children.props : this.props; + + this.setState({ + errorText: this.props.errorText, + hasValue: isValid(propsLeaf.value) || isValid(propsLeaf.defaultValue) + }); + + process.env.NODE_ENV !== "production" ? (0, _warning2.default)(name || hintText || floatingLabelText || id, 'Material-UI: We don\'t have enough information\n to build a robust unique id for the TextField component. Please provide an id or a name.') : void 0; + + var uniqueId = name + '-' + hintText + '-' + floatingLabelText + '-' + Math.floor(Math.random() * 0xFFFF); + this.uniqueId = uniqueId.replace(/[^A-Za-z0-9-]/gi, ''); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.disabled && !this.props.disabled) { + this.setState({ + isFocused: false + }); + } + + if (nextProps.errorText !== this.props.errorText) { + this.setState({ + errorText: nextProps.errorText + }); + } + + if (nextProps.children && nextProps.children.props) { + nextProps = nextProps.children.props; + } + + if (nextProps.hasOwnProperty('value')) { + var hasValue = isValid(nextProps.value); + + this.setState({ + hasValue: hasValue + }); + } + } + }, { + key: 'shouldComponentUpdate', + value: function shouldComponentUpdate(nextProps, nextState, nextContext) { + return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState) || !(0, _shallowEqual2.default)(this.context, nextContext); + } + }, { + key: 'blur', + value: function blur() { + if (this.input) { + this.getInputNode().blur(); + } + } + }, { + key: 'focus', + value: function focus() { + if (this.input) { + this.getInputNode().focus(); + } + } + }, { + key: 'select', + value: function select() { + if (this.input) { + this.getInputNode().select(); + } + } + }, { + key: 'getValue', + value: function getValue() { + return this.input ? this.getInputNode().value : undefined; + } + }, { + key: 'getInputNode', + value: function getInputNode() { + return this.props.children || this.props.multiLine ? this.input.getInputNode() : _reactDom2.default.findDOMNode(this.input); + } + }, { + key: '_isControlled', + value: function _isControlled() { + return this.props.hasOwnProperty('value'); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props2 = this.props, + children = _props2.children, + className = _props2.className, + disabled = _props2.disabled, + errorStyle = _props2.errorStyle, + errorText = _props2.errorText, + floatingLabelFixed = _props2.floatingLabelFixed, + floatingLabelFocusStyle = _props2.floatingLabelFocusStyle, + floatingLabelShrinkStyle = _props2.floatingLabelShrinkStyle, + floatingLabelStyle = _props2.floatingLabelStyle, + floatingLabelText = _props2.floatingLabelText, + fullWidth = _props2.fullWidth, + hintText = _props2.hintText, + hintStyle = _props2.hintStyle, + id = _props2.id, + inputStyle = _props2.inputStyle, + multiLine = _props2.multiLine, + onBlur = _props2.onBlur, + onChange = _props2.onChange, + onFocus = _props2.onFocus, + style = _props2.style, + type = _props2.type, + underlineDisabledStyle = _props2.underlineDisabledStyle, + underlineFocusStyle = _props2.underlineFocusStyle, + underlineShow = _props2.underlineShow, + underlineStyle = _props2.underlineStyle, + rows = _props2.rows, + rowsMax = _props2.rowsMax, + textareaStyle = _props2.textareaStyle, + other = (0, _objectWithoutProperties3.default)(_props2, ['children', 'className', 'disabled', 'errorStyle', 'errorText', 'floatingLabelFixed', 'floatingLabelFocusStyle', 'floatingLabelShrinkStyle', 'floatingLabelStyle', 'floatingLabelText', 'fullWidth', 'hintText', 'hintStyle', 'id', 'inputStyle', 'multiLine', 'onBlur', 'onChange', 'onFocus', 'style', 'type', 'underlineDisabledStyle', 'underlineFocusStyle', 'underlineShow', 'underlineStyle', 'rows', 'rowsMax', 'textareaStyle']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + var inputId = id || this.uniqueId; + + var errorTextElement = this.state.errorText && _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.error, errorStyle)) }, + this.state.errorText + ); + + var floatingLabelTextElement = floatingLabelText && _react2.default.createElement( + _TextFieldLabel2.default, + { + muiTheme: this.context.muiTheme, + style: (0, _simpleAssign2.default)(styles.floatingLabel, floatingLabelStyle, this.state.isFocused ? floatingLabelFocusStyle : null), + shrinkStyle: floatingLabelShrinkStyle, + htmlFor: inputId, + shrink: this.state.hasValue || this.state.isFocused || floatingLabelFixed, + disabled: disabled + }, + floatingLabelText + ); + + var inputProps = { + id: inputId, + ref: function ref(elem) { + return _this2.input = elem; + }, + disabled: this.props.disabled, + onBlur: this.handleInputBlur, + onChange: this.handleInputChange, + onFocus: this.handleInputFocus + }; + + var childStyleMerged = (0, _simpleAssign2.default)(styles.input, inputStyle); + + var inputElement = void 0; + if (children) { + inputElement = _react2.default.cloneElement(children, (0, _extends3.default)({}, inputProps, children.props, { + style: (0, _simpleAssign2.default)(childStyleMerged, children.props.style) + })); + } else { + inputElement = multiLine ? _react2.default.createElement(_EnhancedTextarea2.default, (0, _extends3.default)({ + style: childStyleMerged, + textareaStyle: (0, _simpleAssign2.default)(styles.textarea, styles.inputNative, textareaStyle), + rows: rows, + rowsMax: rowsMax, + hintText: hintText + }, other, inputProps, { + onHeightChange: this.handleHeightChange + })) : _react2.default.createElement('input', (0, _extends3.default)({ + type: type, + style: prepareStyles((0, _simpleAssign2.default)(styles.inputNative, childStyleMerged)) + }, other, inputProps)); + } + + var rootProps = {}; + + if (children) { + rootProps = other; + } + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, rootProps, { + className: className, + style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) + }), + floatingLabelTextElement, + hintText ? _react2.default.createElement(_TextFieldHint2.default, { + muiTheme: this.context.muiTheme, + show: !(this.state.hasValue || floatingLabelText && !this.state.isFocused) || !this.state.hasValue && floatingLabelText && floatingLabelFixed && !this.state.isFocused, + style: hintStyle, + text: hintText + }) : null, + inputElement, + underlineShow ? _react2.default.createElement(_TextFieldUnderline2.default, { + disabled: disabled, + disabledStyle: underlineDisabledStyle, + error: !!this.state.errorText, + errorStyle: errorStyle, + focus: this.state.isFocused, + focusStyle: underlineFocusStyle, + muiTheme: this.context.muiTheme, + style: underlineStyle + }) : null, + errorTextElement + ); + } + }]); + return TextField; +}(_react.Component); + +TextField.defaultProps = { + disabled: false, + floatingLabelFixed: false, + multiLine: false, + fullWidth: false, + type: 'text', + underlineShow: true, + rows: 1 +}; +TextField.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TextField.propTypes = { + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * The text string to use for the default value. + */ + defaultValue: _propTypes2.default.any, + /** + * Disables the text field if set to true. + */ + disabled: _propTypes2.default.bool, + /** + * The style object to use to override error styles. + */ + errorStyle: _propTypes2.default.object, + /** + * The error content to display. + */ + errorText: _propTypes2.default.node, + /** + * If true, the floating label will float even when there is no value. + */ + floatingLabelFixed: _propTypes2.default.bool, + /** + * The style object to use to override floating label styles when focused. + */ + floatingLabelFocusStyle: _propTypes2.default.object, + /** + * The style object to use to override floating label styles when shrunk. + */ + floatingLabelShrinkStyle: _propTypes2.default.object, + /** + * The style object to use to override floating label styles. + */ + floatingLabelStyle: _propTypes2.default.object, + /** + * The content to use for the floating label element. + */ + floatingLabelText: _propTypes2.default.node, + /** + * If true, the field receives the property width 100%. + */ + fullWidth: _propTypes2.default.bool, + /** + * Override the inline-styles of the TextField's hint text element. + */ + hintStyle: _propTypes2.default.object, + /** + * The hint content to display. + */ + hintText: _propTypes2.default.node, + /** + * The id prop for the text field. + */ + id: _propTypes2.default.string, + /** + * Override the inline-styles of the TextField's input element. + * When multiLine is false: define the style of the input element. + * When multiLine is true: define the style of the container of the textarea. + */ + inputStyle: _propTypes2.default.object, + /** + * If true, a textarea element will be rendered. + * The textarea also grows and shrinks according to the number of lines. + */ + multiLine: _propTypes2.default.bool, + /** + * Name applied to the input. + */ + name: _propTypes2.default.string, + /** @ignore */ + onBlur: _propTypes2.default.func, + /** + * Callback function that is fired when the textfield's value changes. + * + * @param {object} event Change event targeting the text field. + * @param {string} newValue The new value of the text field. + */ + onChange: _propTypes2.default.func, + /** @ignore */ + onFocus: _propTypes2.default.func, + /** + * Number of rows to display when multiLine option is set to true. + */ + rows: _propTypes2.default.number, + /** + * Maximum number of rows to display when + * multiLine option is set to true. + */ + rowsMax: _propTypes2.default.number, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Override the inline-styles of the TextField's textarea element. + * The TextField use either a textarea or an input, + * this property has effects only when multiLine is true. + */ + textareaStyle: _propTypes2.default.object, + /** + * Specifies the type of input to display + * such as "password" or "text". + */ + type: _propTypes2.default.string, + /** + * Override the inline-styles of the + * TextField's underline element when disabled. + */ + underlineDisabledStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the TextField's + * underline element when focussed. + */ + underlineFocusStyle: _propTypes2.default.object, + /** + * If true, shows the underline for the text field. + */ + underlineShow: _propTypes2.default.bool, + /** + * Override the inline-styles of the TextField's underline element. + */ + underlineStyle: _propTypes2.default.object, + /** + * The value of the text field. + */ + value: _propTypes2.default.any +} : void 0; +exports.default = TextField; \ No newline at end of file diff --git a/TextField/TextFieldHint.js b/TextField/TextFieldHint.js new file mode 100644 index 00000000000000..6d5d99c5e5fb2f --- /dev/null +++ b/TextField/TextFieldHint.js @@ -0,0 +1,80 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props) { + var hintColor = props.muiTheme.textField.hintColor, + show = props.show; + + + return { + root: { + position: 'absolute', + opacity: show ? 1 : 0, + color: hintColor, + transition: _transitions2.default.easeOut(), + bottom: 12 + } + }; +} + +var TextFieldHint = function TextFieldHint(props) { + var prepareStyles = props.muiTheme.prepareStyles, + style = props.style, + text = props.text; + + + var styles = getStyles(props); + + return _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)(styles.root, style)) }, + text + ); +}; + +process.env.NODE_ENV !== "production" ? TextFieldHint.propTypes = { + /** + * @ignore + * The material-ui theme applied to this component. + */ + muiTheme: _propTypes2.default.object.isRequired, + /** + * True if the hint text should be visible. + */ + show: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The hint text displayed. + */ + text: _propTypes2.default.node +} : void 0; + +TextFieldHint.defaultProps = { + show: true +}; + +exports.default = TextFieldHint; \ No newline at end of file diff --git a/TextField/TextFieldLabel.js b/TextField/TextFieldLabel.js new file mode 100644 index 00000000000000..86b696c35607a3 --- /dev/null +++ b/TextField/TextFieldLabel.js @@ -0,0 +1,117 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props) { + var defaultStyles = { + position: 'absolute', + lineHeight: '22px', + top: 38, + transition: _transitions2.default.easeOut(), + zIndex: 1, // Needed to display label above Chrome's autocomplete field background + transform: 'scale(1) translate(0, 0)', + transformOrigin: 'left top', + pointerEvents: 'auto', + userSelect: 'none' + }; + + var shrinkStyles = props.shrink ? (0, _simpleAssign2.default)({ + transform: 'scale(0.75) translate(0, -28px)', + pointerEvents: 'none' + }, props.shrinkStyle) : null; + + return { + root: (0, _simpleAssign2.default)(defaultStyles, props.style, shrinkStyles) + }; +} + +var TextFieldLabel = function TextFieldLabel(props) { + var muiTheme = props.muiTheme, + className = props.className, + children = props.children, + htmlFor = props.htmlFor, + onClick = props.onClick; + var prepareStyles = muiTheme.prepareStyles; + + var styles = getStyles(props); + + return _react2.default.createElement( + 'label', + { + className: className, + style: prepareStyles(styles.root), + htmlFor: htmlFor, + onClick: onClick + }, + children + ); +}; + +process.env.NODE_ENV !== "production" ? TextFieldLabel.propTypes = { + /** + * The label contents. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Disables the label if set to true. + */ + disabled: _propTypes2.default.bool, + /** + * The id of the target element that this label should refer to. + */ + htmlFor: _propTypes2.default.string, + /** + * @ignore + * The material-ui theme applied to this component. + */ + muiTheme: _propTypes2.default.object.isRequired, + /** + * Callback function for when the label is selected via a click. + * + * @param {object} event Click event targeting the text field label. + */ + onClick: _propTypes2.default.func, + /** + * True if the floating label should shrink. + */ + shrink: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element when shrunk. + */ + shrinkStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; + +TextFieldLabel.defaultProps = { + disabled: false, + shrink: false +}; + +exports.default = TextFieldLabel; \ No newline at end of file diff --git a/TextField/TextFieldUnderline.js b/TextField/TextFieldUnderline.js new file mode 100644 index 00000000000000..be58d5b35468de --- /dev/null +++ b/TextField/TextFieldUnderline.js @@ -0,0 +1,139 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var propTypes = { + /** + * True if the parent `TextField` is disabled. + */ + disabled: _propTypes2.default.bool, + /** + * Override the inline-styles of the underline when parent `TextField` is disabled. + */ + disabledStyle: _propTypes2.default.object, + /** + * True if the parent `TextField` has an error. + */ + error: _propTypes2.default.bool, + /** + * Override the inline-styles of the underline when parent `TextField` has an error. + */ + errorStyle: _propTypes2.default.object, + /** + * True if the parent `TextField` is focused. + */ + focus: _propTypes2.default.bool, + /** + * Override the inline-styles of the underline when parent `TextField` is focused. + */ + focusStyle: _propTypes2.default.object, + /** + * @ignore + * The material-ui theme applied to this component. + */ + muiTheme: _propTypes2.default.object.isRequired, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +}; + +var defaultProps = { + disabled: false, + disabledStyle: {}, + error: false, + errorStyle: {}, + focus: false, + focusStyle: {}, + style: {} +}; + +var TextFieldUnderline = function TextFieldUnderline(props) { + var disabled = props.disabled, + disabledStyle = props.disabledStyle, + error = props.error, + errorStyle = props.errorStyle, + focus = props.focus, + focusStyle = props.focusStyle, + muiTheme = props.muiTheme, + style = props.style; + var errorStyleColor = errorStyle.color; + var prepareStyles = muiTheme.prepareStyles, + _muiTheme$textField = muiTheme.textField, + borderColor = _muiTheme$textField.borderColor, + disabledTextColor = _muiTheme$textField.disabledTextColor, + errorColor = _muiTheme$textField.errorColor, + focusColor = _muiTheme$textField.focusColor; + + + var styles = { + root: { + borderTop: 'none', + borderLeft: 'none', + borderRight: 'none', + borderBottomStyle: 'solid', + borderBottomWidth: 1, + borderColor: borderColor, + bottom: 8, + boxSizing: 'content-box', + margin: 0, + position: 'absolute', + width: '100%' + }, + disabled: { + borderBottomStyle: 'dotted', + borderBottomWidth: 2, + borderColor: disabledTextColor + }, + focus: { + borderBottomStyle: 'solid', + borderBottomWidth: 2, + borderColor: focusColor, + transform: 'scaleX(0)', + transition: _transitions2.default.easeOut() + }, + error: { + borderColor: errorStyleColor ? errorStyleColor : errorColor, + transform: 'scaleX(1)' + } + }; + + var underline = (0, _simpleAssign2.default)({}, styles.root, style); + var focusedUnderline = (0, _simpleAssign2.default)({}, underline, styles.focus, focusStyle); + + if (disabled) underline = (0, _simpleAssign2.default)({}, underline, styles.disabled, disabledStyle); + if (focus) focusedUnderline = (0, _simpleAssign2.default)({}, focusedUnderline, { transform: 'scaleX(1)' }); + if (error) focusedUnderline = (0, _simpleAssign2.default)({}, focusedUnderline, styles.error); + + return _react2.default.createElement( + 'div', + null, + _react2.default.createElement('hr', { 'aria-hidden': 'true', style: prepareStyles(underline) }), + _react2.default.createElement('hr', { 'aria-hidden': 'true', style: prepareStyles(focusedUnderline) }) + ); +}; + +process.env.NODE_ENV !== "production" ? TextFieldUnderline.propTypes = propTypes : void 0; +TextFieldUnderline.defaultProps = defaultProps; + +exports.default = TextFieldUnderline; \ No newline at end of file diff --git a/TextField/index.js b/TextField/index.js new file mode 100644 index 00000000000000..7843b98bd047f4 --- /dev/null +++ b/TextField/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _TextField = require('./TextField'); + +var _TextField2 = _interopRequireDefault(_TextField); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _TextField2.default; \ No newline at end of file diff --git a/TimePicker/Clock.js b/TimePicker/Clock.js new file mode 100644 index 00000000000000..44ef58c1574540 --- /dev/null +++ b/TimePicker/Clock.js @@ -0,0 +1,244 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _TimeDisplay = require('./TimeDisplay'); + +var _TimeDisplay2 = _interopRequireDefault(_TimeDisplay); + +var _ClockHours = require('./ClockHours'); + +var _ClockHours2 = _interopRequireDefault(_ClockHours); + +var _ClockMinutes = require('./ClockMinutes'); + +var _ClockMinutes2 = _interopRequireDefault(_ClockMinutes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var Clock = function (_Component) { + (0, _inherits3.default)(Clock, _Component); + + function Clock() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Clock); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Clock.__proto__ || (0, _getPrototypeOf2.default)(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + selectedTime: null, + mode: 'hour' + }, _this.setMode = function (mode) { + setTimeout(function () { + _this.setState({ + mode: mode + }); + }, 100); + }, _this.handleSelectAffix = function (affix) { + if (affix === _this.getAffix()) return; + + var hours = _this.state.selectedTime.getHours(); + + if (affix === 'am') { + _this.handleChangeHours(hours - 12, affix); + return; + } + + _this.handleChangeHours(hours + 12, affix); + }, _this.handleChangeHours = function (hours, finished) { + var time = new Date(_this.state.selectedTime); + var affix = void 0; + + if (typeof finished === 'string') { + affix = finished; + finished = undefined; + } + if (!affix) { + affix = _this.getAffix(); + } + if (affix === 'pm' && hours < 12) { + hours += 12; + } + + time.setHours(hours); + _this.setState({ + selectedTime: time + }); + + if (finished) { + setTimeout(function () { + _this.setState({ + mode: 'minute' + }); + + var onChangeHours = _this.props.onChangeHours; + + if (onChangeHours) { + onChangeHours(time); + } + }, 100); + } + }, _this.handleChangeMinutes = function (minutes, finished) { + var time = new Date(_this.state.selectedTime); + time.setMinutes(minutes); + _this.setState({ + selectedTime: time + }); + + var onChangeMinutes = _this.props.onChangeMinutes; + + if (onChangeMinutes && finished) { + setTimeout(function () { + onChangeMinutes(time); + }, 0); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Clock, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var selectedTime = this.props.initialTime || new Date(); + var minutes = selectedTime.getMinutes(); + selectedTime.setMinutes(minutes - minutes % this.props.minutesStep); + + this.setState({ + selectedTime: selectedTime + }); + } + }, { + key: 'getAffix', + value: function getAffix() { + if (this.props.format !== 'ampm') return ''; + + var hours = this.state.selectedTime.getHours(); + if (hours < 12) { + return 'am'; + } + + return 'pm'; + } + }, { + key: 'getSelectedTime', + value: function getSelectedTime() { + return this.state.selectedTime; + } + }, { + key: 'render', + value: function render() { + var clock = null; + + var _context$muiTheme = this.context.muiTheme, + prepareStyles = _context$muiTheme.prepareStyles, + timePicker = _context$muiTheme.timePicker; + + + var styles = { + root: { + userSelect: 'none' + }, + container: { + height: 280, + padding: 10, + position: 'relative', + boxSizing: 'content-box' + }, + circle: { + position: 'absolute', + top: 20, + width: 260, + height: 260, + borderRadius: '100%', + backgroundColor: timePicker.clockCircleColor + } + }; + + if (this.state.mode === 'hour') { + clock = _react2.default.createElement(_ClockHours2.default, { + key: 'hours', + format: this.props.format, + onChange: this.handleChangeHours, + initialHours: this.state.selectedTime.getHours() + }); + } else { + clock = _react2.default.createElement(_ClockMinutes2.default, { + key: 'minutes', + onChange: this.handleChangeMinutes, + initialMinutes: this.state.selectedTime.getMinutes(), + step: this.props.minutesStep + }); + } + + return _react2.default.createElement( + 'div', + { style: prepareStyles(styles.root) }, + _react2.default.createElement(_TimeDisplay2.default, { + selectedTime: this.state.selectedTime, + mode: this.state.mode, + format: this.props.format, + affix: this.getAffix(), + onSelectAffix: this.handleSelectAffix, + onSelectHour: this.setMode.bind(this, 'hour'), + onSelectMin: this.setMode.bind(this, 'minute') + }), + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.container) }, + _react2.default.createElement('div', { style: prepareStyles(styles.circle) }), + clock + ) + ); + } + }]); + return Clock; +}(_react.Component); + +Clock.defaultProps = { + initialTime: new Date() +}; +Clock.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Clock.propTypes = { + format: _propTypes2.default.oneOf(['ampm', '24hr']), + initialTime: _propTypes2.default.object, + minutesStep: _propTypes2.default.number, + onChangeHours: _propTypes2.default.func, + onChangeMinutes: _propTypes2.default.func +} : void 0; +exports.default = Clock; \ No newline at end of file diff --git a/TimePicker/ClockHours.js b/TimePicker/ClockHours.js new file mode 100644 index 00000000000000..fe2212c41dc54b --- /dev/null +++ b/TimePicker/ClockHours.js @@ -0,0 +1,242 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactDom = require('react-dom'); + +var _reactDom2 = _interopRequireDefault(_reactDom); + +var _ClockNumber = require('./ClockNumber'); + +var _ClockNumber2 = _interopRequireDefault(_ClockNumber); + +var _ClockPointer = require('./ClockPointer'); + +var _ClockPointer2 = _interopRequireDefault(_ClockPointer); + +var _timeUtils = require('./timeUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ClockHours = function (_Component) { + (0, _inherits3.default)(ClockHours, _Component); + + function ClockHours() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, ClockHours); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ClockHours.__proto__ || (0, _getPrototypeOf2.default)(ClockHours)).call.apply(_ref, [this].concat(args))), _this), _this.handleUp = function (event) { + event.preventDefault(); + _this.setClock(event.nativeEvent, true); + }, _this.handleMove = function (event) { + event.preventDefault(); + if (_this.isMousePressed(event) !== 1) return; + _this.setClock(event.nativeEvent, false); + }, _this.handleTouchMove = function (event) { + event.preventDefault(); + _this.setClock(event.changedTouches[0], false); + }, _this.handleTouchEnd = function (event) { + event.preventDefault(); + _this.setClock(event.changedTouches[0], true); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(ClockHours, [{ + key: 'componentDidMount', + value: function componentDidMount() { + var clockElement = _reactDom2.default.findDOMNode(this.refs.mask); + + this.center = { + x: clockElement.offsetWidth / 2, + y: clockElement.offsetHeight / 2 + }; + + this.basePoint = { + x: this.center.x, + y: 0 + }; + } + }, { + key: 'isMousePressed', + value: function isMousePressed(event) { + if (typeof event.buttons === 'undefined') { + return event.nativeEvent.which; + } + + return event.buttons; + } + }, { + key: 'setClock', + value: function setClock(event, finish) { + if (typeof event.offsetX === 'undefined') { + var offset = (0, _timeUtils.getTouchEventOffsetValues)(event); + + event.offsetX = offset.offsetX; + event.offsetY = offset.offsetY; + } + + var hours = this.getHours(event.offsetX, event.offsetY); + + this.props.onChange(hours, finish); + } + }, { + key: 'getHours', + value: function getHours(offsetX, offsetY) { + var step = 30; + var x = offsetX - this.center.x; + var y = offsetY - this.center.y; + var cx = this.basePoint.x - this.center.x; + var cy = this.basePoint.y - this.center.y; + + var atan = Math.atan2(cx, cy) - Math.atan2(x, y); + + var deg = (0, _timeUtils.rad2deg)(atan); + deg = Math.round(deg / step) * step; + deg %= 360; + + var value = Math.floor(deg / step) || 0; + + var delta = Math.pow(x, 2) + Math.pow(y, 2); + var distance = Math.sqrt(delta); + + value = value || 12; + if (this.props.format === '24hr') { + if (distance < 90) { + value += 12; + value %= 24; + } + } else { + value %= 12; + } + + return value; + } + }, { + key: 'getSelected', + value: function getSelected() { + var hour = this.props.initialHours; + + if (this.props.format === 'ampm') { + hour %= 12; + hour = hour || 12; + } + + return hour; + } + }, { + key: 'getHourNumbers', + value: function getHourNumbers() { + var _this2 = this; + + var style = { + pointerEvents: 'none' + }; + var hourSize = this.props.format === 'ampm' ? 12 : 24; + + var hours = []; + for (var i = 1; i <= hourSize; i++) { + hours.push(i % 24); + } + + return hours.map(function (hour) { + var isSelected = _this2.getSelected() === hour; + return _react2.default.createElement(_ClockNumber2.default, { + key: hour, + style: style, + isSelected: isSelected, + type: 'hour', + value: hour + }); + }); + } + }, { + key: 'render', + value: function render() { + var styles = { + root: { + height: '100%', + width: '100%', + borderRadius: '100%', + position: 'relative', + pointerEvents: 'none', + boxSizing: 'border-box' + }, + + hitMask: { + height: '100%', + width: '100%', + pointerEvents: 'auto' + } + }; + + var prepareStyles = this.context.muiTheme.prepareStyles; + + var hours = this.getSelected(); + var numbers = this.getHourNumbers(); + + return _react2.default.createElement( + 'div', + { ref: 'clock', style: prepareStyles(styles.root) }, + _react2.default.createElement(_ClockPointer2.default, { hasSelected: true, value: hours, type: 'hour' }), + numbers, + _react2.default.createElement('div', { + ref: 'mask', style: prepareStyles(styles.hitMask), onTouchMove: this.handleTouchMove, + onTouchEnd: this.handleTouchEnd, onMouseUp: this.handleUp, onMouseMove: this.handleMove + }) + ); + } + }]); + return ClockHours; +}(_react.Component); + +ClockHours.defaultProps = { + initialHours: new Date().getHours(), + onChange: function onChange() {}, + format: 'ampm' +}; +ClockHours.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ClockHours.propTypes = { + format: _propTypes2.default.oneOf(['ampm', '24hr']), + initialHours: _propTypes2.default.number, + onChange: _propTypes2.default.func +} : void 0; +exports.default = ClockHours; \ No newline at end of file diff --git a/TimePicker/ClockMinutes.js b/TimePicker/ClockMinutes.js new file mode 100644 index 00000000000000..33f2941388f3bd --- /dev/null +++ b/TimePicker/ClockMinutes.js @@ -0,0 +1,217 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _ClockNumber = require('./ClockNumber'); + +var _ClockNumber2 = _interopRequireDefault(_ClockNumber); + +var _ClockPointer = require('./ClockPointer'); + +var _ClockPointer2 = _interopRequireDefault(_ClockPointer); + +var _timeUtils = require('./timeUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ClockMinutes = function (_Component) { + (0, _inherits3.default)(ClockMinutes, _Component); + + function ClockMinutes() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, ClockMinutes); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ClockMinutes.__proto__ || (0, _getPrototypeOf2.default)(ClockMinutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleUp = function (event) { + event.preventDefault(); + _this.setClock(event.nativeEvent, true); + }, _this.handleMove = function (event) { + event.preventDefault(); + if (_this.isMousePressed(event) !== 1) { + return; + } + _this.setClock(event.nativeEvent, false); + }, _this.handleTouch = function (event) { + event.preventDefault(); + _this.setClock(event.changedTouches[0], event.type === 'touchend'); + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(ClockMinutes, [{ + key: 'componentDidMount', + value: function componentDidMount() { + var clockElement = this.refs.mask; + + this.center = { + x: clockElement.offsetWidth / 2, + y: clockElement.offsetHeight / 2 + }; + + this.basePoint = { + x: this.center.x, + y: 0 + }; + } + }, { + key: 'isMousePressed', + value: function isMousePressed(event) { + if (typeof event.buttons === 'undefined') { + return event.nativeEvent.which; + } + return event.buttons; + } + }, { + key: 'setClock', + value: function setClock(event, finish) { + if (typeof event.offsetX === 'undefined') { + var offset = (0, _timeUtils.getTouchEventOffsetValues)(event); + + event.offsetX = offset.offsetX; + event.offsetY = offset.offsetY; + } + + var minutes = this.getMinutes(event.offsetX, event.offsetY); + + this.props.onChange(minutes, finish); + } + }, { + key: 'getMinutes', + value: function getMinutes(offsetX, offsetY) { + var step = 6 * this.props.step; + var x = offsetX - this.center.x; + var y = offsetY - this.center.y; + var cx = this.basePoint.x - this.center.x; + var cy = this.basePoint.y - this.center.y; + + var atan = Math.atan2(cx, cy) - Math.atan2(x, y); + + var deg = (0, _timeUtils.rad2deg)(atan); + deg = Math.round(deg / step) * step; + deg %= 360; + + var value = Math.floor(deg / step) || 0; + + return value * this.props.step; + } + }, { + key: 'getMinuteNumbers', + value: function getMinuteNumbers() { + var minutes = []; + for (var i = 0; i < 12; i++) { + minutes.push(i * 5); + } + var selectedMinutes = this.props.initialMinutes; + var hasSelected = false; + + var numbers = minutes.map(function (minute) { + var isSelected = selectedMinutes === minute; + if (isSelected) { + hasSelected = true; + } + return _react2.default.createElement(_ClockNumber2.default, { + key: minute, + isSelected: isSelected, + type: 'minute', + value: minute + }); + }); + + return { + numbers: numbers, + hasSelected: hasSelected, + selected: selectedMinutes + }; + } + }, { + key: 'render', + value: function render() { + var styles = { + root: { + height: '100%', + width: '100%', + borderRadius: '100%', + position: 'relative', + pointerEvents: 'none', + boxSizing: 'border-box' + }, + + hitMask: { + height: '100%', + width: '100%', + pointerEvents: 'auto' + } + }; + + var prepareStyles = this.context.muiTheme.prepareStyles; + + var minutes = this.getMinuteNumbers(); + + return _react2.default.createElement( + 'div', + { ref: 'clock', style: prepareStyles(styles.root) }, + _react2.default.createElement(_ClockPointer2.default, { value: minutes.selected, type: 'minute', hasSelected: minutes.hasSelected }), + minutes.numbers, + _react2.default.createElement('div', { + ref: 'mask', + style: prepareStyles(styles.hitMask), + onTouchMove: this.handleTouch, + onTouchEnd: this.handleTouch, + onMouseUp: this.handleUp, + onMouseMove: this.handleMove + }) + ); + } + }]); + return ClockMinutes; +}(_react.Component); + +ClockMinutes.defaultProps = { + initialMinutes: new Date().getMinutes(), + onChange: function onChange() {}, + step: 1 +}; +ClockMinutes.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ClockMinutes.propTypes = { + initialMinutes: _propTypes2.default.number, + onChange: _propTypes2.default.func, + step: _propTypes2.default.number +} : void 0; +exports.default = ClockMinutes; \ No newline at end of file diff --git a/TimePicker/ClockNumber.js b/TimePicker/ClockNumber.js new file mode 100644 index 00000000000000..c968b541e93d4e --- /dev/null +++ b/TimePicker/ClockNumber.js @@ -0,0 +1,142 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray'); + +var _slicedToArray3 = _interopRequireDefault(_slicedToArray2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _timeUtils = require('./timeUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var styles = { + root: { + directionInvariant: true, + display: 'inline-block', + position: 'absolute', + width: 32, + height: 32, + borderRadius: '100%', + left: 'calc(50% - 16px)', + top: 10, + textAlign: 'center', + paddingTop: 5, + userSelect: 'none', /* Chrome all / Safari all */ + fontSize: '1.1em', + pointerEvents: 'none', + boxSizing: 'border-box' + } + }; + + var muiTheme = context.muiTheme; + + + var pos = props.value; + + if (props.type === 'hour') { + pos %= 12; + } else { + pos = pos / 5; + } + + var positions = [[0, 5], [54.5, 16.6], [94.4, 59.5], [109, 114], [94.4, 168.5], [54.5, 208.4], [0, 223], [-54.5, 208.4], [-94.4, 168.5], [-109, 114], [-94.4, 59.5], [-54.5, 19.6]]; + + var innerPositions = [[0, 40], [36.9, 49.9], [64, 77], [74, 114], [64, 151], [37, 178], [0, 188], [-37, 178], [-64, 151], [-74, 114], [-64, 77], [-37, 50]]; + + if (props.isSelected) { + styles.root.backgroundColor = muiTheme.timePicker.accentColor; + styles.root.color = muiTheme.timePicker.selectTextColor; + } + + var transformPos = positions[pos]; + + if ((0, _timeUtils.isInner)(props)) { + styles.root.width = 28; + styles.root.height = 28; + styles.root.left = 'calc(50% - 14px)'; + transformPos = innerPositions[pos]; + } + + var _transformPos = transformPos, + _transformPos2 = (0, _slicedToArray3.default)(_transformPos, 2), + x = _transformPos2[0], + y = _transformPos2[1]; + + styles.root.transform = 'translate(' + x + 'px, ' + y + 'px)'; + + return styles; +} + +var ClockNumber = function (_Component) { + (0, _inherits3.default)(ClockNumber, _Component); + + function ClockNumber() { + (0, _classCallCheck3.default)(this, ClockNumber); + return (0, _possibleConstructorReturn3.default)(this, (ClockNumber.__proto__ || (0, _getPrototypeOf2.default)(ClockNumber)).apply(this, arguments)); + } + + (0, _createClass3.default)(ClockNumber, [{ + key: 'render', + value: function render() { + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + var clockNumber = this.props.value === 0 ? '00' : this.props.value; + + return _react2.default.createElement( + 'span', + { style: prepareStyles(styles.root) }, + clockNumber + ); + } + }]); + return ClockNumber; +}(_react.Component); + +ClockNumber.defaultProps = { + value: 0, + type: 'minute', + isSelected: false +}; +ClockNumber.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ClockNumber.propTypes = { + isSelected: _propTypes2.default.bool, + onSelected: _propTypes2.default.func, + type: _propTypes2.default.oneOf(['hour', 'minute']), + value: _propTypes2.default.number +} : void 0; +exports.default = ClockNumber; \ No newline at end of file diff --git a/TimePicker/ClockPointer.js b/TimePicker/ClockPointer.js new file mode 100644 index 00000000000000..1654367565e04b --- /dev/null +++ b/TimePicker/ClockPointer.js @@ -0,0 +1,150 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _timeUtils = require('./timeUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function calcAngle(value, base) { + value %= base; + var angle = 360 / base * value; + return angle; +} + +function getStyles(props, context, state) { + var hasSelected = props.hasSelected, + type = props.type, + value = props.value; + var inner = state.inner; + var timePicker = context.muiTheme.timePicker; + + var angle = type === 'hour' ? calcAngle(value, 12) : calcAngle(value, 60); + + var styles = { + root: { + height: inner ? '30%' : '40%', + background: timePicker.accentColor, + width: 2, + left: 'calc(50% - 1px)', + position: 'absolute', + bottom: '50%', + transformOrigin: 'bottom', + pointerEvents: 'none', + transform: 'rotateZ(' + angle + 'deg)' + }, + mark: { + boxSizing: 'content-box', + background: timePicker.selectTextColor, + border: '4px solid ' + timePicker.accentColor, + display: hasSelected && 'none', + width: 7, + height: 7, + position: 'absolute', + top: -5, + left: -6, + borderRadius: '100%' + } + }; + + return styles; +} + +var ClockPointer = function (_Component) { + (0, _inherits3.default)(ClockPointer, _Component); + + function ClockPointer() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, ClockPointer); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ClockPointer.__proto__ || (0, _getPrototypeOf2.default)(ClockPointer)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + inner: false + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(ClockPointer, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + inner: (0, _timeUtils.isInner)(this.props) + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + this.setState({ + inner: (0, _timeUtils.isInner)(nextProps) + }); + } + }, { + key: 'render', + value: function render() { + if (this.props.value === null) { + return _react2.default.createElement('span', null); + } + + var styles = getStyles(this.props, this.context, this.state); + var prepareStyles = this.context.muiTheme.prepareStyles; + + + return _react2.default.createElement( + 'div', + { style: prepareStyles(styles.root) }, + _react2.default.createElement('div', { style: prepareStyles(styles.mark) }) + ); + } + }]); + return ClockPointer; +}(_react.Component); + +ClockPointer.defaultProps = { + hasSelected: false, + value: null, + type: 'minute' +}; +ClockPointer.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ClockPointer.propTypes = { + hasSelected: _propTypes2.default.bool, + type: _propTypes2.default.oneOf(['hour', 'minute']), + value: _propTypes2.default.number +} : void 0; +exports.default = ClockPointer; \ No newline at end of file diff --git a/TimePicker/TimeDisplay.js b/TimePicker/TimeDisplay.js new file mode 100644 index 00000000000000..4e681e0509578b --- /dev/null +++ b/TimePicker/TimeDisplay.js @@ -0,0 +1,247 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray'); + +var _slicedToArray3 = _interopRequireDefault(_slicedToArray2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var TimeDisplay = function (_Component) { + (0, _inherits3.default)(TimeDisplay, _Component); + + function TimeDisplay() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TimeDisplay); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TimeDisplay.__proto__ || (0, _getPrototypeOf2.default)(TimeDisplay)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + transitionDirection: 'up' + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TimeDisplay, [{ + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.selectedTime !== this.props.selectedTime) { + var direction = nextProps.selectedTime > this.props.selectedTime ? 'up' : 'down'; + + this.setState({ + transitionDirection: direction + }); + } + } + }, { + key: 'sanitizeTime', + value: function sanitizeTime() { + var hour = this.props.selectedTime.getHours(); + var min = this.props.selectedTime.getMinutes().toString(); + + if (this.props.format === 'ampm') { + hour %= 12; + hour = hour || 12; + } + + hour = hour.toString(); + if (hour.length < 2) hour = '0' + hour; + if (min.length < 2) min = '0' + min; + + return [hour, min]; + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + affix = _props.affix, + format = _props.format, + mode = _props.mode, + onSelectAffix = _props.onSelectAffix, + onSelectHour = _props.onSelectHour, + onSelectMin = _props.onSelectMin, + selectedTime = _props.selectedTime, + other = (0, _objectWithoutProperties3.default)(_props, ['affix', 'format', 'mode', 'onSelectAffix', 'onSelectHour', 'onSelectMin', 'selectedTime']); + var _context$muiTheme = this.context.muiTheme, + prepareStyles = _context$muiTheme.prepareStyles, + timePicker = _context$muiTheme.timePicker; + + + var styles = { + root: { + padding: '14px 0', + borderTopLeftRadius: 2, + borderTopRightRadius: 2, + backgroundColor: timePicker.headerColor, + color: timePicker.textColor + }, + text: { + margin: '6px 0', + lineHeight: '58px', + height: 58, + fontSize: 58, + display: 'flex', + justifyContent: 'center', + alignItems: 'baseline' + }, + time: { + margin: '0 10px' + }, + affix: { + flex: 1, + position: 'relative', + lineHeight: '17px', + height: 17, + fontSize: 17 + }, + affixTop: { + position: 'absolute', + top: -20, + left: 0 + }, + clickable: { + cursor: 'pointer' + }, + inactive: { + opacity: 0.7 + } + }; + + var _sanitizeTime = this.sanitizeTime(), + _sanitizeTime2 = (0, _slicedToArray3.default)(_sanitizeTime, 2), + hour = _sanitizeTime2[0], + min = _sanitizeTime2[1]; + + var buttons = []; + if (format === 'ampm') { + buttons = [_react2.default.createElement( + 'div', + { + key: 'pm', + style: prepareStyles((0, _simpleAssign2.default)({}, styles.clickable, affix === 'pm' ? {} : styles.inactive)), + onClick: function onClick() { + return onSelectAffix('pm'); + } + }, + 'PM' + ), _react2.default.createElement( + 'div', + { + key: 'am', + style: prepareStyles((0, _simpleAssign2.default)({}, styles.affixTop, styles.clickable, affix === 'am' ? {} : styles.inactive)), + onClick: function onClick() { + return onSelectAffix('am'); + } + }, + 'AM' + )]; + } + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { style: prepareStyles(styles.root) }), + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.text) }, + _react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)({}, styles.affix)) }), + _react2.default.createElement( + 'div', + { style: prepareStyles(styles.time) }, + _react2.default.createElement( + 'span', + { + style: prepareStyles((0, _simpleAssign2.default)({}, styles.clickable, mode === 'hour' ? {} : styles.inactive)), + onClick: onSelectHour + }, + hour + ), + _react2.default.createElement( + 'span', + null, + ':' + ), + _react2.default.createElement( + 'span', + { + style: prepareStyles((0, _simpleAssign2.default)({}, styles.clickable, mode === 'minute' ? {} : styles.inactive)), + onClick: onSelectMin + }, + min + ) + ), + _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)({}, styles.affix)) }, + buttons + ) + ) + ); + } + }]); + return TimeDisplay; +}(_react.Component); + +TimeDisplay.defaultProps = { + affix: '', + mode: 'hour' +}; +TimeDisplay.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TimeDisplay.propTypes = { + affix: _propTypes2.default.oneOf(['', 'pm', 'am']), + format: _propTypes2.default.oneOf(['ampm', '24hr']), + mode: _propTypes2.default.oneOf(['hour', 'minute']), + onSelectAffix: _propTypes2.default.func, + onSelectHour: _propTypes2.default.func, + onSelectMin: _propTypes2.default.func, + selectedTime: _propTypes2.default.object.isRequired +} : void 0; +exports.default = TimeDisplay; \ No newline at end of file diff --git a/TimePicker/TimePicker.js b/TimePicker/TimePicker.js new file mode 100644 index 00000000000000..f81d197fc41860 --- /dev/null +++ b/TimePicker/TimePicker.js @@ -0,0 +1,304 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _TimePickerDialog = require('./TimePickerDialog'); + +var _TimePickerDialog2 = _interopRequireDefault(_TimePickerDialog); + +var _TextField = require('../TextField'); + +var _TextField2 = _interopRequireDefault(_TextField); + +var _timeUtils = require('./timeUtils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var emptyTime = new Date(); +emptyTime.setHours(0); +emptyTime.setMinutes(0); +emptyTime.setSeconds(0); +emptyTime.setMilliseconds(0); + +var TimePicker = function (_Component) { + (0, _inherits3.default)(TimePicker, _Component); + + function TimePicker() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TimePicker); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TimePicker.__proto__ || (0, _getPrototypeOf2.default)(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + time: null, + dialogTime: new Date() + }, _this.handleAcceptDialog = function (time) { + _this.setState({ + time: time + }); + if (_this.props.onChange) _this.props.onChange(null, time); + }, _this.handleFocusInput = function (event) { + event.target.blur(); + if (_this.props.onFocus) { + _this.props.onFocus(event); + } + }, _this.handleClickInput = function (event) { + event.preventDefault(); + + if (!_this.props.disabled) { + _this.openDialog(); + } + + if (_this.props.onClick) { + _this.props.onClick(event); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TimePicker, [{ + key: 'componentWillMount', + value: function componentWillMount() { + this.setState({ + time: this.isControlled() ? this.getControlledTime() : this.props.defaultTime + }); + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + if (nextProps.value !== this.props.value) { + this.setState({ + time: this.getControlledTime(nextProps) + }); + } + } + + /** + * Alias for `openDialog()` for an api consistent with TextField. + */ + + }, { + key: 'focus', + value: function focus() { + this.openDialog(); + } + }, { + key: 'openDialog', + value: function openDialog() { + this.setState({ + dialogTime: this.state.time + }); + this.refs.dialogWindow.show(); + } + }, { + key: 'isControlled', + value: function isControlled() { + return this.props.value !== null; + } + }, { + key: 'getControlledTime', + value: function getControlledTime() { + var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props; + + var result = null; + if (props.value instanceof Date) { + result = props.value; + } + return result; + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + autoOk = _props.autoOk, + cancelLabel = _props.cancelLabel, + defaultTime = _props.defaultTime, + dialogBodyStyle = _props.dialogBodyStyle, + dialogStyle = _props.dialogStyle, + format = _props.format, + okLabel = _props.okLabel, + onFocus = _props.onFocus, + onClick = _props.onClick, + onShow = _props.onShow, + onDismiss = _props.onDismiss, + pedantic = _props.pedantic, + style = _props.style, + textFieldStyle = _props.textFieldStyle, + minutesStep = _props.minutesStep, + other = (0, _objectWithoutProperties3.default)(_props, ['autoOk', 'cancelLabel', 'defaultTime', 'dialogBodyStyle', 'dialogStyle', 'format', 'okLabel', 'onFocus', 'onClick', 'onShow', 'onDismiss', 'pedantic', 'style', 'textFieldStyle', 'minutesStep']); + var prepareStyles = this.context.muiTheme.prepareStyles; + var time = this.state.time; + + + return _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)({}, style)) }, + _react2.default.createElement(_TextField2.default, (0, _extends3.default)({}, other, { + style: textFieldStyle, + ref: 'input', + value: time === emptyTime ? null : (0, _timeUtils.formatTime)(time, format, pedantic), + onFocus: this.handleFocusInput, + onClick: this.handleClickInput + })), + _react2.default.createElement(_TimePickerDialog2.default, { + ref: 'dialogWindow', + bodyStyle: dialogBodyStyle, + initialTime: this.state.dialogTime, + onAccept: this.handleAcceptDialog, + onShow: onShow, + onDismiss: onDismiss, + format: format, + okLabel: okLabel, + cancelLabel: cancelLabel, + autoOk: autoOk, + style: dialogStyle, + minutesStep: minutesStep + }) + ); + } + }]); + return TimePicker; +}(_react.Component); + +TimePicker.defaultProps = { + autoOk: false, + cancelLabel: 'Cancel', + defaultTime: null, + disabled: false, + format: 'ampm', + okLabel: 'OK', + pedantic: false, + style: {}, + value: null, + minutesStep: 1 +}; +TimePicker.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TimePicker.propTypes = { + /** + * If true, automatically accept and close the picker on set minutes. + */ + autoOk: _propTypes2.default.bool, + /** + * Override the label of the 'Cancel' button. + */ + cancelLabel: _propTypes2.default.node, + /** + * The initial time value of the TimePicker. + */ + defaultTime: _propTypes2.default.object, + /** + * Override the inline-styles of TimePickerDialog's body element. + */ + dialogBodyStyle: _propTypes2.default.object, + /** + * Override the inline-styles of TimePickerDialog's root element. + */ + dialogStyle: _propTypes2.default.object, + /** + * If true, the TimePicker is disabled. + */ + disabled: _propTypes2.default.bool, + /** + * Tells the component to display the picker in `ampm` (12hr) format or `24hr` format. + */ + format: _propTypes2.default.oneOf(['ampm', '24hr']), + /** + * How many minutes should be added/subtracted when moving the clock pointer. + */ + minutesStep: _propTypes2.default.number, + /** + * Override the label of the 'OK' button. + */ + okLabel: _propTypes2.default.node, + /** + * Callback function that is fired when the time value changes. The time value is passed in a Date Object. + * Since there is no particular event associated with the change the first argument will always be null + * and the second argument will be the new Date instance. + */ + onChange: _propTypes2.default.func, + /** + * Callback function fired when the TimePicker is tapped or clicked. + */ + onClick: _propTypes2.default.func, + /** + * Callback function fired when the TimePicker dialog is dismissed. + */ + onDismiss: _propTypes2.default.func, + /** + * Callback function fired when the TimePicker `TextField` gains focus. + */ + onFocus: _propTypes2.default.func, + /** + * Callback function fired when the TimePicker dialog is shown. + */ + onShow: _propTypes2.default.func, + /** + * If true, uses ("noon" / "midnight") instead of ("12 a.m." / "12 p.m."). + * + * It's technically more correct to refer to "12 noon" and "12 midnight" rather than "12 a.m." and "12 p.m." + * and it avoids confusion between different locales. By default (for compatibility reasons) TimePicker uses + * ("12 a.m." / "12 p.m."). + */ + pedantic: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Override the inline-styles of TimePicker's TextField element. + */ + textFieldStyle: _propTypes2.default.object, + /** + * Sets the time for the Time Picker programmatically. + */ + value: _propTypes2.default.object +} : void 0; +exports.default = TimePicker; \ No newline at end of file diff --git a/TimePicker/TimePickerDialog.js b/TimePicker/TimePickerDialog.js new file mode 100644 index 00000000000000..32aa3252de54d3 --- /dev/null +++ b/TimePicker/TimePickerDialog.js @@ -0,0 +1,210 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _reactEventListener = require('react-event-listener'); + +var _reactEventListener2 = _interopRequireDefault(_reactEventListener); + +var _keycode = require('keycode'); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _Clock = require('./Clock'); + +var _Clock2 = _interopRequireDefault(_Clock); + +var _Dialog = require('../Dialog'); + +var _Dialog2 = _interopRequireDefault(_Dialog); + +var _FlatButton = require('../FlatButton'); + +var _FlatButton2 = _interopRequireDefault(_FlatButton); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var TimePickerDialog = function (_Component) { + (0, _inherits3.default)(TimePickerDialog, _Component); + + function TimePickerDialog() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, TimePickerDialog); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = TimePickerDialog.__proto__ || (0, _getPrototypeOf2.default)(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + open: false + }, _this.handleRequestClose = function () { + _this.dismiss(); + }, _this.handleClickCancel = function () { + _this.dismiss(); + }, _this.handleClickOK = function () { + if (_this.props.onAccept) { + _this.props.onAccept(_this.refs.clock.getSelectedTime()); + } + _this.setState({ + open: false + }); + }, _this.handleKeyUp = function (event) { + switch ((0, _keycode2.default)(event)) { + case 'enter': + _this.handleClickOK(); + break; + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(TimePickerDialog, [{ + key: 'show', + value: function show() { + if (this.props.onShow && !this.state.open) this.props.onShow(); + this.setState({ + open: true + }); + } + }, { + key: 'dismiss', + value: function dismiss() { + if (this.props.onDismiss && this.state.open) this.props.onDismiss(); + this.setState({ + open: false + }); + } + }, { + key: 'render', + value: function render() { + var _props = this.props, + bodyStyle = _props.bodyStyle, + initialTime = _props.initialTime, + onAccept = _props.onAccept, + format = _props.format, + autoOk = _props.autoOk, + okLabel = _props.okLabel, + cancelLabel = _props.cancelLabel, + style = _props.style, + minutesStep = _props.minutesStep, + other = (0, _objectWithoutProperties3.default)(_props, ['bodyStyle', 'initialTime', 'onAccept', 'format', 'autoOk', 'okLabel', 'cancelLabel', 'style', 'minutesStep']); + + + var styles = { + root: { + fontSize: 14, + color: this.context.muiTheme.timePicker.clockColor + }, + dialogContent: { + width: 280 + }, + body: { + padding: 0 + } + }; + + var actions = [_react2.default.createElement(_FlatButton2.default, { + key: 0, + label: cancelLabel, + primary: true, + onClick: this.handleClickCancel + }), _react2.default.createElement(_FlatButton2.default, { + key: 1, + label: okLabel, + primary: true, + onClick: this.handleClickOK + })]; + + var onClockChangeMinutes = autoOk === true ? this.handleClickOK : undefined; + var open = this.state.open; + + return _react2.default.createElement( + _Dialog2.default, + (0, _extends3.default)({}, other, { + style: (0, _simpleAssign2.default)(styles.root, style), + bodyStyle: (0, _simpleAssign2.default)(styles.body, bodyStyle), + actions: actions, + contentStyle: styles.dialogContent, + repositionOnUpdate: false, + open: open, + onRequestClose: this.handleRequestClose + }), + open && _react2.default.createElement(_reactEventListener2.default, { target: 'window', onKeyUp: this.handleKeyUp }), + open && _react2.default.createElement(_Clock2.default, { + ref: 'clock', + format: format, + initialTime: initialTime, + onChangeMinutes: onClockChangeMinutes, + minutesStep: minutesStep + }) + ); + } + }]); + return TimePickerDialog; +}(_react.Component); + +TimePickerDialog.defaultProps = { + okLabel: 'OK', + cancelLabel: 'Cancel' +}; +TimePickerDialog.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? TimePickerDialog.propTypes = { + autoOk: _propTypes2.default.bool, + bodyStyle: _propTypes2.default.object, + cancelLabel: _propTypes2.default.node, + format: _propTypes2.default.oneOf(['ampm', '24hr']), + initialTime: _propTypes2.default.object, + minutesStep: _propTypes2.default.number, + okLabel: _propTypes2.default.node, + onAccept: _propTypes2.default.func, + onDismiss: _propTypes2.default.func, + onShow: _propTypes2.default.func, + style: _propTypes2.default.object +} : void 0; +exports.default = TimePickerDialog; \ No newline at end of file diff --git a/TimePicker/index.js b/TimePicker/index.js new file mode 100644 index 00000000000000..c11937878f78c8 --- /dev/null +++ b/TimePicker/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _TimePicker = require('./TimePicker'); + +var _TimePicker2 = _interopRequireDefault(_TimePicker); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _TimePicker2.default; \ No newline at end of file diff --git a/TimePicker/timeUtils.js b/TimePicker/timeUtils.js new file mode 100644 index 00000000000000..d2e69b2dcec8e2 --- /dev/null +++ b/TimePicker/timeUtils.js @@ -0,0 +1,95 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.addHours = addHours; +exports.addMinutes = addMinutes; +exports.addSeconds = addSeconds; +exports.formatTime = formatTime; +exports.rad2deg = rad2deg; +exports.getTouchEventOffsetValues = getTouchEventOffsetValues; +exports.isInner = isInner; +function addHours(d, hours) { + var newDate = clone(d); + newDate.setHours(d.getHours() + hours); + return newDate; +} + +function addMinutes(d, minutes) { + var newDate = clone(d); + newDate.setMinutes(d.getMinutes() + minutes); + return newDate; +} + +function addSeconds(d, seconds) { + var newDate = clone(d); + newDate.setSeconds(d.getMinutes() + seconds); + return newDate; +} + +function clone(d) { + return new Date(d.getTime()); +} + +/** + * @param date [Date] A Date object. + * @param format [String] One of 'ampm', '24hr', defaults to 'ampm'. + * @param pedantic [Boolean] Check time-picker/time-picker.jsx file. + * + * @return String A string representing the formatted time. + */ +function formatTime(date) { + var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ampm'; + var pedantic = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + + if (!date) return ''; + var hours = date.getHours(); + var mins = date.getMinutes().toString(); + + if (format === 'ampm') { + var isAM = hours < 12; + hours = hours % 12; + var additional = isAM ? ' am' : ' pm'; + hours = (hours || 12).toString(); + + if (mins.length < 2) mins = '0' + mins; + + if (pedantic) { + // Treat midday/midnight specially http://www.nist.gov/pml/div688/times.cfm + if (hours === '12' && mins === '00') { + return additional === ' pm' ? '12 noon' : '12 midnight'; + } + } + + return hours + (mins === '00' ? '' : ':' + mins) + additional; + } + + hours = hours.toString(); + + if (hours.length < 2) hours = '0' + hours; + if (mins.length < 2) mins = '0' + mins; + + return hours + ':' + mins; +} + +function rad2deg(rad) { + return rad * 57.29577951308232; +} + +function getTouchEventOffsetValues(event) { + var el = event.target; + var boundingRect = el.getBoundingClientRect(); + + return { + offsetX: event.clientX - boundingRect.left, + offsetY: event.clientY - boundingRect.top + }; +} + +function isInner(props) { + if (props.type !== 'hour') { + return false; + } + return props.value < 1 || props.value > 12; +} \ No newline at end of file diff --git a/Toggle/Toggle.js b/Toggle/Toggle.js new file mode 100644 index 00000000000000..4323a497e60630 --- /dev/null +++ b/Toggle/Toggle.js @@ -0,0 +1,333 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _transitions = require('../styles/transitions'); + +var _transitions2 = _interopRequireDefault(_transitions); + +var _Paper = require('../Paper'); + +var _Paper2 = _interopRequireDefault(_Paper); + +var _EnhancedSwitch = require('../internal/EnhancedSwitch'); + +var _EnhancedSwitch2 = _interopRequireDefault(_EnhancedSwitch); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context, state) { + var disabled = props.disabled, + elementStyle = props.elementStyle, + trackSwitchedStyle = props.trackSwitchedStyle, + thumbSwitchedStyle = props.thumbSwitchedStyle, + trackStyle = props.trackStyle, + thumbStyle = props.thumbStyle, + iconStyle = props.iconStyle, + rippleStyle = props.rippleStyle, + labelStyle = props.labelStyle; + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + toggle = _context$muiTheme.toggle; + + + var toggleSize = 20; + var toggleTrackWidth = 36; + var styles = { + icon: { + width: 36, + padding: '4px 0px 6px 2px' + }, + ripple: { + top: -10, + left: -10, + color: state.switched ? toggle.thumbOnColor : baseTheme.palette.textColor + }, + toggleElement: { + width: toggleTrackWidth + }, + track: { + transition: _transitions2.default.easeOut(), + width: '100%', + height: 14, + borderRadius: 30, + backgroundColor: toggle.trackOffColor + }, + thumb: { + transition: _transitions2.default.easeOut(), + position: 'absolute', + top: 1, + left: 0, + width: toggleSize, + height: toggleSize, + lineHeight: '24px', + borderRadius: '50%', + backgroundColor: toggle.thumbOffColor + }, + trackWhenSwitched: { + backgroundColor: toggle.trackOnColor + }, + thumbWhenSwitched: { + backgroundColor: toggle.thumbOnColor, + left: '100%' + }, + trackWhenDisabled: { + backgroundColor: toggle.trackDisabledColor + }, + thumbWhenDisabled: { + backgroundColor: toggle.thumbDisabledColor + }, + label: { + color: disabled ? toggle.labelDisabledColor : toggle.labelColor, + width: 'calc(100% - ' + (toggleTrackWidth + 10) + 'px)' + } + }; + + (0, _simpleAssign2.default)(styles.track, trackStyle, state.switched && styles.trackWhenSwitched, state.switched && trackSwitchedStyle, disabled && styles.trackWhenDisabled); + + (0, _simpleAssign2.default)(styles.thumb, thumbStyle, state.switched && styles.thumbWhenSwitched, state.switched && thumbSwitchedStyle, disabled && styles.thumbWhenDisabled); + + if (state.switched) { + styles.thumb.marginLeft = 0 - styles.thumb.width; + } + + (0, _simpleAssign2.default)(styles.icon, iconStyle); + + (0, _simpleAssign2.default)(styles.ripple, rippleStyle); + + (0, _simpleAssign2.default)(styles.label, labelStyle); + + (0, _simpleAssign2.default)(styles.toggleElement, elementStyle); + + return styles; +} + +var Toggle = function (_Component) { + (0, _inherits3.default)(Toggle, _Component); + + function Toggle() { + var _ref; + + var _temp, _this, _ret; + + (0, _classCallCheck3.default)(this, Toggle); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Toggle.__proto__ || (0, _getPrototypeOf2.default)(Toggle)).call.apply(_ref, [this].concat(args))), _this), _this.state = { + switched: false + }, _this.handleStateChange = function (newSwitched) { + _this.setState({ + switched: newSwitched + }); + }, _this.handleToggle = function (event, isInputChecked) { + if (_this.props.onToggle) { + _this.props.onToggle(event, isInputChecked); + } + }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret); + } + + (0, _createClass3.default)(Toggle, [{ + key: 'componentWillMount', + value: function componentWillMount() { + var _props = this.props, + toggled = _props.toggled, + defaultToggled = _props.defaultToggled, + valueLink = _props.valueLink; + + + if (toggled || defaultToggled || valueLink && valueLink.value) { + this.setState({ + switched: true + }); + } + } + }, { + key: 'isToggled', + value: function isToggled() { + return this.refs.enhancedSwitch.isSwitched(); + } + }, { + key: 'setToggled', + value: function setToggled(newToggledValue) { + this.refs.enhancedSwitch.setSwitched(newToggledValue); + } + }, { + key: 'render', + value: function render() { + var _props2 = this.props, + defaultToggled = _props2.defaultToggled, + elementStyle = _props2.elementStyle, + onToggle = _props2.onToggle, + trackSwitchedStyle = _props2.trackSwitchedStyle, + thumbSwitchedStyle = _props2.thumbSwitchedStyle, + toggled = _props2.toggled, + other = (0, _objectWithoutProperties3.default)(_props2, ['defaultToggled', 'elementStyle', 'onToggle', 'trackSwitchedStyle', 'thumbSwitchedStyle', 'toggled']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context, this.state); + + var toggleElement = _react2.default.createElement( + 'div', + { style: prepareStyles((0, _simpleAssign2.default)({}, styles.toggleElement)) }, + _react2.default.createElement('div', { style: prepareStyles((0, _simpleAssign2.default)({}, styles.track)) }), + _react2.default.createElement(_Paper2.default, { style: styles.thumb, circle: true, zDepth: 1 }) + ); + + var enhancedSwitchProps = { + ref: 'enhancedSwitch', + inputType: 'checkbox', + switchElement: toggleElement, + rippleStyle: styles.ripple, + rippleColor: styles.ripple.color, + iconStyle: styles.icon, + trackStyle: styles.track, + thumbStyle: styles.thumb, + labelStyle: styles.label, + switched: this.state.switched, + onSwitch: this.handleToggle, + onParentShouldUpdate: this.handleStateChange, + labelPosition: this.props.labelPosition + }; + + if (this.props.hasOwnProperty('toggled')) { + enhancedSwitchProps.checked = toggled; + } else if (this.props.hasOwnProperty('defaultToggled')) { + enhancedSwitchProps.defaultChecked = defaultToggled; + } + + return _react2.default.createElement(_EnhancedSwitch2.default, (0, _extends3.default)({}, other, enhancedSwitchProps)); + } + }]); + return Toggle; +}(_react.Component); + +Toggle.defaultProps = { + defaultToggled: false, + disabled: false, + labelPosition: 'left' +}; +Toggle.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Toggle.propTypes = { + /** + * Determines whether the Toggle is initially turned on. + * **Warning:** This cannot be used in conjunction with `toggled`. + * Decide between using a controlled or uncontrolled input element and remove one of these props. + * More info: https://fb.me/react-controlled-components + */ + defaultToggled: _propTypes2.default.bool, + /** + * Will disable the toggle if true. + */ + disabled: _propTypes2.default.bool, + /** + * Overrides the inline-styles of the Toggle element. + */ + elementStyle: _propTypes2.default.object, + /** + * Overrides the inline-styles of the Icon element. + */ + iconStyle: _propTypes2.default.object, + /** + * Overrides the inline-styles of the input element. + */ + inputStyle: _propTypes2.default.object, + /** + * Label for toggle. + */ + label: _propTypes2.default.node, + /** + * Where the label will be placed next to the toggle. + */ + labelPosition: _propTypes2.default.oneOf(['left', 'right']), + /** + * Overrides the inline-styles of the Toggle element label. + */ + labelStyle: _propTypes2.default.object, + /** + * Callback function that is fired when the toggle switch is toggled. + * + * @param {object} event Change event targeting the toggle. + * @param {bool} isInputChecked The new value of the toggle. + */ + onToggle: _propTypes2.default.func, + /** + * Override style of ripple. + */ + rippleStyle: _propTypes2.default.object, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * Override style for thumb. + */ + thumbStyle: _propTypes2.default.object, + /** + * Override the inline styles for thumb when the toggle switch is toggled on. + */ + thumbSwitchedStyle: _propTypes2.default.object, + /** + * Toggled if set to true. + */ + toggled: _propTypes2.default.bool, + /** + * Override style for track. + */ + trackStyle: _propTypes2.default.object, + /** + * Override the inline styles for track when the toggle switch is toggled on. + */ + trackSwitchedStyle: _propTypes2.default.object, + /** + * ValueLink prop for when using controlled toggle. + */ + valueLink: _propTypes2.default.object +} : void 0; +exports.default = Toggle; \ No newline at end of file diff --git a/Toggle/index.js b/Toggle/index.js new file mode 100644 index 00000000000000..cac35e98e9e54f --- /dev/null +++ b/Toggle/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = undefined; + +var _Toggle = require('./Toggle'); + +var _Toggle2 = _interopRequireDefault(_Toggle); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _Toggle2.default; \ No newline at end of file diff --git a/Toolbar/Toolbar.js b/Toolbar/Toolbar.js new file mode 100644 index 00000000000000..f7ebdd1bcbd712 --- /dev/null +++ b/Toolbar/Toolbar.js @@ -0,0 +1,124 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var noGutter = props.noGutter; + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + toolbar = _context$muiTheme.toolbar; + + + return { + root: { + boxSizing: 'border-box', + WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated) + backgroundColor: toolbar.backgroundColor, + height: toolbar.height, + padding: noGutter ? 0 : '0px ' + baseTheme.spacing.desktopGutter + 'px', + display: 'flex', + justifyContent: 'space-between' + } + }; +} + +var Toolbar = function (_Component) { + (0, _inherits3.default)(Toolbar, _Component); + + function Toolbar() { + (0, _classCallCheck3.default)(this, Toolbar); + return (0, _possibleConstructorReturn3.default)(this, (Toolbar.__proto__ || (0, _getPrototypeOf2.default)(Toolbar)).apply(this, arguments)); + } + + (0, _createClass3.default)(Toolbar, [{ + key: 'render', + value: function render() { + var _props = this.props, + children = _props.children, + className = _props.className, + noGutter = _props.noGutter, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'noGutter', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), + children + ); + } + }]); + return Toolbar; +}(_react.Component); + +Toolbar.defaultProps = { + noGutter: false +}; +Toolbar.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? Toolbar.propTypes = { + /** + * Can be a `ToolbarGroup` to render a group of related items. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Do not apply `desktopGutter` to the `Toolbar`. + */ + noGutter: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = Toolbar; \ No newline at end of file diff --git a/Toolbar/ToolbarGroup.js b/Toolbar/ToolbarGroup.js new file mode 100644 index 00000000000000..34b1983868632f --- /dev/null +++ b/Toolbar/ToolbarGroup.js @@ -0,0 +1,212 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var firstChild = props.firstChild, + lastChild = props.lastChild; + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + button = _context$muiTheme.button, + toolbar = _context$muiTheme.toolbar; + + + var marginHorizontal = baseTheme.spacing.desktopGutter; + var marginVertical = (toolbar.height - button.height) / 2; + + var styles = { + root: { + position: 'relative', + marginLeft: firstChild ? -marginHorizontal : undefined, + marginRight: lastChild ? -marginHorizontal : undefined, + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center' + }, + dropDownMenu: { + root: { + color: toolbar.color, // removes hover color change, we want to keep it + marginRight: baseTheme.spacing.desktopGutter, + flex: 1, + whiteSpace: 'nowrap' + }, + controlBg: { + backgroundColor: toolbar.menuHoverColor, + borderRadius: 0 + }, + underline: { + display: 'none' + } + }, + button: { + margin: marginVertical + 'px ' + marginHorizontal + 'px', + position: 'relative' + }, + icon: { + root: { + cursor: 'pointer', + lineHeight: toolbar.height + 'px', + paddingLeft: baseTheme.spacing.desktopGutter + } + }, + span: { + color: toolbar.iconColor, + lineHeight: toolbar.height + 'px' + } + }; + + return styles; +} + +var ToolbarGroup = function (_Component) { + (0, _inherits3.default)(ToolbarGroup, _Component); + + function ToolbarGroup() { + (0, _classCallCheck3.default)(this, ToolbarGroup); + return (0, _possibleConstructorReturn3.default)(this, (ToolbarGroup.__proto__ || (0, _getPrototypeOf2.default)(ToolbarGroup)).apply(this, arguments)); + } + + (0, _createClass3.default)(ToolbarGroup, [{ + key: 'handleMouseLeaveFontIcon', + value: function handleMouseLeaveFontIcon(style) { + return function (event) { + event.target.style.zIndex = 'auto'; + event.target.style.color = style.root.color; + }; + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + children = _props.children, + className = _props.className, + firstChild = _props.firstChild, + lastChild = _props.lastChild, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'firstChild', 'lastChild', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + var newChildren = _react2.default.Children.map(children, function (currentChild) { + if (!currentChild) { + return null; + } + if (!currentChild.type) { + return currentChild; + } + switch (currentChild.type.muiName) { + case 'DropDownMenu': + return _react2.default.cloneElement(currentChild, { + style: (0, _simpleAssign2.default)({}, styles.dropDownMenu.root, currentChild.props.style), + underlineStyle: styles.dropDownMenu.underline + }); + case 'RaisedButton': + case 'FlatButton': + return _react2.default.cloneElement(currentChild, { + style: (0, _simpleAssign2.default)({}, styles.button, currentChild.props.style) + }); + case 'FontIcon': + return _react2.default.cloneElement(currentChild, { + style: (0, _simpleAssign2.default)({}, styles.icon.root, currentChild.props.style), + color: currentChild.props.color || _this2.context.muiTheme.toolbar.iconColor, + hoverColor: currentChild.props.hoverColor || _this2.context.muiTheme.toolbar.hoverColor + }); + case 'ToolbarSeparator': + case 'ToolbarTitle': + return _react2.default.cloneElement(currentChild, { + style: (0, _simpleAssign2.default)({}, styles.span, currentChild.props.style) + }); + default: + return currentChild; + } + }, this); + + return _react2.default.createElement( + 'div', + (0, _extends3.default)({}, other, { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) }), + newChildren + ); + } + }]); + return ToolbarGroup; +}(_react.Component); + +ToolbarGroup.defaultProps = { + firstChild: false, + lastChild: false +}; +ToolbarGroup.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ToolbarGroup.propTypes = { + /** + * Can be any node or number of nodes. + */ + children: _propTypes2.default.node, + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Set this to true for if the `ToolbarGroup` is the first child of `Toolbar` + * to prevent setting the left gap. + */ + firstChild: _propTypes2.default.bool, + /** + * Set this to true for if the `ToolbarGroup` is the last child of `Toolbar` + * to prevent setting the right gap. + */ + lastChild: _propTypes2.default.bool, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = ToolbarGroup; \ No newline at end of file diff --git a/Toolbar/ToolbarSeparator.js b/Toolbar/ToolbarSeparator.js new file mode 100644 index 00000000000000..987cd22944e66a --- /dev/null +++ b/Toolbar/ToolbarSeparator.js @@ -0,0 +1,105 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + toolbar = _context$muiTheme.toolbar; + + + return { + root: { + backgroundColor: toolbar.separatorColor, + display: 'block', + height: baseTheme.spacing.desktopGutterMore, + marginLeft: baseTheme.spacing.desktopGutter, + width: 1 + } + }; +} + +var ToolbarSeparator = function (_Component) { + (0, _inherits3.default)(ToolbarSeparator, _Component); + + function ToolbarSeparator() { + (0, _classCallCheck3.default)(this, ToolbarSeparator); + return (0, _possibleConstructorReturn3.default)(this, (ToolbarSeparator.__proto__ || (0, _getPrototypeOf2.default)(ToolbarSeparator)).apply(this, arguments)); + } + + (0, _createClass3.default)(ToolbarSeparator, [{ + key: 'render', + value: function render() { + var _props = this.props, + className = _props.className, + style = _props.style, + other = (0, _objectWithoutProperties3.default)(_props, ['className', 'style']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement('span', (0, _extends3.default)({}, other, { className: className, style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) })); + } + }]); + return ToolbarSeparator; +}(_react.Component); + +ToolbarSeparator.muiName = 'ToolbarSeparator'; +ToolbarSeparator.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ToolbarSeparator.propTypes = { + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object +} : void 0; +exports.default = ToolbarSeparator; \ No newline at end of file diff --git a/Toolbar/ToolbarTitle.js b/Toolbar/ToolbarTitle.js new file mode 100644 index 00000000000000..e47419ed498115 --- /dev/null +++ b/Toolbar/ToolbarTitle.js @@ -0,0 +1,118 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _simpleAssign = require('simple-assign'); + +var _simpleAssign2 = _interopRequireDefault(_simpleAssign); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function getStyles(props, context) { + var _context$muiTheme = context.muiTheme, + baseTheme = _context$muiTheme.baseTheme, + toolbar = _context$muiTheme.toolbar; + + + return { + root: { + paddingRight: baseTheme.spacing.desktopGutterLess, + lineHeight: toolbar.height + 'px', + fontSize: toolbar.titleFontSize, + fontFamily: baseTheme.fontFamily, + position: 'relative', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden' + } + }; +} + +var ToolbarTitle = function (_Component) { + (0, _inherits3.default)(ToolbarTitle, _Component); + + function ToolbarTitle() { + (0, _classCallCheck3.default)(this, ToolbarTitle); + return (0, _possibleConstructorReturn3.default)(this, (ToolbarTitle.__proto__ || (0, _getPrototypeOf2.default)(ToolbarTitle)).apply(this, arguments)); + } + + (0, _createClass3.default)(ToolbarTitle, [{ + key: 'render', + value: function render() { + var _props = this.props, + style = _props.style, + text = _props.text, + other = (0, _objectWithoutProperties3.default)(_props, ['style', 'text']); + var prepareStyles = this.context.muiTheme.prepareStyles; + + var styles = getStyles(this.props, this.context); + + return _react2.default.createElement( + 'span', + (0, _extends3.default)({ + style: prepareStyles((0, _simpleAssign2.default)({}, styles.root, style)) + }, other), + text + ); + } + }]); + return ToolbarTitle; +}(_react.Component); + +ToolbarTitle.muiName = 'ToolbarTitle'; +ToolbarTitle.contextTypes = { + muiTheme: _propTypes2.default.object.isRequired +}; +process.env.NODE_ENV !== "production" ? ToolbarTitle.propTypes = { + /** + * The css class name of the root element. + */ + className: _propTypes2.default.string, + /** + * Override the inline-styles of the root element. + */ + style: _propTypes2.default.object, + /** + * The text to be displayed. + */ + text: _propTypes2.default.node +} : void 0; +exports.default = ToolbarTitle; \ No newline at end of file diff --git a/Toolbar/index.js b/Toolbar/index.js new file mode 100644 index 00000000000000..68c6d3efdfef10 --- /dev/null +++ b/Toolbar/index.js @@ -0,0 +1,30 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.ToolbarTitle = exports.ToolbarSeparator = exports.ToolbarGroup = exports.Toolbar = undefined; + +var _Toolbar2 = require('./Toolbar'); + +var _Toolbar3 = _interopRequireDefault(_Toolbar2); + +var _ToolbarGroup2 = require('./ToolbarGroup'); + +var _ToolbarGroup3 = _interopRequireDefault(_ToolbarGroup2); + +var _ToolbarSeparator2 = require('./ToolbarSeparator'); + +var _ToolbarSeparator3 = _interopRequireDefault(_ToolbarSeparator2); + +var _ToolbarTitle2 = require('./ToolbarTitle'); + +var _ToolbarTitle3 = _interopRequireDefault(_ToolbarTitle2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.Toolbar = _Toolbar3.default; +exports.ToolbarGroup = _ToolbarGroup3.default; +exports.ToolbarSeparator = _ToolbarSeparator3.default; +exports.ToolbarTitle = _ToolbarTitle3.default; +exports.default = _Toolbar3.default; \ No newline at end of file diff --git a/docs/.babelrc b/docs/.babelrc deleted file mode 100644 index 0967ef424bce67..00000000000000 --- a/docs/.babelrc +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/docs/.gitignore b/docs/.gitignore deleted file mode 100644 index 94fc86711d185a..00000000000000 --- a/docs/.gitignore +++ /dev/null @@ -1,34 +0,0 @@ -# OSX -# -.DS_Store - -# Xcode -# -build/ -*.pbxuser -!default.pbxuser -*.mode1v3 -!default.mode1v3 -*.mode2v3 -!default.mode2v3 -*.perspectivev3 -!default.perspectivev3 -xcuserdata -*.xccheckout -*.moved-aside -DerivedData -*.hmap -*.ipa -*.xcuserstate -project.xcworkspace - -# Android/IJ -# -.idea -.gradle -local.properties - -# node.js -# -node_modules/ -npm-debug.log diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 04b076c7cf9528..00000000000000 --- a/docs/README.md +++ /dev/null @@ -1,59 +0,0 @@ -# [Material-UI Docs](http://callemall.github.io/material-ui/) - -This is the documentation website and application of Material-UI. - -## Requirements - -- [Node](https://nodejs.org) 4.0 or newer -- [React Native](http://facebook.github.io/react-native/docs/getting-started.html) for development -- [Xcode](https://developer.apple.com/xcode/) for iOS development (optional) -- [Android SDK](https://developer.android.com/sdk/) for Android development (optional) - -## Installation -After cloning the repository, install dependencies: -```sh -cd /material-ui -npm install -cd /material-ui/docs -npm install -``` - -## Running - -Once dependencies are installed, start the application with: - -### Browser - -```sh -npm run browser:development -``` - -Open `http://localhost:3000` to view the documentation site. - -## Publishing -To publish the docs site, you need write access to the callemall/material-ui-docs-site repository, -and to have set it as a remote called `docs-site` **(this is important as it is referenced in the build script)**: - -```sh -git remote add -t gh-pages docs-site https://github.com/callemall/material-ui-docs-site.git -``` - -Before publishing the docs, update the CHANGELOG, and bump the version number in `package.json`. - -Run the build script with the new version number: - -```sh -cd docs -./gh-pages-buils.js v0.x.x -``` -The build script will update `www/versions.json`, commit this change, and tag the release, -before building the docs site in the gh-pages branch. You must `cd` out of the docs directory to see the changes. - -Return to master, push the preceeding commits to `mui-org/material-ui`, build and publish the release, -then push the updated `gh-pages` branch to the `docs-site` remote: - -```sh -git checkout gh-pages -git push docs-site gh-pages -``` - diff --git a/docs/android/app/build.gradle b/docs/android/app/build.gradle deleted file mode 100644 index f82758c3fac4e8..00000000000000 --- a/docs/android/app/build.gradle +++ /dev/null @@ -1,78 +0,0 @@ -apply plugin: "com.android.application" - -/** - * The react.gradle file registers two tasks: bundleDebugJsAndAssets and bundleReleaseJsAndAssets. - * These basically call `react-native bundle` with the correct arguments during the Android build - * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the - * bundle directly from the development server. Below you can see all the possible configurations - * and their defaults. If you decide to add a configuration block, make sure to add it before the - * `apply from: "react.gradle"` line. - * - * project.ext.react = [ - * // the name of the generated asset file containing your JS bundle - * bundleAssetName: "index.android.bundle", - * - * // the entry file for bundle generation - * entryFile: "index.android.js", - * - * // whether to bundle JS and assets in debug mode - * bundleInDebug: false, - * - * // whether to bundle JS and assets in release mode - * bundleInRelease: true, - * - * // the root of your project, i.e. where "package.json" lives - * root: "../../", - * - * // where to put the JS bundle asset in debug mode - * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", - * - * // where to put the JS bundle asset in release mode - * jsBundleDirRelease: "$buildDir/intermediates/assets/release", - * - * // where to put drawable resources / React Native assets, e.g. the ones you use via - * // require('./image.png')), in debug mode - * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", - * - * // where to put drawable resources / React Native assets, e.g. the ones you use via - * // require('./image.png')), in release mode - * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", - * - * // by default the gradle tasks are skipped if none of the JS files or assets change; this means - * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to - * // date; if you have any other folders that you want to ignore for performance reasons (gradle - * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ - * // for example, you might want to remove it from here. - * inputExcludes: ["android/**", "ios/**"] - * ] - */ - -apply from: "react.gradle" - -android { - compileSdkVersion 23 - buildToolsVersion "23.0.1" - - defaultConfig { - applicationId "com.app" - minSdkVersion 16 - targetSdkVersion 22 - versionCode 1 - versionName "1.0" - ndk { - abiFilters "armeabi-v7a", "x86" - } - } - buildTypes { - release { - minifyEnabled false // Set this to true to enable Proguard - proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" - } - } -} - -dependencies { - compile fileTree(dir: "libs", include: ["*.jar"]) - compile "com.android.support:appcompat-v7:23.0.1" - compile "com.facebook.react:react-native:0.16.+" -} diff --git a/docs/android/app/proguard-rules.pro b/docs/android/app/proguard-rules.pro deleted file mode 100644 index ffa8c9f64b6251..00000000000000 --- a/docs/android/app/proguard-rules.pro +++ /dev/null @@ -1,60 +0,0 @@ -# Add project specific ProGuard rules here. -# By default, the flags in this file are appended to flags specified -# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt -# You can edit the include path and order by changing the proguardFiles -# directive in build.gradle. -# -# For more details, see -# http://developer.android.com/guide/developing/tools/proguard.html - -# Add any project specific keep options here: - -# If your project uses WebView with JS, uncomment the following -# and specify the fully qualified class name to the JavaScript interface -# class: -#-keepclassmembers class fqcn.of.javascript.interface.for.webview { -# public *; -#} - -# Disabling obfuscation is useful if you collect stack traces from production crashes -# (unless you are using a system that supports de-obfuscate the stack traces). --dontobfuscate - -# React Native - -# Keep our interfaces so they can be used by other ProGuard rules. -# See http://sourceforge.net/p/proguard/bugs/466/ --keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip --keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters - -# Do not strip any method/class that is annotated with @DoNotStrip --keep @com.facebook.proguard.annotations.DoNotStrip class * --keepclassmembers class * { - @com.facebook.proguard.annotations.DoNotStrip *; -} - --keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { - void set*(***); - *** get*(); -} - --keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } --keep class * extends com.facebook.react.bridge.NativeModule { *; } --keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } --keepclassmembers class * { @com.facebook.react.uimanager.ReactProp ; } --keepclassmembers class * { @com.facebook.react.uimanager.ReactPropGroup ; } - -# okhttp - --keepattributes Signature --keepattributes *Annotation* --keep class com.squareup.okhttp.** { *; } --keep interface com.squareup.okhttp.** { *; } --dontwarn com.squareup.okhttp.** - -# okio - --keep class sun.misc.Unsafe { *; } --dontwarn java.nio.file.* --dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement --dontwarn okio.** diff --git a/docs/android/app/react.gradle b/docs/android/app/react.gradle deleted file mode 100644 index 1e08b00f13b9e6..00000000000000 --- a/docs/android/app/react.gradle +++ /dev/null @@ -1,87 +0,0 @@ -import org.apache.tools.ant.taskdefs.condition.Os - -def config = project.hasProperty("react") ? project.react : []; - -def bundleAssetName = config.bundleAssetName ?: "index.android.bundle" -def entryFile = config.entryFile ?: "index.android.js" - -// because elvis operator -def elvisFile(thing) { - return thing ? file(thing) : null; -} - -def reactRoot = elvisFile(config.root) ?: file("../../") -def jsBundleDirDebug = elvisFile(config.jsBundleDirDebug) ?: - file("$buildDir/intermediates/assets/debug") -def jsBundleDirRelease = elvisFile(config.jsBundleDirRelease) ?: - file("$buildDir/intermediates/assets/release") -def resourcesDirDebug = elvisFile(config.resourcesDirDebug) ?: - file("$buildDir/intermediates/res/merged/debug") -def resourcesDirRelease = elvisFile(config.resourcesDirRelease) ?: - file("$buildDir/intermediates/res/merged/release") -def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"] - -def jsBundleFileDebug = file("$jsBundleDirDebug/$bundleAssetName") -def jsBundleFileRelease = file("$jsBundleDirRelease/$bundleAssetName") - -task bundleDebugJsAndAssets(type: Exec) { - // create dirs if they are not there (e.g. the "clean" task just ran) - doFirst { - jsBundleDirDebug.mkdirs() - resourcesDirDebug.mkdirs() - } - - // set up inputs and outputs so gradle can cache the result - inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) - outputs.dir jsBundleDirDebug - outputs.dir resourcesDirDebug - - // set up the call to the react-native cli - workingDir reactRoot - if (Os.isFamily(Os.FAMILY_WINDOWS)) { - commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file", - entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug - } else { - commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file", - entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug - } - - enabled config.bundleInDebug ?: false -} - -task bundleReleaseJsAndAssets(type: Exec) { - // create dirs if they are not there (e.g. the "clean" task just ran) - doFirst { - jsBundleDirRelease.mkdirs() - resourcesDirRelease.mkdirs() - } - - // set up inputs and outputs so gradle can cache the result - inputs.files fileTree(dir: reactRoot, excludes: inputExcludes) - outputs.dir jsBundleDirRelease - outputs.dir resourcesDirRelease - - // set up the call to the react-native cli - workingDir reactRoot - if (Os.isFamily(Os.FAMILY_WINDOWS)) { - commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", - entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease - } else { - commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file", - entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease - } - - enabled config.bundleInRelease ?: true -} - -gradle.projectsEvaluated { - // hook bundleDebugJsAndAssets into the android build process - bundleDebugJsAndAssets.dependsOn mergeDebugResources - bundleDebugJsAndAssets.dependsOn mergeDebugAssets - processDebugResources.dependsOn bundleDebugJsAndAssets - - // hook bundleReleaseJsAndAssets into the android build process - bundleReleaseJsAndAssets.dependsOn mergeReleaseResources - bundleReleaseJsAndAssets.dependsOn mergeReleaseAssets - processReleaseResources.dependsOn bundleReleaseJsAndAssets -} diff --git a/docs/android/app/src/main/AndroidManifest.xml b/docs/android/app/src/main/AndroidManifest.xml deleted file mode 100644 index 70beabafed43ae..00000000000000 --- a/docs/android/app/src/main/AndroidManifest.xml +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/docs/android/app/src/main/java/com/app/MainActivity.java b/docs/android/app/src/main/java/com/app/MainActivity.java deleted file mode 100644 index 4bcf2342501787..00000000000000 --- a/docs/android/app/src/main/java/com/app/MainActivity.java +++ /dev/null @@ -1,78 +0,0 @@ -package com.app; - -import android.app.Activity; -import android.os.Bundle; -import android.view.KeyEvent; - -import com.facebook.react.LifecycleState; -import com.facebook.react.ReactInstanceManager; -import com.facebook.react.ReactRootView; -import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler; -import com.facebook.react.shell.MainReactPackage; -import com.facebook.soloader.SoLoader; - -public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { - - private ReactInstanceManager mReactInstanceManager; - private ReactRootView mReactRootView; - - @Override - protected void onCreate(Bundle savedInstanceState) { - super.onCreate(savedInstanceState); - mReactRootView = new ReactRootView(this); - - mReactInstanceManager = ReactInstanceManager.builder() - .setApplication(getApplication()) - .setBundleAssetName("index.android.bundle") - .setJSMainModuleName("src/app/app.android") - .addPackage(new MainReactPackage()) - .setUseDeveloperSupport(BuildConfig.DEBUG) - .setInitialLifecycleState(LifecycleState.RESUMED) - .build(); - - mReactRootView.startReactApplication(mReactInstanceManager, "App", null); - - setContentView(mReactRootView); - } - - @Override - public boolean onKeyUp(int keyCode, KeyEvent event) { - if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) { - mReactInstanceManager.showDevOptionsDialog(); - return true; - } - return super.onKeyUp(keyCode, event); - } - - @Override - public void onBackPressed() { - if (mReactInstanceManager != null) { - mReactInstanceManager.onBackPressed(); - } else { - super.onBackPressed(); - } - } - - @Override - public void invokeDefaultOnBackPressed() { - super.onBackPressed(); - } - - @Override - protected void onPause() { - super.onPause(); - - if (mReactInstanceManager != null) { - mReactInstanceManager.onPause(); - } - } - - @Override - protected void onResume() { - super.onResume(); - - if (mReactInstanceManager != null) { - mReactInstanceManager.onResume(this, this); - } - } -} diff --git a/docs/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/docs/android/app/src/main/res/mipmap-hdpi/ic_launcher.png deleted file mode 100644 index cde69bcccec65160d92116f20ffce4fce0b5245c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3418 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 diff --git a/docs/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/docs/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png deleted file mode 100644 index bfa42f0e7b91d006d22352c9ff2f134e504e3c1d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4842 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 diff --git a/docs/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/docs/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png deleted file mode 100644 index 324e72cdd7480cb983fa1bcc7ce686e51ef87fe7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7718 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 diff --git a/docs/android/app/src/main/res/values/strings.xml b/docs/android/app/src/main/res/values/strings.xml deleted file mode 100644 index 644a7c9ae1c8f7..00000000000000 --- a/docs/android/app/src/main/res/values/strings.xml +++ /dev/null @@ -1,3 +0,0 @@ - - App - diff --git a/docs/android/app/src/main/res/values/styles.xml b/docs/android/app/src/main/res/values/styles.xml deleted file mode 100644 index 319eb0ca100b5a..00000000000000 --- a/docs/android/app/src/main/res/values/styles.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - diff --git a/docs/android/build.gradle b/docs/android/build.gradle deleted file mode 100644 index bdb0fcc6dac69c..00000000000000 --- a/docs/android/build.gradle +++ /dev/null @@ -1,23 +0,0 @@ -// Top-level build file where you can add configuration options common to all sub-projects/modules. - -buildscript { - repositories { - jcenter() - } - dependencies { - classpath 'com.android.tools.build:gradle:1.3.1' - - // NOTE: Do not place your application dependencies here; they belong - // in the individual module build.gradle files - } -} - -allprojects { - repositories { - mavenLocal() - jcenter() - jcenter { - url "http://dl.bintray.com/mkonicek/maven" - } - } -} diff --git a/docs/android/gradle.properties b/docs/android/gradle.properties deleted file mode 100644 index 1fd964e90b1c5e..00000000000000 --- a/docs/android/gradle.properties +++ /dev/null @@ -1,20 +0,0 @@ -# Project-wide Gradle settings. - -# IDE (e.g. Android Studio) users: -# Gradle settings configured through the IDE *will override* -# any settings specified in this file. - -# For more details on how to configure your build environment visit -# http://www.gradle.org/docs/current/userguide/build_environment.html - -# Specifies the JVM arguments used for the daemon process. -# The setting is particularly useful for tweaking memory settings. -# Default value: -Xmx10248m -XX:MaxPermSize=256m -# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 - -# When configured, Gradle will run in incubating parallel mode. -# This option should only be used with decoupled projects. More details, visit -# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects -# org.gradle.parallel=true - -android.useDeprecatedNdk=true diff --git a/docs/android/gradle/wrapper/gradle-wrapper.jar b/docs/android/gradle/wrapper/gradle-wrapper.jar deleted file mode 100644 index b5166dad4d90021f6a0b45268c0755719f1d5cd4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 52266 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 z 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 diff --git a/docs/android/gradle/wrapper/gradle-wrapper.properties b/docs/android/gradle/wrapper/gradle-wrapper.properties deleted file mode 100644 index b9fbfaba0ead21..00000000000000 --- a/docs/android/gradle/wrapper/gradle-wrapper.properties +++ /dev/null @@ -1,5 +0,0 @@ -distributionBase=GRADLE_USER_HOME -distributionPath=wrapper/dists -zipStoreBase=GRADLE_USER_HOME -zipStorePath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip diff --git a/docs/android/gradlew b/docs/android/gradlew deleted file mode 100755 index 91a7e269e19dfc..00000000000000 --- a/docs/android/gradlew +++ /dev/null @@ -1,164 +0,0 @@ -#!/usr/bin/env bash - -############################################################################## -## -## Gradle start up script for UN*X -## -############################################################################## - -# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. -DEFAULT_JVM_OPTS="" - -APP_NAME="Gradle" -APP_BASE_NAME=`basename "$0"` - -# Use the maximum available, or set MAX_FD != -1 to use that value. -MAX_FD="maximum" - -warn ( ) { - echo "$*" -} - -die ( ) { - echo - echo "$*" - echo - exit 1 -} - -# OS specific support (must be 'true' or 'false'). -cygwin=false -msys=false -darwin=false -case "`uname`" in - CYGWIN* ) - cygwin=true - ;; - Darwin* ) - darwin=true - ;; - MINGW* ) - msys=true - ;; -esac - -# For Cygwin, ensure paths are in UNIX format before anything is touched. -if $cygwin ; then - [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` -fi - -# Attempt to set APP_HOME -# Resolve links: $0 may be a link -PRG="$0" -# Need this for relative symlinks. -while [ -h "$PRG" ] ; do - ls=`ls -ld "$PRG"` - link=`expr "$ls" : '.*-> \(.*\)$'` - if expr "$link" : '/.*' > /dev/null; then - PRG="$link" - else - PRG=`dirname "$PRG"`"/$link" - fi -done -SAVED="`pwd`" -cd "`dirname \"$PRG\"`/" >&- -APP_HOME="`pwd -P`" -cd "$SAVED" >&- - -CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar - -# Determine the Java command to use to start the JVM. -if [ -n "$JAVA_HOME" ] ; then - if [ -x "$JAVA_HOME/jre/sh/java" ] ; then - # IBM's JDK on AIX uses strange locations for the executables - JAVACMD="$JAVA_HOME/jre/sh/java" - else - JAVACMD="$JAVA_HOME/bin/java" - fi - if [ ! -x "$JAVACMD" ] ; then - die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME - -Please set the JAVA_HOME variable in your environment to match the -location of your Java installation." - fi -else - JAVACMD="java" - which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. - -Please set the JAVA_HOME variable in your environment to match the -location of your Java installation." -fi - -# Increase the maximum file descriptors if we can. -if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then - MAX_FD_LIMIT=`ulimit -H -n` - if [ $? -eq 0 ] ; then - if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then - MAX_FD="$MAX_FD_LIMIT" - fi - ulimit -n $MAX_FD - if [ $? -ne 0 ] ; then - warn "Could not set maximum file descriptor limit: $MAX_FD" - fi - else - warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" - fi -fi - -# For Darwin, add options to specify how the application appears in the dock -if $darwin; then - GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" -fi - -# For Cygwin, switch paths to Windows format before running java -if $cygwin ; then - APP_HOME=`cygpath --path --mixed "$APP_HOME"` - CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` - - # We build the pattern for arguments to be converted via cygpath - ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` - SEP="" - for dir in $ROOTDIRSRAW ; do - ROOTDIRS="$ROOTDIRS$SEP$dir" - SEP="|" - done - OURCYGPATTERN="(^($ROOTDIRS))" - # Add a user-defined pattern to the cygpath arguments - if [ "$GRADLE_CYGPATTERN" != "" ] ; then - OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" - fi - # Now convert the arguments - kludge to limit ourselves to /bin/sh - i=0 - for arg in "$@" ; do - CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` - CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option - - if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition - eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` - else - eval `echo args$i`="\"$arg\"" - fi - i=$((i+1)) - done - case $i in - (0) set -- ;; - (1) set -- "$args0" ;; - (2) set -- "$args0" "$args1" ;; - (3) set -- "$args0" "$args1" "$args2" ;; - (4) set -- "$args0" "$args1" "$args2" "$args3" ;; - (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; - (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; - (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; - (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; - (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; - esac -fi - -# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules -function splitJvmOpts() { - JVM_OPTS=("$@") -} -eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS -JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" - -exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" diff --git a/docs/android/gradlew.bat b/docs/android/gradlew.bat deleted file mode 100644 index 8a0b282aa6885f..00000000000000 --- a/docs/android/gradlew.bat +++ /dev/null @@ -1,90 +0,0 @@ -@if "%DEBUG%" == "" @echo off -@rem ########################################################################## -@rem -@rem Gradle startup script for Windows -@rem -@rem ########################################################################## - -@rem Set local scope for the variables with windows NT shell -if "%OS%"=="Windows_NT" setlocal - -@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. -set DEFAULT_JVM_OPTS= - -set DIRNAME=%~dp0 -if "%DIRNAME%" == "" set DIRNAME=. -set APP_BASE_NAME=%~n0 -set APP_HOME=%DIRNAME% - -@rem Find java.exe -if defined JAVA_HOME goto findJavaFromJavaHome - -set JAVA_EXE=java.exe -%JAVA_EXE% -version >NUL 2>&1 -if "%ERRORLEVEL%" == "0" goto init - -echo. -echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. - -goto fail - -:findJavaFromJavaHome -set JAVA_HOME=%JAVA_HOME:"=% -set JAVA_EXE=%JAVA_HOME%/bin/java.exe - -if exist "%JAVA_EXE%" goto init - -echo. -echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. - -goto fail - -:init -@rem Get command-line arguments, handling Windowz variants - -if not "%OS%" == "Windows_NT" goto win9xME_args -if "%@eval[2+2]" == "4" goto 4NT_args - -:win9xME_args -@rem Slurp the command line arguments. -set CMD_LINE_ARGS= -set _SKIP=2 - -:win9xME_args_slurp -if "x%~1" == "x" goto execute - -set CMD_LINE_ARGS=%* -goto execute - -:4NT_args -@rem Get arguments from the 4NT Shell from JP Software -set CMD_LINE_ARGS=%$ - -:execute -@rem Setup the command line - -set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar - -@rem Execute Gradle -"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% - -:end -@rem End local scope for the variables with windows NT shell -if "%ERRORLEVEL%"=="0" goto mainEnd - -:fail -rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of -rem the _cmd.exe /c_ return code! -if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 -exit /b 1 - -:mainEnd -if "%OS%"=="Windows_NT" endlocal - -:omega diff --git a/docs/android/settings.gradle b/docs/android/settings.gradle deleted file mode 100644 index 924655cba40ca0..00000000000000 --- a/docs/android/settings.gradle +++ /dev/null @@ -1,3 +0,0 @@ -rootProject.name = 'App' - -include ':app' diff --git a/docs/gh-pages-build.js b/docs/gh-pages-build.js deleted file mode 100755 index 467d77db12467e..00000000000000 --- a/docs/gh-pages-build.js +++ /dev/null @@ -1,147 +0,0 @@ -#!/usr/local/bin/node -/** - * Build a release for the gh-pages docs site. - */ - -var fs = require('fs'); -var execSync = require('child_process').execSync; - -var usage = '\nbuild | [-p]\n'; -var versionsFile = './src/www/versions.json'; - -// Read the command-line args -var args = process.argv; - -if (args.length < 3) { - exit(usage); -} - -var version = args[2]; - -// The regex isn't a perfect filter (it allows any component parts of a pre-release in the right order) -if (!version.match(/v\d{1,2}.\d{1,2}.\d{1,2}-?\w*\.?\d{0,2}/) && version !== 'HEAD') { - exit(usage); -} - -// Exit with a message -function exit(message) { - console.log(message,'\n'); - process.exit(); -} - -// Exec with echo -function execho(command) { - console.log(command); - try { - execSync(command, {stdio: 'inherit'}); - } catch (error) { - console.error(error.output[1]); - process.exit(error.status); - } -} - -// Exec with return value or error -function execReturn(command) { - console.log(command); - try { - return execSync(command, {encoding: 'utf8'}); - } catch (error) { - console.error(error.output[1]); - process.exit(error.status); - } -} - -function preRelease(version) { - return /-/.test(version) || version === 'HEAD'; -} - -function lastCommitIsHead() { - // All the versions - var log = execReturn('git log'); - - // Get the version number of the current commit (line 5, strip leading whitespace and trailing text) - var version = (log.split('\n')[4]+' ').replace(/\s*(\S*).*/, '$1'); - - return version === 'HEAD'; -} - -/** - * Add new version number to versions.js, commit it, and tag the release - * The checks for HEAD can be removed once HEAD builds are automated, as the first entry will always be HEAD. - */ -function addMenuVersion(version) { - var versions = JSON.parse(fs.readFileSync(versionsFile, 'utf8')); - var position = 0; - - // If the first version in the array is HEAD, set the insert position to 1 - if (versions[0] === 'HEAD') { - position = 1; - } - - // If not a new HEAD version, splice it in, otherwise only add it if HEAD is not already present - if (version !== 'HEAD' || (version === 'HEAD' && !position)) { - versions.splice(position, 0, version); - - // Write the file - fs.writeFileSync(versionsFile, JSON.stringify(versions, null, 2)); - - // Commit it (on v0.x branch & tag the release) - execho('git add ' + versionsFile); - execho('git commit -m ' + '\'[Docs] Add ' + version + ' to versions.json\''); - execho('git tag ' + version); - } -} - -/** - * Build the docs site on a detached branch, commit it on gh-pages branch. - */ -function buildDocs() { - // Ensure we're starting in the docs dir - process.chdir(__dirname); - - // Checkout the `gh-pages` branch and update from upstream - execho('git checkout gh-pages && git pull docs-site gh-pages'); - - // Delete last HEAD commit to keep the history clean, unless we're committing a new HEAD version - if (lastCommitIsHead() && version !== 'HEAD') { - execho('git reset --hard HEAD~1'); - } - - // Checkout the tag `version` or v0.x for HEAD - if (version === 'HEAD') { - execho('git checkout --detach v0.x'); - } else { - execho('git checkout tags/' + version); - } - - // Build the docs site - execho('npm install && npm run browser:build'); - - // Version it - execho('mv build ../' + version); - - // Move to the gh-pages branch - execho('git checkout gh-pages'); - - // Symbolic link `release` to latest version - if (!preRelease(version)) { - execho('ln -sfh ./' + version + ' ../release'); - } - - // Symbolic link `versions.json` to latest version - execho('ln -sfh ./' + version + '/versions.json ../versions.json'); - - // Commit the new version - if (version === 'HEAD') { - execho('git commit --amend --no-edit'); - } else { - execho('git add .. && git commit -m \'' + version + '\''); - } - - if (args[3] === '-p') { - execho('git push -f'); - } -} - -addMenuVersion(version); -buildDocs(version); diff --git a/docs/ios/App.xcodeproj/project.pbxproj b/docs/ios/App.xcodeproj/project.pbxproj deleted file mode 100644 index aee170cbbc15af..00000000000000 --- a/docs/ios/App.xcodeproj/project.pbxproj +++ /dev/null @@ -1,751 +0,0 @@ -// !$*UTF8*$! -{ - archiveVersion = 1; - classes = { - }; - objectVersion = 46; - objects = { - -/* Begin PBXBuildFile section */ - 008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */ = {isa = PBXBuildFile; fileRef = 008F07F21AC5B25A0029DE68 /* main.jsbundle */; }; - 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; - 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; - 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; }; - 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; }; - 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; }; - 00E356F31AD99517003FC87E /* AppTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* AppTests.m */; }; - 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; }; - 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; }; - 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; }; - 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; - 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; - 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; - 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; - 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; - 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; -/* End PBXBuildFile section */ - -/* Begin PBXContainerItemProxy section */ - 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 134814201AA4EA6300B7C361; - remoteInfo = RCTActionSheet; - }; - 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 134814201AA4EA6300B7C361; - remoteInfo = RCTGeolocation; - }; - 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 58B5115D1A9E6B3D00147676; - remoteInfo = RCTImage; - }; - 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 58B511DB1A9E6C8500147676; - remoteInfo = RCTNetwork; - }; - 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 832C81801AAF6DEF007FA2F7; - remoteInfo = RCTVibration; - }; - 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; - proxyType = 1; - remoteGlobalIDString = 13B07F861A680F5B00A75B9A; - remoteInfo = App; - }; - 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 134814201AA4EA6300B7C361; - remoteInfo = RCTSettings; - }; - 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 3C86DF461ADF2C930047B81A; - remoteInfo = RCTWebSocket; - }; - 146834031AC3E56700842450 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192; - remoteInfo = React; - }; - 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 134814201AA4EA6300B7C361; - remoteInfo = RCTLinking; - }; - 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = 58B5119B1A9E6C1200147676; - remoteInfo = RCTText; - }; -/* End PBXContainerItemProxy section */ - -/* Begin PBXFileReference section */ - 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = ""; }; - 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; - 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; - 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; - 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; - 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; - 00E356EE1AD99517003FC87E /* AppTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = AppTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; - 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; - 00E356F21AD99517003FC87E /* AppTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AppTests.m; sourceTree = ""; }; - 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; - 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; - 13B07F961A680F5B00A75B9A /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; }; - 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = App/AppDelegate.h; sourceTree = ""; }; - 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = App/AppDelegate.m; sourceTree = ""; }; - 13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = ""; }; - 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = App/Images.xcassets; sourceTree = ""; }; - 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = App/Info.plist; sourceTree = ""; }; - 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = App/main.m; sourceTree = ""; }; - 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; - 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; - 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; -/* End PBXFileReference section */ - -/* Begin PBXFrameworksBuildPhase section */ - 00E356EB1AD99517003FC87E /* Frameworks */ = { - isa = PBXFrameworksBuildPhase; - buildActionMask = 2147483647; - files = ( - ); - runOnlyForDeploymentPostprocessing = 0; - }; - 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { - isa = PBXFrameworksBuildPhase; - buildActionMask = 2147483647; - files = ( - 146834051AC3E58100842450 /* libReact.a in Frameworks */, - 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, - 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, - 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, - 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */, - 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */, - 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */, - 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */, - 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */, - 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXFrameworksBuildPhase section */ - -/* Begin PBXGroup section */ - 00C302A81ABCB8CE00DB3ED1 /* Products */ = { - isa = PBXGroup; - children = ( - 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */, - ); - name = Products; - sourceTree = ""; - }; - 00C302B61ABCB90400DB3ED1 /* Products */ = { - isa = PBXGroup; - children = ( - 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */, - ); - name = Products; - sourceTree = ""; - }; - 00C302BC1ABCB91800DB3ED1 /* Products */ = { - isa = PBXGroup; - children = ( - 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */, - ); - name = Products; - sourceTree = ""; - }; - 00C302D41ABCB9D200DB3ED1 /* Products */ = { - isa = PBXGroup; - children = ( - 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */, - ); - name = Products; - sourceTree = ""; - }; - 00C302E01ABCB9EE00DB3ED1 /* Products */ = { - isa = PBXGroup; - children = ( - 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */, - ); - name = Products; - sourceTree = ""; - }; - 00E356EF1AD99517003FC87E /* AppTests */ = { - isa = PBXGroup; - children = ( - 00E356F21AD99517003FC87E /* AppTests.m */, - 00E356F01AD99517003FC87E /* Supporting Files */, - ); - path = AppTests; - sourceTree = ""; - }; - 00E356F01AD99517003FC87E /* Supporting Files */ = { - isa = PBXGroup; - children = ( - 00E356F11AD99517003FC87E /* Info.plist */, - ); - name = "Supporting Files"; - sourceTree = ""; - }; - 139105B71AF99BAD00B5F7CC /* Products */ = { - isa = PBXGroup; - children = ( - 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */, - ); - name = Products; - sourceTree = ""; - }; - 139FDEE71B06529A00C62182 /* Products */ = { - isa = PBXGroup; - children = ( - 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */, - ); - name = Products; - sourceTree = ""; - }; - 13B07FAE1A68108700A75B9A /* App */ = { - isa = PBXGroup; - children = ( - 008F07F21AC5B25A0029DE68 /* main.jsbundle */, - 13B07FAF1A68108700A75B9A /* AppDelegate.h */, - 13B07FB01A68108700A75B9A /* AppDelegate.m */, - 13B07FB51A68108700A75B9A /* Images.xcassets */, - 13B07FB61A68108700A75B9A /* Info.plist */, - 13B07FB11A68108700A75B9A /* LaunchScreen.xib */, - 13B07FB71A68108700A75B9A /* main.m */, - ); - name = App; - sourceTree = ""; - }; - 146834001AC3E56700842450 /* Products */ = { - isa = PBXGroup; - children = ( - 146834041AC3E56700842450 /* libReact.a */, - ); - name = Products; - sourceTree = ""; - }; - 78C398B11ACF4ADC00677621 /* Products */ = { - isa = PBXGroup; - children = ( - 78C398B91ACF4ADC00677621 /* libRCTLinking.a */, - ); - name = Products; - sourceTree = ""; - }; - 832341AE1AAA6A7D00B99B32 /* Libraries */ = { - isa = PBXGroup; - children = ( - 146833FF1AC3E56700842450 /* React.xcodeproj */, - 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, - 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */, - 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */, - 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */, - 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */, - 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */, - 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */, - 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */, - 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */, - ); - name = Libraries; - sourceTree = ""; - }; - 832341B11AAA6A8300B99B32 /* Products */ = { - isa = PBXGroup; - children = ( - 832341B51AAA6A8300B99B32 /* libRCTText.a */, - ); - name = Products; - sourceTree = ""; - }; - 83CBB9F61A601CBA00E9B192 = { - isa = PBXGroup; - children = ( - 13B07FAE1A68108700A75B9A /* App */, - 832341AE1AAA6A7D00B99B32 /* Libraries */, - 00E356EF1AD99517003FC87E /* AppTests */, - 83CBBA001A601CBA00E9B192 /* Products */, - ); - indentWidth = 2; - sourceTree = ""; - tabWidth = 2; - }; - 83CBBA001A601CBA00E9B192 /* Products */ = { - isa = PBXGroup; - children = ( - 13B07F961A680F5B00A75B9A /* App.app */, - 00E356EE1AD99517003FC87E /* AppTests.xctest */, - ); - name = Products; - sourceTree = ""; - }; -/* End PBXGroup section */ - -/* Begin PBXNativeTarget section */ - 00E356ED1AD99517003FC87E /* AppTests */ = { - isa = PBXNativeTarget; - buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "AppTests" */; - buildPhases = ( - 00E356EA1AD99517003FC87E /* Sources */, - 00E356EB1AD99517003FC87E /* Frameworks */, - 00E356EC1AD99517003FC87E /* Resources */, - ); - buildRules = ( - ); - dependencies = ( - 00E356F51AD99517003FC87E /* PBXTargetDependency */, - ); - name = AppTests; - productName = AppTests; - productReference = 00E356EE1AD99517003FC87E /* AppTests.xctest */; - productType = "com.apple.product-type.bundle.unit-test"; - }; - 13B07F861A680F5B00A75B9A /* App */ = { - isa = PBXNativeTarget; - buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "App" */; - buildPhases = ( - 13B07F871A680F5B00A75B9A /* Sources */, - 13B07F8C1A680F5B00A75B9A /* Frameworks */, - 13B07F8E1A680F5B00A75B9A /* Resources */, - ); - buildRules = ( - ); - dependencies = ( - ); - name = App; - productName = "Hello World"; - productReference = 13B07F961A680F5B00A75B9A /* App.app */; - productType = "com.apple.product-type.application"; - }; -/* End PBXNativeTarget section */ - -/* Begin PBXProject section */ - 83CBB9F71A601CBA00E9B192 /* Project object */ = { - isa = PBXProject; - attributes = { - LastUpgradeCheck = 0710; - ORGANIZATIONNAME = Facebook; - TargetAttributes = { - 00E356ED1AD99517003FC87E = { - CreatedOnToolsVersion = 6.2; - TestTargetID = 13B07F861A680F5B00A75B9A; - }; - }; - }; - buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "App" */; - compatibilityVersion = "Xcode 3.2"; - developmentRegion = English; - hasScannedForEncodings = 0; - knownRegions = ( - en, - Base, - ); - mainGroup = 83CBB9F61A601CBA00E9B192; - productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; - projectDirPath = ""; - projectReferences = ( - { - ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; - ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; - }, - { - ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */; - ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; - }, - { - ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */; - ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; - }, - { - ProductGroup = 78C398B11ACF4ADC00677621 /* Products */; - ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; - }, - { - ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */; - ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; - }, - { - ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */; - ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; - }, - { - ProductGroup = 832341B11AAA6A8300B99B32 /* Products */; - ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; - }, - { - ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */; - ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; - }, - { - ProductGroup = 139FDEE71B06529A00C62182 /* Products */; - ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; - }, - { - ProductGroup = 146834001AC3E56700842450 /* Products */; - ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */; - }, - ); - projectRoot = ""; - targets = ( - 13B07F861A680F5B00A75B9A /* App */, - 00E356ED1AD99517003FC87E /* AppTests */, - ); - }; -/* End PBXProject section */ - -/* Begin PBXReferenceProxy section */ - 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTActionSheet.a; - remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTGeolocation.a; - remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTImage.a; - remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTNetwork.a; - remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTVibration.a; - remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTSettings.a; - remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTWebSocket.a; - remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 146834041AC3E56700842450 /* libReact.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libReact.a; - remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTLinking.a; - remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - 832341B51AAA6A8300B99B32 /* libRCTText.a */ = { - isa = PBXReferenceProxy; - fileType = archive.ar; - path = libRCTText.a; - remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; -/* End PBXReferenceProxy section */ - -/* Begin PBXResourcesBuildPhase section */ - 00E356EC1AD99517003FC87E /* Resources */ = { - isa = PBXResourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - ); - runOnlyForDeploymentPostprocessing = 0; - }; - 13B07F8E1A680F5B00A75B9A /* Resources */ = { - isa = PBXResourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - 008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */, - 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, - 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXResourcesBuildPhase section */ - -/* Begin PBXSourcesBuildPhase section */ - 00E356EA1AD99517003FC87E /* Sources */ = { - isa = PBXSourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - 00E356F31AD99517003FC87E /* AppTests.m in Sources */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; - 13B07F871A680F5B00A75B9A /* Sources */ = { - isa = PBXSourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, - 13B07FC11A68108700A75B9A /* main.m in Sources */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXSourcesBuildPhase section */ - -/* Begin PBXTargetDependency section */ - 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { - isa = PBXTargetDependency; - target = 13B07F861A680F5B00A75B9A /* App */; - targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; - }; -/* End PBXTargetDependency section */ - -/* Begin PBXVariantGroup section */ - 13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = { - isa = PBXVariantGroup; - children = ( - 13B07FB21A68108700A75B9A /* Base */, - ); - name = LaunchScreen.xib; - path = App; - sourceTree = ""; - }; -/* End PBXVariantGroup section */ - -/* Begin XCBuildConfiguration section */ - 00E356F61AD99517003FC87E /* Debug */ = { - isa = XCBuildConfiguration; - buildSettings = { - BUNDLE_LOADER = "$(TEST_HOST)"; - FRAMEWORK_SEARCH_PATHS = ( - "$(SDKROOT)/Developer/Library/Frameworks", - "$(inherited)", - ); - GCC_PREPROCESSOR_DEFINITIONS = ( - "DEBUG=1", - "$(inherited)", - ); - INFOPLIST_FILE = AppTests/Info.plist; - IPHONEOS_DEPLOYMENT_TARGET = 8.2; - LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; - PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; - PRODUCT_NAME = "$(TARGET_NAME)"; - TEST_HOST = "$(BUILT_PRODUCTS_DIR)/App.app/App"; - }; - name = Debug; - }; - 00E356F71AD99517003FC87E /* Release */ = { - isa = XCBuildConfiguration; - buildSettings = { - BUNDLE_LOADER = "$(TEST_HOST)"; - COPY_PHASE_STRIP = NO; - FRAMEWORK_SEARCH_PATHS = ( - "$(SDKROOT)/Developer/Library/Frameworks", - "$(inherited)", - ); - INFOPLIST_FILE = AppTests/Info.plist; - IPHONEOS_DEPLOYMENT_TARGET = 8.2; - LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; - PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; - PRODUCT_NAME = "$(TARGET_NAME)"; - TEST_HOST = "$(BUILT_PRODUCTS_DIR)/App.app/App"; - }; - name = Release; - }; - 13B07F941A680F5B00A75B9A /* Debug */ = { - isa = XCBuildConfiguration; - buildSettings = { - ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; - DEAD_CODE_STRIPPING = NO; - HEADER_SEARCH_PATHS = ( - "$(inherited)", - /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", - ); - INFOPLIST_FILE = App/Info.plist; - LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - OTHER_LDFLAGS = "-ObjC"; - PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; - PRODUCT_NAME = App; - }; - name = Debug; - }; - 13B07F951A680F5B00A75B9A /* Release */ = { - isa = XCBuildConfiguration; - buildSettings = { - ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; - HEADER_SEARCH_PATHS = ( - "$(inherited)", - /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", - ); - INFOPLIST_FILE = App/Info.plist; - LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; - OTHER_LDFLAGS = "-ObjC"; - PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; - PRODUCT_NAME = App; - }; - name = Release; - }; - 83CBBA201A601CBA00E9B192 /* Debug */ = { - isa = XCBuildConfiguration; - buildSettings = { - ALWAYS_SEARCH_USER_PATHS = NO; - CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; - CLANG_CXX_LIBRARY = "libc++"; - CLANG_ENABLE_MODULES = YES; - CLANG_ENABLE_OBJC_ARC = YES; - CLANG_WARN_BOOL_CONVERSION = YES; - CLANG_WARN_CONSTANT_CONVERSION = YES; - CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; - CLANG_WARN_EMPTY_BODY = YES; - CLANG_WARN_ENUM_CONVERSION = YES; - CLANG_WARN_INT_CONVERSION = YES; - CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; - CLANG_WARN_UNREACHABLE_CODE = YES; - CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; - "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; - COPY_PHASE_STRIP = NO; - ENABLE_STRICT_OBJC_MSGSEND = YES; - ENABLE_TESTABILITY = YES; - GCC_C_LANGUAGE_STANDARD = gnu99; - GCC_DYNAMIC_NO_PIC = NO; - GCC_OPTIMIZATION_LEVEL = 0; - GCC_PREPROCESSOR_DEFINITIONS = ( - "DEBUG=1", - "$(inherited)", - ); - GCC_SYMBOLS_PRIVATE_EXTERN = NO; - GCC_WARN_64_TO_32_BIT_CONVERSION = YES; - GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; - GCC_WARN_UNDECLARED_SELECTOR = YES; - GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; - GCC_WARN_UNUSED_FUNCTION = YES; - GCC_WARN_UNUSED_VARIABLE = YES; - HEADER_SEARCH_PATHS = ( - "$(inherited)", - /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", - ); - IPHONEOS_DEPLOYMENT_TARGET = 7.0; - MTL_ENABLE_DEBUG_INFO = YES; - ONLY_ACTIVE_ARCH = YES; - SDKROOT = iphoneos; - }; - name = Debug; - }; - 83CBBA211A601CBA00E9B192 /* Release */ = { - isa = XCBuildConfiguration; - buildSettings = { - ALWAYS_SEARCH_USER_PATHS = NO; - CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; - CLANG_CXX_LIBRARY = "libc++"; - CLANG_ENABLE_MODULES = YES; - CLANG_ENABLE_OBJC_ARC = YES; - CLANG_WARN_BOOL_CONVERSION = YES; - CLANG_WARN_CONSTANT_CONVERSION = YES; - CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; - CLANG_WARN_EMPTY_BODY = YES; - CLANG_WARN_ENUM_CONVERSION = YES; - CLANG_WARN_INT_CONVERSION = YES; - CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; - CLANG_WARN_UNREACHABLE_CODE = YES; - CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; - "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; - COPY_PHASE_STRIP = YES; - ENABLE_NS_ASSERTIONS = NO; - ENABLE_STRICT_OBJC_MSGSEND = YES; - GCC_C_LANGUAGE_STANDARD = gnu99; - GCC_WARN_64_TO_32_BIT_CONVERSION = YES; - GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; - GCC_WARN_UNDECLARED_SELECTOR = YES; - GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; - GCC_WARN_UNUSED_FUNCTION = YES; - GCC_WARN_UNUSED_VARIABLE = YES; - HEADER_SEARCH_PATHS = ( - "$(inherited)", - /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, - "$(SRCROOT)/../node_modules/react-native/React/**", - ); - IPHONEOS_DEPLOYMENT_TARGET = 7.0; - MTL_ENABLE_DEBUG_INFO = NO; - SDKROOT = iphoneos; - VALIDATE_PRODUCT = YES; - }; - name = Release; - }; -/* End XCBuildConfiguration section */ - -/* Begin XCConfigurationList section */ - 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "AppTests" */ = { - isa = XCConfigurationList; - buildConfigurations = ( - 00E356F61AD99517003FC87E /* Debug */, - 00E356F71AD99517003FC87E /* Release */, - ); - defaultConfigurationIsVisible = 0; - defaultConfigurationName = Release; - }; - 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "App" */ = { - isa = XCConfigurationList; - buildConfigurations = ( - 13B07F941A680F5B00A75B9A /* Debug */, - 13B07F951A680F5B00A75B9A /* Release */, - ); - defaultConfigurationIsVisible = 0; - defaultConfigurationName = Release; - }; - 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "App" */ = { - isa = XCConfigurationList; - buildConfigurations = ( - 83CBBA201A601CBA00E9B192 /* Debug */, - 83CBBA211A601CBA00E9B192 /* Release */, - ); - defaultConfigurationIsVisible = 0; - defaultConfigurationName = Release; - }; -/* End XCConfigurationList section */ - }; - rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; -} diff --git a/docs/ios/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme b/docs/ios/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme deleted file mode 100644 index aecc958266943a..00000000000000 --- a/docs/ios/App.xcodeproj/xcshareddata/xcschemes/App.xcscheme +++ /dev/null @@ -1,112 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/ios/App/AppDelegate.h b/docs/ios/App/AppDelegate.h deleted file mode 100644 index a9654d5e01b18c..00000000000000 --- a/docs/ios/App/AppDelegate.h +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -#import - -@interface AppDelegate : UIResponder - -@property (nonatomic, strong) UIWindow *window; - -@end diff --git a/docs/ios/App/AppDelegate.m b/docs/ios/App/AppDelegate.m deleted file mode 100644 index 0e0432422a3655..00000000000000 --- a/docs/ios/App/AppDelegate.m +++ /dev/null @@ -1,61 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -#import "AppDelegate.h" - -#import "RCTRootView.h" - -@implementation AppDelegate - -- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions -{ - NSURL *jsCodeLocation; - - /** - * Loading JavaScript code - uncomment the one you want. - * - * OPTION 1 - * Load from development server. Start the server from the repository root: - * - * $ npm start - * - * To run on device, change `localhost` to the IP address of your computer - * (you can get this by typing `ifconfig` into the terminal and selecting the - * `inet` value under `en0:`) and make sure your computer and iOS device are - * on the same Wi-Fi network. - */ - - jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/src/app/app.ios.bundle?platform=ios&dev=true"]; - - /** - * OPTION 2 - * Load from pre-bundled file on disk. To re-generate the static bundle - * from the root of your project directory, run - * - * $ curl 'http://localhost:8080/index.ios.bundle?dev=false&minify=true' -o ios/main.jsbundle - * - * see http://facebook.github.io/react-native/docs/runningondevice.html - */ - -// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; - - RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation - moduleName:@"App" - initialProperties:nil - launchOptions:launchOptions]; - - self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; - UIViewController *rootViewController = [UIViewController new]; - rootViewController.view = rootView; - self.window.rootViewController = rootViewController; - [self.window makeKeyAndVisible]; - return YES; -} - -@end diff --git a/docs/ios/App/Base.lproj/LaunchScreen.xib b/docs/ios/App/Base.lproj/LaunchScreen.xib deleted file mode 100644 index 3bd9c9e7cfc8fc..00000000000000 --- a/docs/ios/App/Base.lproj/LaunchScreen.xib +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/ios/App/Images.xcassets/AppIcon.appiconset/Contents.json b/docs/ios/App/Images.xcassets/AppIcon.appiconset/Contents.json deleted file mode 100644 index 118c98f7461bf9..00000000000000 --- a/docs/ios/App/Images.xcassets/AppIcon.appiconset/Contents.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "images" : [ - { - "idiom" : "iphone", - "size" : "29x29", - "scale" : "2x" - }, - { - "idiom" : "iphone", - "size" : "29x29", - "scale" : "3x" - }, - { - "idiom" : "iphone", - "size" : "40x40", - "scale" : "2x" - }, - { - "idiom" : "iphone", - "size" : "40x40", - "scale" : "3x" - }, - { - "idiom" : "iphone", - "size" : "60x60", - "scale" : "2x" - }, - { - "idiom" : "iphone", - "size" : "60x60", - "scale" : "3x" - } - ], - "info" : { - "version" : 1, - "author" : "xcode" - } -} \ No newline at end of file diff --git a/docs/ios/App/Info.plist b/docs/ios/App/Info.plist deleted file mode 100644 index e01b3a76c15106..00000000000000 --- a/docs/ios/App/Info.plist +++ /dev/null @@ -1,46 +0,0 @@ - - - - - CFBundleDevelopmentRegion - en - CFBundleExecutable - $(EXECUTABLE_NAME) - CFBundleIdentifier - $(PRODUCT_BUNDLE_IDENTIFIER) - CFBundleInfoDictionaryVersion - 6.0 - CFBundleName - $(PRODUCT_NAME) - CFBundlePackageType - APPL - CFBundleShortVersionString - 1.0 - CFBundleSignature - ???? - CFBundleVersion - 1 - LSRequiresIPhoneOS - - UILaunchStoryboardName - LaunchScreen - UIRequiredDeviceCapabilities - - armv7 - - UISupportedInterfaceOrientations - - UIInterfaceOrientationPortrait - UIInterfaceOrientationLandscapeLeft - UIInterfaceOrientationLandscapeRight - - NSLocationWhenInUseUsageDescription - - NSAppTransportSecurity - - - NSAllowsArbitraryLoads - - - - diff --git a/docs/ios/App/main.m b/docs/ios/App/main.m deleted file mode 100644 index 3d767fcbb9fced..00000000000000 --- a/docs/ios/App/main.m +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -#import - -#import "AppDelegate.h" - -int main(int argc, char * argv[]) { - @autoreleasepool { - return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); - } -} diff --git a/docs/ios/AppTests/AppTests.m b/docs/ios/AppTests/AppTests.m deleted file mode 100644 index be3cb9c6a84997..00000000000000 --- a/docs/ios/AppTests/AppTests.m +++ /dev/null @@ -1,70 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ - -#import -#import - -#import "RCTLog.h" -#import "RCTRootView.h" - -#define TIMEOUT_SECONDS 240 -#define TEXT_TO_LOOK_FOR @"Welcome to React Native!" - -@interface AppTests : XCTestCase - -@end - -@implementation AppTests - -- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test -{ - if (test(view)) { - return YES; - } - for (UIView *subview in [view subviews]) { - if ([self findSubviewInView:subview matching:test]) { - return YES; - } - } - return NO; -} - -- (void)testRendersWelcomeScreen -{ - UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; - NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; - BOOL foundElement = NO; - - __block NSString *redboxError = nil; - RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { - if (level >= RCTLogLevelError) { - redboxError = message; - } - }); - - while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { - [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; - [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; - - foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { - if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { - return YES; - } - return NO; - }]; - } - - RCTSetLogFunction(RCTDefaultLogFunction); - - XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); - XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); -} - - -@end diff --git a/docs/ios/AppTests/Info.plist b/docs/ios/AppTests/Info.plist deleted file mode 100644 index 886825ccc9bf0d..00000000000000 --- a/docs/ios/AppTests/Info.plist +++ /dev/null @@ -1,24 +0,0 @@ - - - - - CFBundleDevelopmentRegion - en - CFBundleExecutable - $(EXECUTABLE_NAME) - CFBundleIdentifier - org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) - CFBundleInfoDictionaryVersion - 6.0 - CFBundleName - $(PRODUCT_NAME) - CFBundlePackageType - BNDL - CFBundleShortVersionString - 1.0 - CFBundleSignature - ???? - CFBundleVersion - 1 - - diff --git a/docs/ios/main.jsbundle b/docs/ios/main.jsbundle deleted file mode 100644 index b702b30c66dc4c..00000000000000 --- a/docs/ios/main.jsbundle +++ /dev/null @@ -1,8 +0,0 @@ -// Offline JS -// To re-generate the offline bundle, run this from the root of your project: -// -// $ react-native bundle --minify -// -// See http://facebook.github.io/react-native/docs/runningondevice.html for more details. - -throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions'); diff --git a/docs/package.json b/docs/package.json deleted file mode 100644 index 10ecce38f2c313..00000000000000 --- a/docs/package.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "material-ui-docs", - "version": "0.19.3", - "description": "Documentation site for Material-UI", - "repository": { - "type": "git", - "url": "https://github.com/callemall/material-ui.git" - }, - "engines": { - "node": ">=4" - }, - "private": true, - "scripts": { - "start": "npm run browser:development", - "browser:development": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --inline", - "browser:build": "NODE_ENV=docs-production webpack --config webpack-production.config.js --progress --colors --profile", - "browser:prd": "NODE_ENV=docs-production webpack-dev-server --config webpack-production.config.js --progress --colors", - "gh-pages:build": "node ./gh-pages-build.js", - "native:development": "node_modules/react-native/packager/packager.sh --reset-cache", - "android:setup-port": "adb reverse tcp:8081 tcp:8081" - }, - "dependencies": { - "babel-polyfill": "^6.16.0", - "material-ui-persian-date-picker-utils": "^0.0.3", - "react-title-component": "^1.0.1", - "simple-assign": "^0.1.0" - }, - "devDependencies": { - "copy-webpack-plugin": "^4.0.1", - "css-loader": "^0.25.0", - "doctrine": "^2.0.0", - "highlight.js": "^9.8.0", - "history": "^2.0.0", - "intl": "^1.2.5", - "intl-locales-supported": "^1.0.0", - "json-loader": "^0.5.4", - "marked": "^0.3.5", - "raw-loader": "^0.5.1", - "react-addons-perf": "^15.4.0", - "react-docgen": "^2.14.1", - "react-motion": "^0.4.5", - "react-native": "^0.17.0", - "react-router": "^3.0.0", - "react-swipeable-views": "^0.8.0", - "recast": "^0.11.17", - "style-loader": "0.13.1", - "webpack": "^1.13.3", - "webpack-dev-server": "^1.16.2" - } -} diff --git a/docs/src/.babelrc b/docs/src/.babelrc deleted file mode 100644 index a6d42a941af375..00000000000000 --- a/docs/src/.babelrc +++ /dev/null @@ -1,16 +0,0 @@ -{ - "presets": ["react", "es2015", "stage-1"], - "plugins": [ - ["transform-replace-object-assign", "simple-assign"] - ], - "env": { - "docs-production": { - "plugins": [ - "transform-react-remove-prop-types", - "transform-react-constant-elements", - "transform-react-inline-elements", - ["transform-replace-object-assign", "simple-assign"] - ] - } - } -} diff --git a/docs/src/app/AppRoutes.js b/docs/src/app/AppRoutes.js deleted file mode 100644 index 50fd139fc04755..00000000000000 --- a/docs/src/app/AppRoutes.js +++ /dev/null @@ -1,149 +0,0 @@ -import React from 'react'; -import { - Route, - Redirect, - IndexRoute, -} from 'react-router'; - -// Here we define all our material-ui ReactComponents. -import Master from './components/Master'; -import Home from './components/pages/Home'; - -import RequiredKnowledge from './components/pages/get-started/RequiredKnowledge'; -import Installation from './components/pages/get-started/Installation'; -import Usage from './components/pages/get-started/Usage'; -import Examples from './components/pages/get-started/Examples'; -import ServerRendering from './components/pages/get-started/ServerRendering'; - -import Colors from './components/pages/customization/Colors'; -import Themes from './components/pages/customization/Themes'; -import Styles from './components/pages/customization/Styles'; - -import AppBarPage from './components/pages/components/AppBar/Page'; -import AutoCompletePage from './components/pages/components/AutoComplete/Page'; -import AvatarPage from './components/pages/components/Avatar/Page'; -import BadgePage from './components/pages/components/Badge/Page'; -import BottomNavigationPage from './components/pages/components/BottomNavigation/Page'; -import CardPage from './components/pages/components/Card/Page'; -import ChipPage from './components/pages/components/Chip/Page'; -import CircularProgressPage from './components/pages/components/CircularProgress/Page'; -import CheckboxPage from './components/pages/components/Checkbox/Page'; -import DatePicker from './components/pages/components/DatePicker/Page'; -import DialogPage from './components/pages/components/Dialog/Page'; -import DividerPage from './components/pages/components/Divider/Page'; -import DrawerPage from './components/pages/components/Drawer/Page'; -import DropDownMenuPage from './components/pages/components/DropDownMenu/Page'; -import FlatButtonPage from './components/pages/components/FlatButton/Page'; -import FloatingActionButtonPage from './components/pages/components/FloatingActionButton/Page'; -import FontIconPage from './components/pages/components/FontIcon/Page'; -import GridListPage from './components/pages/components/GridList/Page'; -import IconButtonPage from './components/pages/components/IconButton/Page'; -import IconMenuPage from './components/pages/components/IconMenu/Page'; -import ListPage from './components/pages/components/List/Page'; -import LinearProgressPage from './components/pages/components/LinearProgress/Page'; -import PaperPage from './components/pages/components/Paper/Page'; -import MenuPage from './components/pages/components/Menu/Page'; -import PopoverPage from './components/pages/components/Popover/Page'; -import RaisedButtonPage from './components/pages/components/RaisedButton/Page'; -import RefreshIndicatorPage from './components/pages/components/RefreshIndicator/Page'; -import RadioButtonPage from './components/pages/components/RadioButton/Page'; -import SelectField from './components/pages/components/SelectField/Page'; -import SliderPage from './components/pages/components/Slider/Page'; -import SnackbarPage from './components/pages/components/Snackbar/Page'; -import SvgIconPage from './components/pages/components/SvgIcon/Page'; -import SubheaderPage from './components/pages/components/Subheader/Page'; -import TablePage from './components/pages/components/Table/Page'; -import TabsPage from './components/pages/components/Tabs/Page'; -import TextFieldPage from './components/pages/components/TextField/Page'; -import TimePickerPage from './components/pages/components/TimePicker/Page'; -import TogglePage from './components/pages/components/Toggle/Page'; -import ToolbarPage from './components/pages/components/Toolbar/Page'; - -import Community from './components/pages/discover-more/Community'; -import Contributing from './components/pages/discover-more/Contributing'; -import Showcase from './components/pages/discover-more/Showcase'; -import RelatedProjects from './components/pages/discover-more/RelatedProjects'; - -import StepperPage from './components/pages/components/Stepper/Page'; - -/** - * Routes: https://github.com/reactjs/react-router/blob/master/docs/API.md#route - * - * Routes are used to declare your view hierarchy. - * - * Say you go to http://material-ui.com/#/components/paper - * The react router will search for a route named 'paper' and will recursively render its - * handler and its parent handler like so: Paper > Components > Master - */ -const AppRoutes = ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -export default AppRoutes; diff --git a/docs/src/app/app.android.js b/docs/src/app/app.android.js deleted file mode 100644 index 953e4e020690a7..00000000000000 --- a/docs/src/app/app.android.js +++ /dev/null @@ -1,7 +0,0 @@ -import { - AppRegistry, -} from 'react-native'; - -import App from './app.native'; - -AppRegistry.registerComponent('App', () => App); diff --git a/docs/src/app/app.ios.js b/docs/src/app/app.ios.js deleted file mode 100644 index 953e4e020690a7..00000000000000 --- a/docs/src/app/app.ios.js +++ /dev/null @@ -1,7 +0,0 @@ -import { - AppRegistry, -} from 'react-native'; - -import App from './app.native'; - -AppRegistry.registerComponent('App', () => App); diff --git a/docs/src/app/app.js b/docs/src/app/app.js deleted file mode 100644 index f7923c61b4aea3..00000000000000 --- a/docs/src/app/app.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import {render} from 'react-dom'; -import {Router, useRouterHistory} from 'react-router'; -import AppRoutes from './AppRoutes'; -import {createHashHistory} from 'history'; - -// Helpers for debugging -window.React = React; -window.Perf = require('react-addons-perf'); - -/** - * Render the main app component. You can read more about the react-router here: - * https://github.com/reactjs/react-router/blob/master/docs/guides/README.md - */ -render( - window.scrollTo(0, 0)} - > - {AppRoutes} - -, document.getElementById('app')); diff --git a/docs/src/app/app.native.js b/docs/src/app/app.native.js deleted file mode 100644 index a470d8651926b2..00000000000000 --- a/docs/src/app/app.native.js +++ /dev/null @@ -1,69 +0,0 @@ -import React, {Component} from 'react-native'; -import PropTypes from 'prop-types'; - -const { - Platform, - StyleSheet, - Text, - View, -} = React; - -class App extends Component { - - static propTypes = { - instructions: PropTypes.string, - }; - - static defaultProps = { - ...Component.defaultProps, - instructions: 'Usage instructions not provided.', - }; - - constructor(props, context) { - super(props, context); - - this.state = { - platform: Platform.OS, - }; - } - - render() { - const {instructions} = this.props; - const {platform} = this.state; - - return ( - - - Material-UI - - - To get started, edit index.{platform}.js - - - {instructions} - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, -}); - -export default App; diff --git a/docs/src/app/components/AppNavDrawer.js b/docs/src/app/components/AppNavDrawer.js deleted file mode 100644 index 1467ccc32c6c00..00000000000000 --- a/docs/src/app/components/AppNavDrawer.js +++ /dev/null @@ -1,436 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from 'prop-types'; -import Drawer from 'material-ui/Drawer'; -import {List, ListItem, makeSelectable} from 'material-ui/List'; -import Divider from 'material-ui/Divider'; -import Subheader from 'material-ui/Subheader'; -import DropDownMenu from 'material-ui/DropDownMenu'; -import MenuItem from 'material-ui/MenuItem'; -import {spacing, typography, zIndex} from 'material-ui/styles'; -import {cyan500} from 'material-ui/styles/colors'; - -const SelectableList = makeSelectable(List); - -const styles = { - v1: { - height: 40, - backgroundColor: '#2196f3', - }, - logo: { - cursor: 'pointer', - fontSize: 24, - color: typography.textFullWhite, - lineHeight: `${spacing.desktopKeylineIncrement}px`, - fontWeight: typography.fontWeightLight, - backgroundColor: cyan500, - paddingLeft: spacing.desktopGutter, - marginBottom: 8, - }, - version: { - paddingLeft: spacing.desktopGutterLess, - fontSize: 16, - }, -}; - -class AppNavDrawer extends Component { - static propTypes = { - docked: PropTypes.bool.isRequired, - location: PropTypes.object.isRequired, - onChangeList: PropTypes.func.isRequired, - onRequestChangeNavDrawer: PropTypes.func.isRequired, - open: PropTypes.bool.isRequired, - style: PropTypes.object, - }; - - static contextTypes = { - muiTheme: PropTypes.object.isRequired, - router: PropTypes.object.isRequired, - }; - - state = { - muiVersions: [], - }; - - componentDidMount() { - const self = this; - const url = '/versions.json'; - const request = new XMLHttpRequest(); - - request.onreadystatechange = function() { - if (request.readyState === 4 && request.status === 200) { - self.setState({ - muiVersions: JSON.parse(request.responseText), - version: JSON.parse(request.responseText)[0], - }); - } - }; - - request.open('GET', url, true); - request.send(); - } - - firstNonPreReleaseVersion() { - let version; - for (let i = 0; i < this.state.muiVersions.length; i++) { - version = this.state.muiVersions[i]; - // If the version doesn't contain '-' and isn't 'HEAD' - if (!/-/.test(version) && version !== 'HEAD') { - break; - } - } - return version; - } - - handleVersionChange = (event, index, value) => { - if (value === this.firstNonPreReleaseVersion()) { - window.location = 'http://www.material-ui.com/'; - } else { - window.location = `http://www.material-ui.com/${value}`; - } - }; - - currentVersion() { - if (window.location.hostname === 'localhost') return this.state.muiVersions[0]; - if (window.location.pathname === '/') { - return this.firstNonPreReleaseVersion(); - } else { - return window.location.pathname.replace(/\//g, ''); - } - } - - handleRequestChangeLink = (event, value) => { - window.location = value; - }; - - handleClickHeader = () => { - this.context.router.push('/'); - this.props.onRequestChangeNavDrawer(false); - }; - - render() { - const { - location, - docked, - onRequestChangeNavDrawer, - onChangeList, - open, - style, - } = this.props; - - return ( - -
-
- Material-UI -
- Version: - - {this.state.muiVersions.map((version) => ( - - ))} - - - , - , - , - , - , - ]} - /> - , - , - , - ]} - /> - , - , - , - , - , - , - , - , - , - ]} - />, - , - , - , - , - , - , - , - , - , - ]} - />, - , - , - , - , - ]} - />, - , - , - , - , - , - ]} - />, - , - , - , - , - , - ]} - />, - , - , - , - , - , - , - , - , - ]} - /> - , - , - , - , - ]} - /> - - - - Resources - - - - - - ); - } -} - -export default AppNavDrawer; diff --git a/docs/src/app/components/Carbon.css b/docs/src/app/components/Carbon.css deleted file mode 100644 index 251b029478e8fb..00000000000000 --- a/docs/src/app/components/Carbon.css +++ /dev/null @@ -1,70 +0,0 @@ -#ad{margin:8px 0 0;min-height:116px}@media (min-width:600px){#ad{margin:0;min-height:0}} - -#carbonads { - padding: 8px; - position: relative; - box-sizing: content-box; - border-radius: 4px; - background-color: #fafafa -} -@media (min-width: 600px) { - #carbonads { - float: right; - margin: 16px 8px 8px; - max-width: 130px - } -} -@media (min-width: 1920px) { - #carbonads { - right: 16px; - margin: 0; - bottom: 16px; - position: fixed - } -} -#carbonads img { - vertical-align: middle -} -#carbonads a { - text-decoration: none -} -#carbonads .carbon-wrap { - display: flex -} -#carbonads .carbon-text { - color: rgba(0, 0, 0, .87); - margin: 0 0 0 8px; - display: block; - font-size: 14px; - font-weight: 400; - font-family: Roboto, Helvetica, Arial, sans-serif; - line-height: 20px -} -#carbonads .carbon-poweredby { - color: rgba(0, 0, 0, .54); - right: 4px; - bottom: 4px; - display: block; - position: absolute; - font-size: 12px; - margin-top: 4px; - font-weight: 400; - font-family: Roboto, Helvetica, Arial, sans-serif; - line-height: 1 -} -@media (min-width: 600px) { - #carbonads .carbon-poweredby { - position: static; - margin-top: 0 - } -} -@media (min-width: 600px) { - #carbonads .carbon-text { - margin: 8px 0 - } -} -@media (min-width: 600px) { - #carbonads .carbon-wrap { - display: block - } -} diff --git a/docs/src/app/components/Carbon.js b/docs/src/app/components/Carbon.js deleted file mode 100644 index 67c0821655b9ae..00000000000000 --- a/docs/src/app/components/Carbon.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -require('./Carbon.css'); - -class Carbon extends React.Component { - componentDidMount() { - if (process.env.NODE_ENV !== 'production') { - return; - } - - const script = document.createElement('script'); - script.setAttribute('async', ''); - script.src = - '//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materialuicom'; - script.id = '_carbonads_js'; - const ad = document.querySelector('#ad'); - if (ad) { - ad.appendChild(script); - } - } - - render() { - return