DatePicker & FilePicker support

This commit is contained in:
Maxime Renou 2019-03-04 17:42:59 +01:00
parent e9fbdcfd2e
commit e2b2e38431
7 changed files with 471 additions and 5 deletions

174
dist/index.es.js vendored
View File

@ -2,6 +2,12 @@ import React, { Component } from 'react';
import require$$1 from 'prop-types'; import require$$1 from 'prop-types';
import reactDom from 'react-dom'; import reactDom from 'react-dom';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var classCallCheck = function (instance, Constructor) { var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) { if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function"); throw new TypeError("Cannot call a class as a function");
@ -3342,5 +3348,171 @@ TextArea.defaultProps = {
onChangeValue: function onChangeValue(text) {} onChangeValue: function onChangeValue(text) {}
}; };
export { CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio, Submit, TextArea, FormTranslationContext }; var DatePicker = function (_Component) {
inherits(DatePicker, _Component);
function DatePicker() {
classCallCheck(this, DatePicker);
return possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments));
}
createClass(DatePicker, [{
key: "render",
value: function render() {
var _this2 = this;
return React.createElement(
FormConsumer,
null,
function (data) {
return _this2.renderDatePicker(data);
}
);
}
}, {
key: "renderDatePicker",
value: function renderDatePicker(data) {
var _this3 = this;
var props = _extends({}, this.props);
if (props.children) delete props.children;
if (props.onChangeValue) delete props.onChangeValue;
return React.createElement(
"div",
{ className: "form-group" },
this.renderLabel(data),
React.createElement("input", _extends({ onChange: function onChange(e) {
return _this3.props.onChangeValue(e.target.value);
} }, props)),
React.createElement(
"p",
{ className: "text-muted" },
"DatePicker ",
this.props.type
),
React.createElement(FormItemError, { name: this.props.name, data: data })
);
}
}, {
key: "renderLabel",
value: function renderLabel(data) {
if (this.props.label) {
return React.createElement(
"label",
{ htmlFor: this.props.id },
this.props.label
);
}
}
}]);
return DatePicker;
}(Component);
DatePicker.defaultProps = {
name: 'input',
id: 'input',
className: 'form-control',
type: 'datetime-local',
onChangeValue: function onChangeValue(text) {}
};
var FilePicker = function (_Component) {
inherits(FilePicker, _Component);
function FilePicker() {
classCallCheck(this, FilePicker);
return possibleConstructorReturn(this, (FilePicker.__proto__ || Object.getPrototypeOf(FilePicker)).apply(this, arguments));
}
createClass(FilePicker, [{
key: "render",
value: function render() {
var _this2 = this;
return React.createElement(
FormConsumer,
null,
function (data) {
return _this2.renderFilePicker(data);
}
);
}
}, {
key: "renderFilePicker",
value: function renderFilePicker(data) {
var _this3 = this;
var value = this.props.value;
var props = _extends({}, this.props);
if (props.children) delete props.children;
if (props.onChangeValue) delete props.onChangeValue;
if (!(_typeof(props.value) instanceof File)) delete props.value;
return React.createElement(
"div",
{ className: "form-group" },
this.renderLabel(data),
React.createElement("input", _extends({
type: "file",
onChange: function onChange(e) {
return _this3.props.onChangeValue(e.target.value);
} }, props)),
this.renderValue(value),
React.createElement(FormItemError, { name: this.props.name, data: data })
);
}
}, {
key: "renderValue",
value: function renderValue(value) {
if (value instanceof File) return React.createElement(
"p",
{ className: "text-muted" },
value.name,
" ",
this.renderDeleteButton()
);
if (value !== null) return React.createElement(
"p",
{ className: "text-muted" },
value,
" ",
this.renderDeleteButton()
);
return null;
}
}, {
key: "renderDeleteButton",
value: function renderDeleteButton() {
var _this4 = this;
return React.createElement("i", { className: "fa fa-trash", onClick: function onClick() {
_this4.props.onChangeValue(null);
} });
}
}, {
key: "renderLabel",
value: function renderLabel(data) {
if (this.props.label) {
return React.createElement(
"label",
{ htmlFor: this.props.id },
this.props.label
);
}
}
}]);
return FilePicker;
}(Component);
FilePicker.defaultProps = {
name: 'file-picker',
id: 'file-picker',
className: 'form-control',
onChangeValue: function onChangeValue(file) {}
};
export { CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio, DatePicker, FilePicker, Submit, TextArea, FormTranslationContext };
//# sourceMappingURL=index.es.js.map //# sourceMappingURL=index.es.js.map

File diff suppressed because one or more lines are too long

174
dist/index.js vendored
View File

@ -9,6 +9,12 @@ var React__default = _interopDefault(React);
var require$$1 = _interopDefault(require('prop-types')); var require$$1 = _interopDefault(require('prop-types'));
var reactDom = _interopDefault(require('react-dom')); var reactDom = _interopDefault(require('react-dom'));
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
var classCallCheck = function (instance, Constructor) { var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) { if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function"); throw new TypeError("Cannot call a class as a function");
@ -3349,6 +3355,172 @@ TextArea.defaultProps = {
onChangeValue: function onChangeValue(text) {} onChangeValue: function onChangeValue(text) {}
}; };
var DatePicker = function (_Component) {
inherits(DatePicker, _Component);
function DatePicker() {
classCallCheck(this, DatePicker);
return possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments));
}
createClass(DatePicker, [{
key: "render",
value: function render() {
var _this2 = this;
return React__default.createElement(
FormConsumer,
null,
function (data) {
return _this2.renderDatePicker(data);
}
);
}
}, {
key: "renderDatePicker",
value: function renderDatePicker(data) {
var _this3 = this;
var props = _extends({}, this.props);
if (props.children) delete props.children;
if (props.onChangeValue) delete props.onChangeValue;
return React__default.createElement(
"div",
{ className: "form-group" },
this.renderLabel(data),
React__default.createElement("input", _extends({ onChange: function onChange(e) {
return _this3.props.onChangeValue(e.target.value);
} }, props)),
React__default.createElement(
"p",
{ className: "text-muted" },
"DatePicker ",
this.props.type
),
React__default.createElement(FormItemError, { name: this.props.name, data: data })
);
}
}, {
key: "renderLabel",
value: function renderLabel(data) {
if (this.props.label) {
return React__default.createElement(
"label",
{ htmlFor: this.props.id },
this.props.label
);
}
}
}]);
return DatePicker;
}(React.Component);
DatePicker.defaultProps = {
name: 'input',
id: 'input',
className: 'form-control',
type: 'datetime-local',
onChangeValue: function onChangeValue(text) {}
};
var FilePicker = function (_Component) {
inherits(FilePicker, _Component);
function FilePicker() {
classCallCheck(this, FilePicker);
return possibleConstructorReturn(this, (FilePicker.__proto__ || Object.getPrototypeOf(FilePicker)).apply(this, arguments));
}
createClass(FilePicker, [{
key: "render",
value: function render() {
var _this2 = this;
return React__default.createElement(
FormConsumer,
null,
function (data) {
return _this2.renderFilePicker(data);
}
);
}
}, {
key: "renderFilePicker",
value: function renderFilePicker(data) {
var _this3 = this;
var value = this.props.value;
var props = _extends({}, this.props);
if (props.children) delete props.children;
if (props.onChangeValue) delete props.onChangeValue;
if (!(_typeof(props.value) instanceof File)) delete props.value;
return React__default.createElement(
"div",
{ className: "form-group" },
this.renderLabel(data),
React__default.createElement("input", _extends({
type: "file",
onChange: function onChange(e) {
return _this3.props.onChangeValue(e.target.value);
} }, props)),
this.renderValue(value),
React__default.createElement(FormItemError, { name: this.props.name, data: data })
);
}
}, {
key: "renderValue",
value: function renderValue(value) {
if (value instanceof File) return React__default.createElement(
"p",
{ className: "text-muted" },
value.name,
" ",
this.renderDeleteButton()
);
if (value !== null) return React__default.createElement(
"p",
{ className: "text-muted" },
value,
" ",
this.renderDeleteButton()
);
return null;
}
}, {
key: "renderDeleteButton",
value: function renderDeleteButton() {
var _this4 = this;
return React__default.createElement("i", { className: "fa fa-trash", onClick: function onClick() {
_this4.props.onChangeValue(null);
} });
}
}, {
key: "renderLabel",
value: function renderLabel(data) {
if (this.props.label) {
return React__default.createElement(
"label",
{ htmlFor: this.props.id },
this.props.label
);
}
}
}]);
return FilePicker;
}(React.Component);
FilePicker.defaultProps = {
name: 'file-picker',
id: 'file-picker',
className: 'form-control',
onChangeValue: function onChangeValue(file) {}
};
exports.CheckBox = CheckBox; exports.CheckBox = CheckBox;
exports.Form = Form; exports.Form = Form;
exports.Input = Input; exports.Input = Input;
@ -3356,6 +3528,8 @@ exports.Option = Option;
exports.OptionGroup = OptionGroup; exports.OptionGroup = OptionGroup;
exports.RadioGroup = RadioGroup; exports.RadioGroup = RadioGroup;
exports.Radio = Radio; exports.Radio = Radio;
exports.DatePicker = DatePicker;
exports.FilePicker = FilePicker;
exports.Submit = Submit; exports.Submit = Submit;
exports.TextArea = TextArea; exports.TextArea = TextArea;
exports.FormTranslationContext = FormTranslationContext; exports.FormTranslationContext = FormTranslationContext;

2
dist/index.js.map vendored

File diff suppressed because one or more lines are too long

47
src/DatePicker.js Normal file
View File

@ -0,0 +1,47 @@
import React, {Component} from 'react';
import {FormConsumer} from "./FormContext";
import FormItemError from "./FormItemError";
export default class DatePicker extends Component
{
render()
{
return (
<FormConsumer>
{(data) => this.renderDatePicker(data)}
</FormConsumer>
)
}
renderDatePicker(data)
{
let props = {...this.props}
if (props.children) delete props.children
if (props.onChangeValue) delete props.onChangeValue
return (
<div className="form-group">
{this.renderLabel(data)}
<input onChange={(e) => this.props.onChangeValue(e.target.value)} {...props} />
<p className="text-muted">DatePicker {this.props.type}</p>
<FormItemError name={this.props.name} data={data} />
</div>
)
}
renderLabel(data)
{
if (this.props.label) {
return (
<label htmlFor={this.props.id}>{this.props.label}</label>
)
}
}
}
DatePicker.defaultProps = {
name: 'input',
id: 'input',
className: 'form-control',
type: 'datetime-local',
onChangeValue: (text) => {}
}

70
src/FilePicker.js Normal file
View File

@ -0,0 +1,70 @@
import React, {Component} from 'react';
import {FormConsumer} from "./FormContext";
import FormItemError from "./FormItemError";
export default class FilePicker extends Component
{
render()
{
return (
<FormConsumer>
{(data) => this.renderFilePicker(data)}
</FormConsumer>
)
}
renderFilePicker(data)
{
const value = this.props.value
let props = {...this.props}
if (props.children) delete props.children
if (props.onChangeValue) delete props.onChangeValue
if (!(typeof props.value instanceof File)) delete props.value
return (
<div className="form-group">
{this.renderLabel(data)}
<input
type="file"
onChange={(e) => this.props.onChangeValue(e.target.value)} {...props} />
{this.renderValue(value)}
<FormItemError name={this.props.name} data={data} />
</div>
)
}
renderValue(value)
{
if (value instanceof File)
return <p className="text-muted">{value.name} {this.renderDeleteButton()}</p>
if (value !== null)
return <p className="text-muted">{value} {this.renderDeleteButton()}</p>
return null
}
renderDeleteButton()
{
return (
<i className="fa fa-trash" onClick={() => {
this.props.onChangeValue(null)
}}/>
);
}
renderLabel(data)
{
if (this.props.label) {
return (
<label htmlFor={this.props.id}>{this.props.label}</label>
)
}
}
}
FilePicker.defaultProps = {
name: 'file-picker',
id: 'file-picker',
className: 'form-control',
onChangeValue: (file) => {}
}

View File

@ -8,7 +8,10 @@ import RadioGroup from './RadioGroup'
import Submit from './Submit' import Submit from './Submit'
import TextArea from './TextArea' import TextArea from './TextArea'
import FormTranslationContext from './FormTranslationContext' import FormTranslationContext from './FormTranslationContext'
import DatePicker from './DatePicker'
import FilePicker from './FilePicker'
export { export {
CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio, Submit, TextArea, FormTranslationContext CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio,
} DatePicker, FilePicker, Submit, TextArea, FormTranslationContext
}