Latest build
Javi Velasco
parent
f8c0c7fece
commit
0641a0d51a
|
|
@ -0,0 +1,169 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.BrowseButton = exports.browseButtonFactory = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _classnames2 = require('classnames');
|
||||
|
||||
var _classnames3 = _interopRequireDefault(_classnames2);
|
||||
|
||||
var _reactCssThemr = require('react-css-themr');
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
||||
var _FontIcon2 = _interopRequireDefault(_FontIcon);
|
||||
|
||||
var _Ripple = require('../ripple/Ripple.js');
|
||||
|
||||
var _Ripple2 = _interopRequireDefault(_Ripple);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
|
||||
var factory = function factory(ripple, FontIcon) {
|
||||
var SimpleBrowseButton = function (_Component) {
|
||||
_inherits(SimpleBrowseButton, _Component);
|
||||
|
||||
function SimpleBrowseButton() {
|
||||
var _ref;
|
||||
|
||||
var _temp, _this, _ret;
|
||||
|
||||
_classCallCheck(this, SimpleBrowseButton);
|
||||
|
||||
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
|
||||
_this.refs.label.blur();
|
||||
if (_this.props.onMouseUp) _this.props.onMouseUp(event);
|
||||
}, _this.handleMouseLeave = function (event) {
|
||||
_this.refs.label.blur();
|
||||
if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
|
||||
}, _this.handleFileChange = function (event) {
|
||||
if (_this.props.onChange) _this.props.onChange(event);
|
||||
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(SimpleBrowseButton, [{
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _classnames;
|
||||
|
||||
var _props = this.props;
|
||||
var accent = _props.accent;
|
||||
var children = _props.children;
|
||||
var className = _props.className;
|
||||
var flat = _props.flat;
|
||||
var floating = _props.floating;
|
||||
var icon = _props.icon;
|
||||
var inverse = _props.inverse;
|
||||
var label = _props.label;
|
||||
var mini = _props.mini;
|
||||
var neutral = _props.neutral;
|
||||
var primary = _props.primary;
|
||||
var theme = _props.theme;
|
||||
var raised = _props.raised;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
|
||||
|
||||
var element = 'label';
|
||||
var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
||||
var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
||||
|
||||
var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
|
||||
|
||||
var props = _extends({}, others, {
|
||||
ref: 'label',
|
||||
className: classes,
|
||||
disabled: this.props.disabled,
|
||||
onMouseUp: this.handleMouseUp,
|
||||
onMouseLeave: this.handleMouseLeave,
|
||||
'data-react-toolbox': 'label'
|
||||
});
|
||||
|
||||
return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
|
||||
'span',
|
||||
null,
|
||||
label
|
||||
), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
|
||||
}
|
||||
}]);
|
||||
|
||||
return SimpleBrowseButton;
|
||||
}(_react.Component);
|
||||
|
||||
SimpleBrowseButton.propTypes = {
|
||||
accent: _react.PropTypes.bool,
|
||||
children: _react.PropTypes.node,
|
||||
className: _react.PropTypes.string,
|
||||
disabled: _react.PropTypes.bool,
|
||||
flat: _react.PropTypes.bool,
|
||||
floating: _react.PropTypes.bool,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
inverse: _react.PropTypes.bool,
|
||||
label: _react.PropTypes.string,
|
||||
mini: _react.PropTypes.bool,
|
||||
neutral: _react.PropTypes.bool,
|
||||
onChange: _react.PropTypes.func,
|
||||
onMouseLeave: _react.PropTypes.func,
|
||||
onMouseUp: _react.PropTypes.func,
|
||||
primary: _react.PropTypes.bool,
|
||||
raised: _react.PropTypes.bool,
|
||||
theme: _react.PropTypes.shape({
|
||||
accent: _react.PropTypes.string,
|
||||
button: _react.PropTypes.string,
|
||||
flat: _react.PropTypes.string,
|
||||
floating: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.string,
|
||||
inverse: _react.PropTypes.string,
|
||||
mini: _react.PropTypes.string,
|
||||
neutral: _react.PropTypes.string,
|
||||
primary: _react.PropTypes.string,
|
||||
raised: _react.PropTypes.string,
|
||||
rippleWrapper: _react.PropTypes.string,
|
||||
toggle: _react.PropTypes.string
|
||||
}),
|
||||
type: _react.PropTypes.string
|
||||
};
|
||||
SimpleBrowseButton.defaultProps = {
|
||||
accent: false,
|
||||
className: '',
|
||||
flat: false,
|
||||
floating: false,
|
||||
mini: false,
|
||||
neutral: true,
|
||||
primary: false,
|
||||
raised: false
|
||||
};
|
||||
|
||||
|
||||
return ripple(SimpleBrowseButton);
|
||||
};
|
||||
|
||||
var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
|
||||
exports.browseButtonFactory = factory;
|
||||
exports.BrowseButton = BrowseButton;
|
||||
|
|
@ -210,3 +210,128 @@ interface IconButtonProps extends ReactToolbox.Props {
|
|||
}
|
||||
|
||||
export class IconButton extends React.Component<IconButtonProps, {}> { }
|
||||
|
||||
export interface BrowseButtonTheme {
|
||||
/**
|
||||
* Used for the root in case button is accent.
|
||||
*/
|
||||
accent?: string;
|
||||
/**
|
||||
* Used for the root element in any button.
|
||||
*/
|
||||
button?: string;
|
||||
/**
|
||||
* Used when the button is flat for the root element.
|
||||
*/
|
||||
flat?: string;
|
||||
/**
|
||||
* Used when the button is floating for the root element.
|
||||
*/
|
||||
floating?: string;
|
||||
/**
|
||||
* For the icon inside a button.
|
||||
*/
|
||||
icon?: string;
|
||||
/**
|
||||
* Used when colors are inverted.
|
||||
*/
|
||||
inverse?: string;
|
||||
/**
|
||||
* Used for mini floating buttons.
|
||||
*/
|
||||
mini?: string;
|
||||
/**
|
||||
* Used for neutral colored buttons.
|
||||
*/
|
||||
neutral?: string;
|
||||
/**
|
||||
* Used for primary buttons when button is primary.
|
||||
*/
|
||||
primary?: string;
|
||||
/**
|
||||
* Used when the button is raised for root element.
|
||||
*/
|
||||
raised?: string;
|
||||
/**
|
||||
* Used for the ripple element.
|
||||
*/
|
||||
rippleWrapper?: string;
|
||||
/**
|
||||
* Used for toggle buttons in the root element.
|
||||
*/
|
||||
toggle?: string;
|
||||
}
|
||||
|
||||
interface BrowseButtonProps extends ReactToolbox.Props {
|
||||
/**
|
||||
* Indicates if the button should have accent color.
|
||||
* @default false
|
||||
*/
|
||||
accent?: boolean;
|
||||
/**
|
||||
* Children to pass through the component.
|
||||
*/
|
||||
children?: React.ReactNode;
|
||||
/**
|
||||
* If true, component will be disabled.
|
||||
* @default false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* If true, the button will have a flat look.
|
||||
* @default false
|
||||
*/
|
||||
flat?: boolean;
|
||||
/**
|
||||
* If true, the button will have a floating look.
|
||||
* @default false
|
||||
*/
|
||||
floating?: boolean;
|
||||
/**
|
||||
* Creates a link for the button.
|
||||
*/
|
||||
href?: string;
|
||||
/**
|
||||
* Value of the icon (See Font Icon Component).
|
||||
*/
|
||||
icon?: React.ReactNode | string;
|
||||
/**
|
||||
* If true, the neutral colors are inverted. Useful to put a button over a dark background.
|
||||
*/
|
||||
inverse?: boolean;
|
||||
/**
|
||||
* The text string to use for the name of the button.
|
||||
*/
|
||||
label?: string;
|
||||
/**
|
||||
* To be used with floating button. If true, the button will be smaller.
|
||||
* @default false
|
||||
*/
|
||||
mini?: boolean;
|
||||
/**
|
||||
* Set it to false if you don't want the neutral styles to be included.
|
||||
* @default true
|
||||
*/
|
||||
neutral?: boolean;
|
||||
/**
|
||||
* Indicates if the button should have primary color.
|
||||
* @default false
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* If true, the button will have a raised look.
|
||||
* @default false
|
||||
*/
|
||||
raised?: boolean;
|
||||
/**
|
||||
* If true, component will have a ripple effect on click.
|
||||
* @default true
|
||||
*/
|
||||
ripple?: boolean;
|
||||
/**
|
||||
* Classnames object defining the component style.
|
||||
*/
|
||||
theme?: BrowseButtonTheme;
|
||||
}
|
||||
|
||||
export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.IconButton = exports.Button = undefined;
|
||||
exports.BrowseButton = exports.IconButton = exports.Button = undefined;
|
||||
|
||||
var _identifiers = require('../identifiers.js');
|
||||
|
||||
|
|
@ -11,6 +11,8 @@ var _reactCssThemr = require('react-css-themr');
|
|||
|
||||
var _Button = require('./Button.js');
|
||||
|
||||
var _BrowseButton = require('./BrowseButton.js');
|
||||
|
||||
var _IconButton = require('./IconButton.js');
|
||||
|
||||
var _FontIcon = require('../font_icon/FontIcon.js');
|
||||
|
|
@ -29,9 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|||
|
||||
var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
|
||||
var BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
|
||||
var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
|
||||
var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
|
||||
var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
|
||||
|
||||
exports.default = ThemedButton;
|
||||
exports.Button = ThemedButton;
|
||||
exports.IconButton = ThemedIconButton;
|
||||
exports.IconButton = ThemedIconButton;
|
||||
exports.BrowseButton = ThemedBrowseButton;
|
||||
|
|
@ -6,6 +6,17 @@
|
|||
|
||||
.button {
|
||||
position: relative;
|
||||
|
||||
> input {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
background-size: cover;
|
||||
&.wide, &.square {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
.content {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
|
@ -36,10 +35,15 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
&.wide {
|
||||
&::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.wide::after {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
&.square {
|
||||
&.square::after {
|
||||
padding-top: 100%;
|
||||
}
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -115,18 +115,20 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
var _props = this.props;
|
||||
var active = _props.active;
|
||||
var autoOk = _props.autoOk;
|
||||
var cancelLabel = _props.cancelLabel;
|
||||
var inputClassName = _props.inputClassName;
|
||||
var inputFormat = _props.inputFormat;
|
||||
var locale = _props.locale;
|
||||
var maxDate = _props.maxDate;
|
||||
var minDate = _props.minDate;
|
||||
var okLabel = _props.okLabel;
|
||||
var onEscKeyDown = _props.onEscKeyDown;
|
||||
var onOverlayClick = _props.onOverlayClick;
|
||||
var readonly = _props.readonly;
|
||||
var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
|
||||
var value = _props.value;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
|
||||
var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
|
||||
|
||||
var finalInputFormat = inputFormat || _time2.default.formatDate;
|
||||
var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
|
||||
|
|
@ -152,11 +154,13 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
_react2.default.createElement(DatePickerDialog, {
|
||||
active: this.state.active,
|
||||
autoOk: autoOk,
|
||||
cancelLabel: cancelLabel,
|
||||
className: this.props.className,
|
||||
locale: locale,
|
||||
maxDate: maxDate,
|
||||
minDate: minDate,
|
||||
name: this.props.name,
|
||||
okLabel: okLabel,
|
||||
onDismiss: this.handleDismiss,
|
||||
onEscKeyDown: onEscKeyDown || this.handleDismiss,
|
||||
onOverlayClick: onOverlayClick || this.handleDismiss,
|
||||
|
|
@ -175,6 +179,7 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
DatePicker.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
autoOk: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
error: _react.PropTypes.string,
|
||||
icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
|
||||
|
|
@ -185,6 +190,7 @@ var factory = function factory(Input, DatePickerDialog) {
|
|||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ var factory = function factory(Dialog, Calendar) {
|
|||
if (Object.prototype.toString.call(date) === '[object Date]') {
|
||||
_this.handleNewDate(date, false);
|
||||
}
|
||||
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(CalendarDialog, [{
|
||||
|
|
@ -142,11 +142,13 @@ var factory = function factory(Dialog, Calendar) {
|
|||
CalendarDialog.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
autoOk: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
|
||||
maxDate: _react.PropTypes.object,
|
||||
minDate: _react.PropTypes.object,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onDismiss: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
|
|
@ -166,7 +168,9 @@ var factory = function factory(Dialog, Calendar) {
|
|||
};
|
||||
CalendarDialog.defaultProps = {
|
||||
active: false,
|
||||
cancelLabel: 'Cancel',
|
||||
className: '',
|
||||
okLabel: 'Ok',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ var factory = function factory(Input) {
|
|||
|
||||
var theme = this.props.theme;
|
||||
|
||||
var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _classnames));
|
||||
var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
|
|
@ -170,7 +170,12 @@ var factory = function factory(Input) {
|
|||
this.props.label ? _react2.default.createElement(
|
||||
'label',
|
||||
{ className: theme.label },
|
||||
this.props.label
|
||||
this.props.label,
|
||||
this.props.required ? _react2.default.createElement(
|
||||
'span',
|
||||
{ className: theme.required },
|
||||
' * '
|
||||
) : null
|
||||
) : null,
|
||||
this.props.error ? _react2.default.createElement(
|
||||
'span',
|
||||
|
|
@ -190,12 +195,13 @@ var factory = function factory(Input) {
|
|||
var source = _props.source;
|
||||
var allowBlank = _props.allowBlank;
|
||||
var auto = _props.auto;
|
||||
var required = _props.required;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto']); //eslint-disable-line no-unused-vars
|
||||
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
|
||||
|
||||
|
||||
var selected = this.getSelectedItem();
|
||||
var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
|
||||
var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
|
||||
|
||||
return _react2.default.createElement(
|
||||
'div',
|
||||
|
|
@ -203,6 +209,7 @@ var factory = function factory(Input) {
|
|||
_react2.default.createElement(Input, _extends({}, others, {
|
||||
className: theme.value,
|
||||
onClick: this.handleClick,
|
||||
required: this.props.required,
|
||||
readOnly: true,
|
||||
type: template && selected ? 'hidden' : null,
|
||||
value: selected && selected.label ? selected.label : ''
|
||||
|
|
@ -232,6 +239,7 @@ var factory = function factory(Input) {
|
|||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onFocus: _react.PropTypes.func,
|
||||
required: _react.PropTypes.bool,
|
||||
source: _react.PropTypes.array.isRequired,
|
||||
template: _react.PropTypes.func,
|
||||
theme: _react.PropTypes.shape({
|
||||
|
|
@ -242,6 +250,7 @@ var factory = function factory(Input) {
|
|||
errored: _react.PropTypes.string,
|
||||
field: _react.PropTypes.string,
|
||||
label: _react.PropTypes.string,
|
||||
required: _react.PropTypes.bool,
|
||||
selected: _react.PropTypes.string,
|
||||
templateValue: _react.PropTypes.string,
|
||||
up: _react.PropTypes.string,
|
||||
|
|
@ -254,7 +263,8 @@ var factory = function factory(Input) {
|
|||
auto: true,
|
||||
className: '',
|
||||
allowBlank: true,
|
||||
disabled: false
|
||||
disabled: false,
|
||||
required: false
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,9 @@
|
|||
> .templateValue {
|
||||
border-bottom: 1px solid $input-text-error-color;
|
||||
}
|
||||
> .label > .required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
|
@ -96,6 +99,9 @@
|
|||
font-size: $input-label-font-size;
|
||||
line-height: $input-field-font-size;
|
||||
color: $input-text-label-color;
|
||||
.required {
|
||||
color: $input-text-required-color;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
|
|||
|
|
@ -106,14 +106,16 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
value: function render() {
|
||||
var _props = this.props;
|
||||
var active = _props.active;
|
||||
var cancelLabel = _props.cancelLabel;
|
||||
var format = _props.format;
|
||||
var inputClassName = _props.inputClassName;
|
||||
var okLabel = _props.okLabel;
|
||||
var onEscKeyDown = _props.onEscKeyDown;
|
||||
var onOverlayClick = _props.onOverlayClick;
|
||||
var readonly = _props.readonly;
|
||||
var value = _props.value;
|
||||
|
||||
var others = _objectWithoutProperties(_props, ['active', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
|
||||
var others = _objectWithoutProperties(_props, ['active', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
|
||||
|
||||
var formattedTime = value ? _time2.default.formatTime(value, format) : '';
|
||||
return _react2.default.createElement(
|
||||
|
|
@ -133,9 +135,11 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
})),
|
||||
_react2.default.createElement(TimePickerDialog, {
|
||||
active: this.state.active,
|
||||
cancelLabel: cancelLabel,
|
||||
className: this.props.className,
|
||||
format: format,
|
||||
name: this.props.name,
|
||||
okLabel: okLabel,
|
||||
onDismiss: this.handleDismiss,
|
||||
onEscKeyDown: onEscKeyDown,
|
||||
onOverlayClick: onOverlayClick,
|
||||
|
|
@ -152,12 +156,14 @@ var factory = function factory(TimePickerDialog, Input) {
|
|||
|
||||
TimePicker.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
error: _react.PropTypes.string,
|
||||
format: _react.PropTypes.oneOf(['24hr', 'ampm']),
|
||||
inputClassName: _react.PropTypes.string,
|
||||
label: _react.PropTypes.string,
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onChange: _react.PropTypes.func,
|
||||
onClick: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ var factory = function factory(Dialog) {
|
|||
if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
|
||||
}, _this.switchDisplay = function (event) {
|
||||
_this.setState({ display: event.target.id });
|
||||
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
|
||||
}
|
||||
|
||||
_createClass(TimePickerDialog, [{
|
||||
|
|
@ -154,9 +154,11 @@ var factory = function factory(Dialog) {
|
|||
|
||||
TimePickerDialog.propTypes = {
|
||||
active: _react.PropTypes.bool,
|
||||
cancelLabel: _react.PropTypes.string,
|
||||
className: _react.PropTypes.string,
|
||||
format: _react.PropTypes.oneOf(['24hr', 'ampm']),
|
||||
name: _react.PropTypes.string,
|
||||
okLabel: _react.PropTypes.string,
|
||||
onDismiss: _react.PropTypes.func,
|
||||
onEscKeyDown: _react.PropTypes.func,
|
||||
onOverlayClick: _react.PropTypes.func,
|
||||
|
|
@ -180,7 +182,9 @@ var factory = function factory(Dialog) {
|
|||
};
|
||||
TimePickerDialog.defaultProps = {
|
||||
active: false,
|
||||
cancelLabel: 'Cancel',
|
||||
format: '24hr',
|
||||
okLabel: 'Ok',
|
||||
value: new Date()
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -117,11 +117,18 @@ var dateLocales = {
|
|||
weekdaysLetter: []
|
||||
},
|
||||
ru: {
|
||||
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
|
||||
months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
|
||||
monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
|
||||
weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
|
||||
weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
|
||||
weekdaysLetter: []
|
||||
},
|
||||
ua: {
|
||||
months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
|
||||
monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
|
||||
weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
|
||||
weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
|
||||
weekdaysLetter: []
|
||||
}
|
||||
};
|
||||
var time = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue