semantic-ui-react-router
Version:
Semantic UI React components for React Router and several other extension
170 lines (169 loc) • 6.6 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var moment = require("moment");
var semantic_ui_react_1 = require("semantic-ui-react");
var react_datepicker_1 = require("react-datepicker");
var omit = require("object.omit");
var FormControl = (function (_super) {
__extends(FormControl, _super);
function FormControl(props) {
var _this = _super.call(this) || this;
_this.val = props.model.value;
_this.update = _this.update.bind(_this);
return _this;
}
FormControl.prototype.update = function (e) {
var valueModel = this.props.model;
if (e.target) {
valueModel.value = e.target['value'];
}
else {
valueModel.value = e;
}
};
FormControl.prototype.shouldComponentUpdate = function (nextProps) {
var updates = this.val !== nextProps.model.value;
this.val = nextProps.model.value;
return updates;
};
Object.defineProperty(FormControl.prototype, "value", {
get: function () {
return this.props.model.value;
},
enumerable: true,
configurable: true
});
return FormControl;
}(React.PureComponent));
exports.FormControl = FormControl;
var Input = (function (_super) {
__extends(Input, _super);
function Input() {
return _super !== null && _super.apply(this, arguments) || this;
}
Input.prototype.render = function () {
console.log('Rendering: ' + this.props.model.value);
return (React.createElement(semantic_ui_react_1.Form.Input, __assign({ onChange: this.update, value: this.value, placeholder: this.props.placeholder || this.props.label }, omit(this.props, 'model'))));
};
return Input;
}(FormControl));
exports.Input = Input;
Input.displayName = 'ReduxInput';
var id_helper = 0;
function randomID() {
return (Date.now() + id_helper++).toString();
}
var DateControl = (function (_super) {
__extends(DateControl, _super);
function DateControl() {
return _super !== null && _super.apply(this, arguments) || this;
}
DateControl.prototype.focus = function () { };
DateControl.prototype.clear = function (e) {
if (e.keyCode === 8 || e.keyCode === 46) {
this.props.clear();
}
};
DateControl.prototype.render = function () {
return (React.createElement(semantic_ui_react_1.Input, __assign({}, omit(this.props, 'clear'), { icon: "calendar", readOnly: true, onKeyDown: this.clear.bind(this) })));
};
return DateControl;
}(React.Component));
var DatePicker = (function (_super) {
__extends(DatePicker, _super);
function DatePicker() {
return _super !== null && _super.apply(this, arguments) || this;
}
DatePicker.prototype.prohibit = function () {
return false;
};
DatePicker.prototype.clear = function () {
this.props.model.value = null;
};
DatePicker.prototype.render = function () {
return (React.createElement("div", { className: "three wide field" },
this.props.label && React.createElement("label", null, this.props.label),
React.createElement(react_datepicker_1.default, __assign({ customInput: React.createElement(DateControl, { clear: this.clear.bind(this) }), onChange: this.update, dateFormat: this.props.format, placeholderText: this.props.placeholder, selected: this.value ? moment(this.value) : null }, omit(this.props, 'model')))));
};
return DatePicker;
}(FormControl));
DatePicker.defaultProps = {
format: 'DD MMM YYYY'
};
exports.DatePicker = DatePicker;
;
DatePicker.displayName = 'DatePicker';
exports.Label = function (props) { return (React.createElement(semantic_ui_react_1.Form.Field, __assign({}, props),
React.createElement("label", null, props.label))); };
exports.Label.displayName = 'ReduxLabel';
var Select = (function (_super) {
__extends(Select, _super);
function Select() {
return _super !== null && _super.apply(this, arguments) || this;
}
Select.prototype.render = function () {
return (React.createElement(semantic_ui_react_1.Form.Select, __assign({ onChange: this.update, value: this.value }, omit(this.props, 'model'))));
};
return Select;
}(FormControl));
exports.Select = Select;
;
Select.displayName = 'FormSelect';
var Radio = (function (_super) {
__extends(Radio, _super);
function Radio() {
return _super !== null && _super.apply(this, arguments) || this;
}
Radio.prototype.render = function () {
return (React.createElement(semantic_ui_react_1.Form.Radio, __assign({ onChange: this.update, value: this.value }, omit(this.props, 'model'))));
};
return Radio;
}(FormControl));
exports.Radio = Radio;
;
Radio.displayName = 'ReduxRadio';
var Checkbox = (function (_super) {
__extends(Checkbox, _super);
function Checkbox() {
return _super !== null && _super.apply(this, arguments) || this;
}
Checkbox.prototype.render = function () {
return (React.createElement(semantic_ui_react_1.Form.Checkbox, __assign({ onChange: this.update, value: this.value }, omit(this.props, 'model'))));
};
return Checkbox;
}(FormControl));
exports.Checkbox = Checkbox;
;
Checkbox.displayName = 'FormCheckbox';
var TextArea = (function (_super) {
__extends(TextArea, _super);
function TextArea() {
return _super !== null && _super.apply(this, arguments) || this;
}
TextArea.prototype.render = function () {
return (React.createElement(semantic_ui_react_1.Form.TextArea, __assign({ onChange: this.update, value: this.value }, omit(this.props, 'model'))));
};
return TextArea;
}(FormControl));
exports.TextArea = TextArea;
;
TextArea.displayName = 'FormTextArea';