material-ui 0.7.3.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +31 -0
- data/Rakefile +20 -0
- data/lib/material-ui.rb +4 -0
- data/material-ui-gem.gemspec +33 -0
- data/vendor/assets/javascripts/material-ui.js +1 -0
- data/vendor/assets/javascripts/material-ui/components/app-bar.jsx +93 -0
- data/vendor/assets/javascripts/material-ui/components/app-canvas.jsx +27 -0
- data/vendor/assets/javascripts/material-ui/components/checkbox.jsx +60 -0
- data/vendor/assets/javascripts/material-ui/components/date-picker/calendar-month.jsx +59 -0
- data/vendor/assets/javascripts/material-ui/components/date-picker/calendar-toolbar.jsx +64 -0
- data/vendor/assets/javascripts/material-ui/components/date-picker/calendar.jsx +194 -0
- data/vendor/assets/javascripts/material-ui/components/date-picker/date-display.jsx +79 -0
- data/vendor/assets/javascripts/material-ui/components/date-picker/date-picker-dialog.jsx +118 -0
- data/vendor/assets/javascripts/material-ui/components/date-picker/date-picker.jsx +116 -0
- data/vendor/assets/javascripts/material-ui/components/date-picker/day-button.jsx +49 -0
- data/vendor/assets/javascripts/material-ui/components/dialog-window.jsx +183 -0
- data/vendor/assets/javascripts/material-ui/components/dialog.jsx +54 -0
- data/vendor/assets/javascripts/material-ui/components/drop-down-icon.jsx +68 -0
- data/vendor/assets/javascripts/material-ui/components/drop-down-menu.jsx +94 -0
- data/vendor/assets/javascripts/material-ui/components/enhanced-button.jsx +147 -0
- data/vendor/assets/javascripts/material-ui/components/enhanced-switch.jsx +296 -0
- data/vendor/assets/javascripts/material-ui/components/enhanced-textarea.jsx +113 -0
- data/vendor/assets/javascripts/material-ui/components/flat-button.jsx +46 -0
- data/vendor/assets/javascripts/material-ui/components/floating-action-button.jsx +123 -0
- data/vendor/assets/javascripts/material-ui/components/font-icon.jsx +23 -0
- data/vendor/assets/javascripts/material-ui/components/icon-button.jsx +123 -0
- data/vendor/assets/javascripts/material-ui/components/ink-bar.jsx +25 -0
- data/vendor/assets/javascripts/material-ui/components/input.jsx +143 -0
- data/vendor/assets/javascripts/material-ui/components/left-nav.jsx +105 -0
- data/vendor/assets/javascripts/material-ui/components/menu/link-menu-item.jsx +42 -0
- data/vendor/assets/javascripts/material-ui/components/menu/menu-item.jsx +105 -0
- data/vendor/assets/javascripts/material-ui/components/menu/menu.jsx +325 -0
- data/vendor/assets/javascripts/material-ui/components/menu/subheader-menu-item.jsx +18 -0
- data/vendor/assets/javascripts/material-ui/components/mixins/classable.js +42 -0
- data/vendor/assets/javascripts/material-ui/components/mixins/click-awayable.js +35 -0
- data/vendor/assets/javascripts/material-ui/components/mixins/window-listenable.js +23 -0
- data/vendor/assets/javascripts/material-ui/components/overlay.jsx +58 -0
- data/vendor/assets/javascripts/material-ui/components/paper.jsx +58 -0
- data/vendor/assets/javascripts/material-ui/components/radio-button-group.jsx +112 -0
- data/vendor/assets/javascripts/material-ui/components/radio-button.jsx +65 -0
- data/vendor/assets/javascripts/material-ui/components/raised-button.jsx +102 -0
- data/vendor/assets/javascripts/material-ui/components/ripples/circle.jsx +35 -0
- data/vendor/assets/javascripts/material-ui/components/ripples/focus-ripple.jsx +40 -0
- data/vendor/assets/javascripts/material-ui/components/ripples/touch-ripple.jsx +174 -0
- data/vendor/assets/javascripts/material-ui/components/slider.jsx +178 -0
- data/vendor/assets/javascripts/material-ui/components/snackbar.jsx +76 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/drop-down-arrow.jsx +16 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/navigation-chevron-left.jsx +16 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/navigation-chevron-right.jsx +17 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/navigation-menu.jsx +16 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/svg-icon.jsx +23 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/toggle-check-box-checked.jsx +16 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/toggle-check-box-outline-blank.jsx +16 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/toggle-radio-button-off.jsx +16 -0
- data/vendor/assets/javascripts/material-ui/components/svg-icons/toggle-radio-button-on.jsx +16 -0
- data/vendor/assets/javascripts/material-ui/components/table-header.jsx +50 -0
- data/vendor/assets/javascripts/material-ui/components/table-rows-item.jsx +31 -0
- data/vendor/assets/javascripts/material-ui/components/table-rows.jsx +57 -0
- data/vendor/assets/javascripts/material-ui/components/tabs/tab.jsx +38 -0
- data/vendor/assets/javascripts/material-ui/components/tabs/tabTemplate.jsx +15 -0
- data/vendor/assets/javascripts/material-ui/components/tabs/tabs.jsx +96 -0
- data/vendor/assets/javascripts/material-ui/components/text-field.jsx +215 -0
- data/vendor/assets/javascripts/material-ui/components/toggle.jsx +62 -0
- data/vendor/assets/javascripts/material-ui/components/toolbar-group.jsx +28 -0
- data/vendor/assets/javascripts/material-ui/components/toolbar.jsx +21 -0
- data/vendor/assets/javascripts/material-ui/components/tooltip.jsx +58 -0
- data/vendor/assets/javascripts/material-ui/components/transition-groups/slide-in.jsx +48 -0
- data/vendor/assets/javascripts/material-ui/components/utils/css-event.js +52 -0
- data/vendor/assets/javascripts/material-ui/components/utils/date-time.js +132 -0
- data/vendor/assets/javascripts/material-ui/components/utils/dom.js +71 -0
- data/vendor/assets/javascripts/material-ui/components/utils/events.js +34 -0
- data/vendor/assets/javascripts/material-ui/components/utils/key-code.js +10 -0
- data/vendor/assets/javascripts/material-ui/components/utils/key-line.js +13 -0
- data/vendor/assets/javascripts/material-ui/components/utils/unique-id.js +7 -0
- data/vendor/assets/stylesheets/material-ui.less +2 -0
- data/vendor/assets/stylesheets/material-ui/components.less +5 -0
- data/vendor/assets/stylesheets/material-ui/components/app-bar.less +37 -0
- data/vendor/assets/stylesheets/material-ui/components/card.less +20 -0
- data/vendor/assets/stylesheets/material-ui/components/checkbox.less +66 -0
- data/vendor/assets/stylesheets/material-ui/components/components.less +37 -0
- data/vendor/assets/stylesheets/material-ui/components/date-picker/calendar-month.less +11 -0
- data/vendor/assets/stylesheets/material-ui/components/date-picker/calendar-toolbar.less +23 -0
- data/vendor/assets/stylesheets/material-ui/components/date-picker/calendar.less +59 -0
- data/vendor/assets/stylesheets/material-ui/components/date-picker/date-display.less +84 -0
- data/vendor/assets/stylesheets/material-ui/components/date-picker/date-picker-dialog.less +18 -0
- data/vendor/assets/stylesheets/material-ui/components/date-picker/date-picker.less +9 -0
- data/vendor/assets/stylesheets/material-ui/components/date-picker/day-button.less +35 -0
- data/vendor/assets/stylesheets/material-ui/components/dialog-window.less +42 -0
- data/vendor/assets/stylesheets/material-ui/components/dialog.less +10 -0
- data/vendor/assets/stylesheets/material-ui/components/drop-down-icon.less +43 -0
- data/vendor/assets/stylesheets/material-ui/components/drop-down-menu.less +77 -0
- data/vendor/assets/stylesheets/material-ui/components/enhanced-button.less +24 -0
- data/vendor/assets/stylesheets/material-ui/components/enhanced-switch.less +52 -0
- data/vendor/assets/stylesheets/material-ui/components/enhanced-textarea.less +16 -0
- data/vendor/assets/stylesheets/material-ui/components/flat-button.less +93 -0
- data/vendor/assets/stylesheets/material-ui/components/floating-action-button.less +95 -0
- data/vendor/assets/stylesheets/material-ui/components/font-icon.less +6 -0
- data/vendor/assets/stylesheets/material-ui/components/icon-button.less +46 -0
- data/vendor/assets/stylesheets/material-ui/components/ink-bar.less +9 -0
- data/vendor/assets/stylesheets/material-ui/components/input.less +186 -0
- data/vendor/assets/stylesheets/material-ui/components/left-nav.less +31 -0
- data/vendor/assets/stylesheets/material-ui/components/menu-item.less +69 -0
- data/vendor/assets/stylesheets/material-ui/components/menu.less +50 -0
- data/vendor/assets/stylesheets/material-ui/components/overlay.less +21 -0
- data/vendor/assets/stylesheets/material-ui/components/paper.less +59 -0
- data/vendor/assets/stylesheets/material-ui/components/radio-button.less +67 -0
- data/vendor/assets/stylesheets/material-ui/components/raised-button.less +132 -0
- data/vendor/assets/stylesheets/material-ui/components/ripples/circle.less +31 -0
- data/vendor/assets/stylesheets/material-ui/components/ripples/focus-ripple.less +30 -0
- data/vendor/assets/stylesheets/material-ui/components/ripples/touch-ripple.less +9 -0
- data/vendor/assets/stylesheets/material-ui/components/slider.less +163 -0
- data/vendor/assets/stylesheets/material-ui/components/snackbar.less +44 -0
- data/vendor/assets/stylesheets/material-ui/components/subheader.less +17 -0
- data/vendor/assets/stylesheets/material-ui/components/svg-icon.less +11 -0
- data/vendor/assets/stylesheets/material-ui/components/table.less +46 -0
- data/vendor/assets/stylesheets/material-ui/components/tabs.less +41 -0
- data/vendor/assets/stylesheets/material-ui/components/text-field.less +168 -0
- data/vendor/assets/stylesheets/material-ui/components/toggle.less +83 -0
- data/vendor/assets/stylesheets/material-ui/components/toolbar.less +95 -0
- data/vendor/assets/stylesheets/material-ui/components/tooltip.less +73 -0
- data/vendor/assets/stylesheets/material-ui/components/transition-groups/slide-in.less +92 -0
- data/vendor/assets/stylesheets/material-ui/core/base.less +31 -0
- data/vendor/assets/stylesheets/material-ui/core/core.less +4 -0
- data/vendor/assets/stylesheets/material-ui/core/keylines.less +29 -0
- data/vendor/assets/stylesheets/material-ui/core/layouts.less +12 -0
- data/vendor/assets/stylesheets/material-ui/core/typography.less +158 -0
- data/vendor/assets/stylesheets/material-ui/mixins/clearfix.less +22 -0
- data/vendor/assets/stylesheets/material-ui/mixins/mixins.less +3 -0
- data/vendor/assets/stylesheets/material-ui/mixins/no-wrap.less +3 -0
- data/vendor/assets/stylesheets/material-ui/mixins/transitions.less +17 -0
- data/vendor/assets/stylesheets/material-ui/resets/normalize.css +430 -0
- data/vendor/assets/stylesheets/material-ui/resets/typography-resets.less +34 -0
- data/vendor/assets/stylesheets/material-ui/scaffolding.less +10 -0
- data/vendor/assets/stylesheets/material-ui/variables/colors.less +285 -0
- data/vendor/assets/stylesheets/material-ui/variables/custom-variables.less +163 -0
- data/vendor/assets/stylesheets/material-ui/variables/media-queries.less +4 -0
- data/vendor/assets/stylesheets/material-ui/variables/spacing.less +16 -0
- metadata +268 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 66fbd5b8301516799d48b83ee1a070d96560a95f
|
4
|
+
data.tar.gz: f8b03b3a0ec4ee04fab75f3065af7dc71dbfbfe5
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: daeadb4984ca8e7c667eb53ca77707b3f46590d4522d49166e25e67f0a65235f68df61742d6555f2cca854be7ce89f6637b11961c16b048ca86c24795449d093
|
7
|
+
data.tar.gz: 54c22cabbec39e4355b96a09e9b9f63329a6d165dd7855ddf315a4bd2d6d2804fd76c5806d92f28ba701a1c622c694c49b194b71a1058533834fb381a1e2bd9f
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2015 chadrien
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
# Material-ui gem
|
2
|
+
|
3
|
+
The goal of this gem is to include [material-ui]('http://material-ui.com') in the Rails assets pipeline
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'material-ui'
|
11
|
+
```
|
12
|
+
|
13
|
+
And then execute:
|
14
|
+
|
15
|
+
$ bundle
|
16
|
+
|
17
|
+
Or install it yourself as:
|
18
|
+
|
19
|
+
$ gem install material-ui
|
20
|
+
|
21
|
+
## Usage
|
22
|
+
|
23
|
+
Material-ui is now available in the rails assets pipeline.
|
24
|
+
|
25
|
+
## Contributing
|
26
|
+
|
27
|
+
1. Fork it ( https://github.com/[my-github-username]/material-ui-gem/fork )
|
28
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
29
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
30
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
31
|
+
5. Create a new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
2
|
+
|
3
|
+
task :prepare_build do
|
4
|
+
material_repo = 'https://github.com/callemall/material-ui.git'
|
5
|
+
|
6
|
+
%x{git clone #{material_repo}}
|
7
|
+
%x{cd material-ui && git checkout $(git describe --tags --abbrev=0)}
|
8
|
+
%x{mkdir -p vendor/assets/{javascripts/material-ui/components,stylesheets/material-ui}}
|
9
|
+
%x{cp -RPp material-ui/src/less/* vendor/lib/assets/stylesheets/material-ui}
|
10
|
+
%x{cp -RPp material-ui/src/js/* vendor/lib/assets/javascripts/material-ui/components}
|
11
|
+
end
|
12
|
+
|
13
|
+
task :cleanup_build do
|
14
|
+
%x{rm -rf material-ui}
|
15
|
+
end
|
16
|
+
|
17
|
+
Rake::Task[:build].enhance [:prepare_build]
|
18
|
+
Rake::Task[:build].enhance do
|
19
|
+
Rake::Task[:cleanup_build].invoke
|
20
|
+
end
|
data/lib/material-ui.rb
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
require 'json'
|
3
|
+
|
4
|
+
package_file = File.dirname(__FILE__) + '/material-ui/package.json'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
if File.exists?(package_file)
|
8
|
+
package = JSON.parse(File.read(package_file))
|
9
|
+
|
10
|
+
spec.version = package["version"] + ".1"
|
11
|
+
spec.summary = package["description"]
|
12
|
+
spec.description = package["description"]
|
13
|
+
spec.homepage = package["homepage"]
|
14
|
+
spec.license = package["license"]
|
15
|
+
else
|
16
|
+
spec.version = "0.0.1"
|
17
|
+
end
|
18
|
+
|
19
|
+
spec.name = "material-ui"
|
20
|
+
spec.authors = ["chadrien"]
|
21
|
+
spec.email = ["chadrien@chadrien.fr"]
|
22
|
+
|
23
|
+
spec.files = `git ls-files`.split("\n")
|
24
|
+
spec.require_paths = ["lib"]
|
25
|
+
|
26
|
+
spec.add_dependency "less-rails"
|
27
|
+
spec.add_dependency "react-source", "~> 0.13"
|
28
|
+
spec.add_dependency "railties", "~> 4.0"
|
29
|
+
|
30
|
+
spec.add_development_dependency "bundler", "~> 1.9"
|
31
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
32
|
+
spec.add_development_dependency "json"
|
33
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
//= require_tree ./material-ui/components
|
@@ -0,0 +1,93 @@
|
|
1
|
+
var React = require('react');
|
2
|
+
var Classable = require('./mixins/classable');
|
3
|
+
var IconButton = require('./icon-button');
|
4
|
+
var NavigationMenu = require('./svg-icons/navigation-menu');
|
5
|
+
var Paper = require('./paper');
|
6
|
+
|
7
|
+
var AppBar = React.createClass({
|
8
|
+
|
9
|
+
mixins: [Classable],
|
10
|
+
|
11
|
+
propTypes: {
|
12
|
+
onMenuIconButtonTouchTap: React.PropTypes.func,
|
13
|
+
showMenuIconButton: React.PropTypes.bool,
|
14
|
+
iconClassNameLeft: React.PropTypes.string,
|
15
|
+
iconElementLeft: React.PropTypes.element,
|
16
|
+
iconElementRight: React.PropTypes.element,
|
17
|
+
title : React.PropTypes.node,
|
18
|
+
zDepth: React.PropTypes.number,
|
19
|
+
},
|
20
|
+
|
21
|
+
getDefaultProps: function() {
|
22
|
+
return {
|
23
|
+
showMenuIconButton: true,
|
24
|
+
title: '',
|
25
|
+
zDepth: 1
|
26
|
+
}
|
27
|
+
},
|
28
|
+
|
29
|
+
componentDidMount: function() {
|
30
|
+
if (process.NODE_ENV !== 'production' &&
|
31
|
+
(this.props.iconElementLeft && this.props.iconClassNameLeft)) {
|
32
|
+
var warning = 'Properties iconClassNameLeft and iconElementLeft cannot be simultaneously ' +
|
33
|
+
'defined. Please use one or the other.';
|
34
|
+
console.warn(warning);
|
35
|
+
}
|
36
|
+
},
|
37
|
+
|
38
|
+
render: function() {
|
39
|
+
var {
|
40
|
+
onTouchTap,
|
41
|
+
...other
|
42
|
+
} = this.props;
|
43
|
+
|
44
|
+
var classes = this.getClasses('mui-app-bar'),
|
45
|
+
title, menuElementLeft, menuElementRight;
|
46
|
+
|
47
|
+
if (this.props.title) {
|
48
|
+
// If the title is a string, wrap in an h1 tag.
|
49
|
+
// If not, just use it as a node.
|
50
|
+
title = toString.call(this.props.title) === '[object String]' ?
|
51
|
+
<h1 className="mui-app-bar-title">{this.props.title}</h1> :
|
52
|
+
this.props.title;
|
53
|
+
}
|
54
|
+
|
55
|
+
if (this.props.showMenuIconButton) {
|
56
|
+
if (this.props.iconElementLeft) {
|
57
|
+
menuElementLeft = (
|
58
|
+
<div className="mui-app-bar-navigation-icon-button">
|
59
|
+
{this.props.iconElementLeft}
|
60
|
+
</div>
|
61
|
+
);
|
62
|
+
} else {
|
63
|
+
var child = (this.props.iconClassNameLeft) ? '' : <NavigationMenu/>;
|
64
|
+
menuElementLeft = (
|
65
|
+
<IconButton
|
66
|
+
className="mui-app-bar-navigation-icon-button"
|
67
|
+
iconClassName={this.props.iconClassNameLeft}
|
68
|
+
onTouchTap={this._onMenuIconButtonTouchTap}>
|
69
|
+
{child}
|
70
|
+
</IconButton>
|
71
|
+
);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
menuElementRight = (this.props.children) ? this.props.children :
|
76
|
+
(this.props.iconElementRight) ? this.props.iconElementRight : '';
|
77
|
+
|
78
|
+
return (
|
79
|
+
<Paper rounded={false} className={classes} zDepth={this.props.zDepth}>
|
80
|
+
{menuElementLeft}
|
81
|
+
{title}
|
82
|
+
{menuElementRight}
|
83
|
+
</Paper>
|
84
|
+
);
|
85
|
+
},
|
86
|
+
|
87
|
+
_onMenuIconButtonTouchTap: function(e) {
|
88
|
+
if (this.props.onMenuIconButtonTouchTap) this.props.onMenuIconButtonTouchTap(e);
|
89
|
+
}
|
90
|
+
|
91
|
+
});
|
92
|
+
|
93
|
+
module.exports = AppBar;
|
@@ -0,0 +1,27 @@
|
|
1
|
+
var React = require('react'),
|
2
|
+
Classable = require('./mixins/classable');
|
3
|
+
|
4
|
+
var AppCanvas = React.createClass({
|
5
|
+
|
6
|
+
mixins: [Classable],
|
7
|
+
|
8
|
+
propTypes: {
|
9
|
+
predefinedLayout: React.PropTypes.number
|
10
|
+
},
|
11
|
+
|
12
|
+
render: function() {
|
13
|
+
var classes = this.getClasses({
|
14
|
+
'mui-app-canvas': true,
|
15
|
+
'mui-predefined-layout-1': this.props.predefinedLayout === 1
|
16
|
+
});
|
17
|
+
|
18
|
+
return (
|
19
|
+
<div className={classes}>
|
20
|
+
{this.props.children}
|
21
|
+
</div>
|
22
|
+
);
|
23
|
+
}
|
24
|
+
|
25
|
+
});
|
26
|
+
|
27
|
+
module.exports = AppCanvas;
|
@@ -0,0 +1,60 @@
|
|
1
|
+
var React = require('react');
|
2
|
+
var EnhancedSwitch = require('./enhanced-switch');
|
3
|
+
var Classable = require('./mixins/classable');
|
4
|
+
var CheckboxOutline = require('./svg-icons/toggle-check-box-outline-blank');
|
5
|
+
var CheckboxChecked = require('./svg-icons/toggle-check-box-checked');
|
6
|
+
|
7
|
+
var Checkbox = React.createClass({
|
8
|
+
|
9
|
+
mixins: [Classable],
|
10
|
+
|
11
|
+
propTypes: {
|
12
|
+
onCheck: React.PropTypes.func,
|
13
|
+
},
|
14
|
+
|
15
|
+
render: function() {
|
16
|
+
var {
|
17
|
+
onCheck,
|
18
|
+
...other
|
19
|
+
} = this.props;
|
20
|
+
|
21
|
+
var classes = this.getClasses("mui-checkbox");
|
22
|
+
|
23
|
+
var checkboxElement = (
|
24
|
+
<div>
|
25
|
+
<CheckboxOutline className="mui-checkbox-box" />
|
26
|
+
<CheckboxChecked className="mui-checkbox-check" />
|
27
|
+
</div>
|
28
|
+
);
|
29
|
+
|
30
|
+
var enhancedSwitchProps = {
|
31
|
+
ref: "enhancedSwitch",
|
32
|
+
inputType: "checkbox",
|
33
|
+
switchElement: checkboxElement,
|
34
|
+
className: classes,
|
35
|
+
iconClassName: "mui-checkbox-icon",
|
36
|
+
onSwitch: this._handleCheck,
|
37
|
+
labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
|
38
|
+
};
|
39
|
+
|
40
|
+
return (
|
41
|
+
<EnhancedSwitch
|
42
|
+
{...other}
|
43
|
+
{...enhancedSwitchProps}/>
|
44
|
+
);
|
45
|
+
},
|
46
|
+
|
47
|
+
isChecked: function() {
|
48
|
+
return this.refs.enhancedSwitch.isSwitched();
|
49
|
+
},
|
50
|
+
|
51
|
+
setChecked: function(newCheckedValue) {
|
52
|
+
this.refs.enhancedSwitch.setSwitched(newCheckedValue);
|
53
|
+
},
|
54
|
+
|
55
|
+
_handleCheck: function(e, isInputChecked) {
|
56
|
+
if (this.props.onCheck) this.props.onCheck(e, isInputChecked);
|
57
|
+
}
|
58
|
+
});
|
59
|
+
|
60
|
+
module.exports = Checkbox;
|
@@ -0,0 +1,59 @@
|
|
1
|
+
var React = require('react');
|
2
|
+
var Classable = require('../mixins/classable');
|
3
|
+
var DateTime = require('../utils/date-time');
|
4
|
+
var DayButton = require('./day-button');
|
5
|
+
|
6
|
+
var CalendarMonth = React.createClass({
|
7
|
+
|
8
|
+
mixins: [Classable],
|
9
|
+
|
10
|
+
propTypes: {
|
11
|
+
displayDate: React.PropTypes.object.isRequired,
|
12
|
+
onDayTouchTap: React.PropTypes.func,
|
13
|
+
selectedDate: React.PropTypes.object.isRequired
|
14
|
+
},
|
15
|
+
|
16
|
+
render: function() {
|
17
|
+
var classes = this.getClasses('mui-date-picker-calendar-month');
|
18
|
+
|
19
|
+
return (
|
20
|
+
<div className={classes}>
|
21
|
+
{this._getWeekElements()}
|
22
|
+
</div>
|
23
|
+
);
|
24
|
+
},
|
25
|
+
|
26
|
+
_getWeekElements: function() {
|
27
|
+
var weekArray = DateTime.getWeekArray(this.props.displayDate);
|
28
|
+
|
29
|
+
return weekArray.map(function(week, i) {
|
30
|
+
return (
|
31
|
+
<div
|
32
|
+
key={i}
|
33
|
+
className="mui-date-picker-calendar-month-week">
|
34
|
+
{this._getDayElements(week)}
|
35
|
+
</div>
|
36
|
+
);
|
37
|
+
}, this);
|
38
|
+
},
|
39
|
+
|
40
|
+
_getDayElements: function(week) {
|
41
|
+
return week.map(function(day, i) {
|
42
|
+
var selected = DateTime.isEqualDate(this.props.selectedDate, day);
|
43
|
+
return (
|
44
|
+
<DayButton
|
45
|
+
key={i}
|
46
|
+
date={day}
|
47
|
+
onTouchTap={this._handleDayTouchTap}
|
48
|
+
selected={selected} />
|
49
|
+
);
|
50
|
+
}, this);
|
51
|
+
},
|
52
|
+
|
53
|
+
_handleDayTouchTap: function(e, date) {
|
54
|
+
if (this.props.onDayTouchTap) this.props.onDayTouchTap(e, date);
|
55
|
+
}
|
56
|
+
|
57
|
+
});
|
58
|
+
|
59
|
+
module.exports = CalendarMonth;
|
@@ -0,0 +1,64 @@
|
|
1
|
+
var React = require('react');
|
2
|
+
var DateTime = require('../utils/date-time');
|
3
|
+
var IconButton = require('../icon-button');
|
4
|
+
var NavigationChevronLeft = require('../svg-icons/navigation-chevron-left');
|
5
|
+
var NavigationChevronRight = require('../svg-icons/navigation-chevron-right');
|
6
|
+
var SlideInTransitionGroup = require('../transition-groups/slide-in');
|
7
|
+
|
8
|
+
var CalendarToolbar = React.createClass({
|
9
|
+
|
10
|
+
propTypes: {
|
11
|
+
displayDate: React.PropTypes.object.isRequired,
|
12
|
+
onLeftTouchTap: React.PropTypes.func,
|
13
|
+
onRightTouchTap: React.PropTypes.func
|
14
|
+
},
|
15
|
+
|
16
|
+
getInitialState: function() {
|
17
|
+
return {
|
18
|
+
transitionDirection: 'up'
|
19
|
+
};
|
20
|
+
},
|
21
|
+
|
22
|
+
componentWillReceiveProps: function(nextProps) {
|
23
|
+
var direction;
|
24
|
+
|
25
|
+
if (nextProps.displayDate !== this.props.displayDate) {
|
26
|
+
direction = nextProps.displayDate > this.props.displayDate ? 'up' : 'down';
|
27
|
+
this.setState({
|
28
|
+
transitionDirection: direction
|
29
|
+
});
|
30
|
+
}
|
31
|
+
},
|
32
|
+
|
33
|
+
render: function() {
|
34
|
+
var month = DateTime.getFullMonth(this.props.displayDate);
|
35
|
+
var year = this.props.displayDate.getFullYear();
|
36
|
+
|
37
|
+
return (
|
38
|
+
<div className="mui-date-picker-calendar-toolbar">
|
39
|
+
|
40
|
+
<SlideInTransitionGroup
|
41
|
+
className="mui-date-picker-calendar-toolbar-title"
|
42
|
+
direction={this.state.transitionDirection}>
|
43
|
+
<div key={month + '_' + year}>{month} {year}</div>
|
44
|
+
</SlideInTransitionGroup>
|
45
|
+
|
46
|
+
<IconButton
|
47
|
+
className="mui-date-picker-calendar-toolbar-button-left"
|
48
|
+
onTouchTap={this.props.onLeftTouchTap}>
|
49
|
+
<NavigationChevronLeft/>
|
50
|
+
</IconButton>
|
51
|
+
|
52
|
+
<IconButton
|
53
|
+
className="mui-date-picker-calendar-toolbar-button-right"
|
54
|
+
onTouchTap={this.props.onRightTouchTap}>
|
55
|
+
<NavigationChevronRight/>
|
56
|
+
</IconButton>
|
57
|
+
|
58
|
+
</div>
|
59
|
+
);
|
60
|
+
}
|
61
|
+
|
62
|
+
});
|
63
|
+
|
64
|
+
module.exports = CalendarToolbar;
|