Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-formalize

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-formalize - npm Package Compare versions

Comparing version 0.3.0-alpha4 to 0.3.0

145

lib/components/Form.js

@@ -7,4 +7,2 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -14,6 +12,2 @@

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -45,38 +39,42 @@

var Form = (function (_React$Component) {
_inherits(Form, _React$Component);
exports['default'] = _react.createClass({
_createClass(Form, null, [{
key: 'propTypes',
value: {
children: _react.PropTypes.oneOfType([_react.PropTypes.node, _react.PropTypes.func]),
values: _react.PropTypes.object,
messages: _react.PropTypes.object,
onSubmit: _react.PropTypes.func,
onChange: _react.PropTypes.func,
disabled: _react.PropTypes.bool
},
enumerable: true
}, {
key: 'defaultProps',
value: {
displayName: 'Form',
propTypes: {
children: _react.PropTypes.oneOfType([_react.PropTypes.node, _react.PropTypes.func]),
values: _react.PropTypes.object,
messages: _react.PropTypes.object,
onSubmit: _react.PropTypes.func,
onChange: _react.PropTypes.func,
disabled: _react.PropTypes.bool
},
childContextTypes: {
form: _utilsFormShape2['default']
},
getDefaultProps: function getDefaultProps() {
return {
values: {},
messages: {},
disabled: false
},
enumerable: true
}, {
key: 'childContextTypes',
value: {
form: _utilsFormShape2['default']
},
enumerable: true
}]);
};
},
function Form(props, context) {
_classCallCheck(this, Form);
getChildContext: function getChildContext() {
return {
form: {
register: this.register,
subscribe: this.subscribe,
getValue: this.getValue,
setValue: this.setValue,
getMessage: this.getMessage,
getFormProps: this.getFormProps
}
};
},
_React$Component.call(this, props, context);
// set initial state
var values = props.values;
componentWillMount: function componentWillMount() {
var values = this.props.values;

@@ -86,31 +84,18 @@ this.values = _extends({}, values);

this.listeners = [];
}
},
Form.prototype.getChildContext = function getChildContext() {
return {
form: {
register: this.register.bind(this),
subscribe: this.subscribe.bind(this),
getValue: this.getValue.bind(this),
setValue: this.setValue.bind(this),
getMessage: this.getMessage.bind(this),
getFormProps: this.getFormProps.bind(this)
}
};
};
Form.prototype.componentDidMount = function componentDidMount() {
componentDidMount: function componentDidMount() {
// Now all inputs are registered
this.collectValues();
};
},
Form.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
this.collectValues(nextProps);
};
},
Form.prototype.componentDidUpdate = function componentDidUpdate() {
componentDidUpdate: function componentDidUpdate() {
this.collectValues();
};
},
Form.prototype.handleSubmit = function handleSubmit(event) {
handleSubmit: function handleSubmit(event) {
var onSubmit = this.props.onSubmit;

@@ -122,5 +107,5 @@

}
};
},
Form.prototype.collectValues = function collectValues() {
collectValues: function collectValues() {
var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];

@@ -144,5 +129,5 @@ var inputs = this.inputs;

this.notify();
};
},
Form.prototype.register = function register(name, initialValue) {
register: function register(name, initialValue) {
var _this = this;

@@ -162,5 +147,5 @@

};
};
},
Form.prototype.subscribe = function subscribe(listener) {
subscribe: function subscribe(listener) {
var _this2 = this;

@@ -173,10 +158,10 @@

};
};
},
Form.prototype.getValue = function getValue(key) {
getValue: function getValue(key) {
var values = this.values;
return _objectPath.get(values, key) || values[key];
};
},
Form.prototype.setValue = function setValue(key, value) {
setValue: function setValue(key, value) {
var mutation = _utilsMakePath2['default'](key + '.$set', value);

@@ -191,11 +176,11 @@ var values = _reactAddonsUpdate2['default'](this.values, mutation);

this.notify();
};
},
Form.prototype.getMessage = function getMessage(key) {
getMessage: function getMessage(key) {
var messages = this.props.messages;
return _objectPath.get(messages, key) || messages[key];
};
},
Form.prototype.getFormProps = function getFormProps() {
getFormProps: function getFormProps() {
var _props = this.props;

@@ -207,11 +192,11 @@ var children = _props.children;

return props;
};
},
Form.prototype.notify = function notify() {
notify: function notify() {
this.listeners.forEach(function (listener) {
return listener();
});
};
},
Form.prototype.render = function render() {
render: function render() {
var values = this.values;

@@ -229,11 +214,7 @@ var _props2 = this.props;

_extends({}, props, {
onSubmit: this.handleSubmit.bind(this) }),
onSubmit: this.handleSubmit }),
typeof children === 'function' ? children(messages, values) : children
);
};
return Form;
})(_react2['default'].Component);
exports['default'] = Form;
}
});
module.exports = exports['default'];

127

lib/components/Input.js

@@ -7,4 +7,2 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -14,6 +12,2 @@

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -38,51 +32,50 @@

var Input = (function (_React$Component) {
_inherits(Input, _React$Component);
exports['default'] = _react.createClass({
_createClass(Input, null, [{
key: 'propTypes',
value: {
name: _react.PropTypes.string.isRequired,
value: _react.PropTypes.oneOfType([_react2['default'].PropTypes.array, _react2['default'].PropTypes.bool, _react2['default'].PropTypes.number, _react2['default'].PropTypes.object, _react2['default'].PropTypes.string]),
serialize: _react.PropTypes.func,
children: _react.PropTypes.func
},
enumerable: true
}, {
key: 'defaultProps',
value: {
displayName: 'Input',
propTypes: {
name: _react.PropTypes.string.isRequired,
value: _react.PropTypes.oneOfType([_react2['default'].PropTypes.array, _react2['default'].PropTypes.bool, _react2['default'].PropTypes.number, _react2['default'].PropTypes.object, _react2['default'].PropTypes.string]),
serialize: _react.PropTypes.func,
children: _react.PropTypes.func
},
contextTypes: {
form: _utilsFormShape2['default']
},
getDefaultProps: function getDefaultProps() {
return {
value: null,
serialize: defaultSerialize
},
enumerable: true
}, {
key: 'contextTypes',
value: {
form: _utilsFormShape2['default']
},
enumerable: true
}]);
};
},
function Input(props, context) {
_classCallCheck(this, Input);
getInitialState: function getInitialState() {
var form = this.context.form;
var getValue = form.getValue;
var _props = this.props;
var name = _props.name;
var value = _props.value;
_React$Component.call(this, props, context);
var form = context.form;
return {
value: getValue(name) || value,
disabled: false
};
},
componentWillMount: function componentWillMount() {
var form = this.context.form;
var register = form.register;
var subscribe = form.subscribe;
var getValue = form.getValue;
var name = props.name;
var value = props.value;
var _props2 = this.props;
var name = _props2.name;
var value = _props2.value;
this.handleFormDataChange = this.handleFormDataChange.bind(this);
this.unregister = register(name, value);
this.unsubscribe = subscribe(this.handleFormDataChange);
},
this.state = {
value: getValue(name) || value,
disabled: false
};
}
Input.prototype.componentWillUpdate = function componentWillUpdate(nextProps) {
componentWillUpdate: function componentWillUpdate(nextProps) {
if (_utilsShallowEqual2['default'](this.props, nextProps)) return;

@@ -96,17 +89,17 @@ var form = this.context.form;

this.unregister = register(name, value);
};
},
Input.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
return !_utilsShallowEqual2['default'](this.props, nextProps) || !_utilsShallowEqual2['default'](this.state, nextState);
};
},
Input.prototype.componentWillUnmount = function componentWillUnmount() {
componentWillUnmount: function componentWillUnmount() {
this.unregister();
this.unsubscribe();
};
},
Input.prototype.handleChange = function handleChange() {
var _props = this.props;
var name = _props.name;
var serialize = _props.serialize;
handleChange: function handleChange() {
var _props3 = this.props;
var name = _props3.name;
var serialize = _props3.serialize;
var form = this.context.form;

@@ -117,5 +110,5 @@ var setValue = form.setValue;

setValue(name, value);
};
},
Input.prototype.handleFormDataChange = function handleFormDataChange() {
handleFormDataChange: function handleFormDataChange() {
var name = this.props.name;

@@ -132,9 +125,9 @@ var form = this.context.form;

this.setState({ value: value, disabled: disabled });
};
},
Input.prototype.render = function render() {
var _props2 = this.props;
var children = _props2.children;
render: function render() {
var _props4 = this.props;
var children = _props4.children;
var props = _objectWithoutProperties(_props2, ['children']);
var props = _objectWithoutProperties(_props4, ['children']);

@@ -145,10 +138,8 @@ var _state = this.state;

var onChange = this.handleChange.bind(this);
return children(_extends({}, props, { value: value, disabled: disabled, onChange: onChange }));
};
return Input;
})(_react2['default'].Component);
exports['default'] = Input;
var onChange = this.handleChange;
var onCut = this.handleChange;
var onPaste = this.handleChange;
return children(_extends({}, props, { value: value, disabled: disabled, onChange: onChange, onCut: onCut, onPaste: onPaste }));
}
});
module.exports = exports['default'];

46

lib/components/inputs/Checkbox.js

@@ -7,4 +7,2 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -14,6 +12,2 @@

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -27,22 +21,12 @@

var Checkbox = (function (_Component) {
_inherits(Checkbox, _Component);
exports['default'] = _react.createClass({
_createClass(Checkbox, null, [{
key: 'propTypes',
value: {
name: _react.PropTypes.string.isRequired,
checked: _react.PropTypes.bool
},
enumerable: true
}]);
displayName: 'Checkbox',
function Checkbox(props, context) {
_classCallCheck(this, Checkbox);
propTypes: {
name: _react.PropTypes.string.isRequired,
checked: _react.PropTypes.bool
},
_Component.call(this, props, context);
this.renderInput = this.renderInput.bind(this);
}
Checkbox.prototype.serialize = function serialize(event) {
serialize: function serialize(event) {
var target = event.target;

@@ -52,5 +36,5 @@ var checked = target.checked;

return checked;
};
},
Checkbox.prototype.renderInput = function renderInput(props) {
renderInput: function renderInput(props) {
var value = props.value;

@@ -67,5 +51,5 @@ var disabled = props.disabled;

}, restProps));
};
},
Checkbox.prototype.render = function render() {
render: function render() {
var _props = this.props;

@@ -81,8 +65,4 @@ var checked = _props.checked;

);
};
return Checkbox;
})(_react.Component);
exports['default'] = Checkbox;
}
});
module.exports = exports['default'];

69

lib/components/inputs/RadioGroup.js

@@ -7,4 +7,2 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -14,6 +12,2 @@

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -28,12 +22,7 @@

function radio(name, selectedValue, disabled, onChange) {
return (function (_Component) {
_inherits(Radio, _Component);
return _react.createClass({
function Radio() {
_classCallCheck(this, Radio);
displayName: 'Radio',
_Component.apply(this, arguments);
}
Radio.prototype.render = function render() {
render: function render() {
return _react2['default'].createElement('input', _extends({}, this.props, {

@@ -45,33 +34,21 @@ type: "radio",

onChange: onChange.bind(null, this.props.value) }));
};
return Radio;
})(_react.Component);
}
});
}
var RadioGroup = (function (_Component2) {
_inherits(RadioGroup, _Component2);
exports['default'] = _react.createClass({
_createClass(RadioGroup, null, [{
key: 'propTypes',
value: {
name: _react.PropTypes.string.isRequired,
children: _react.PropTypes.func,
options: _react.PropTypes.object
},
enumerable: true
}]);
displayName: 'RadioGroup',
function RadioGroup(props, context) {
_classCallCheck(this, RadioGroup);
propTypes: {
name: _react.PropTypes.string.isRequired,
children: _react.PropTypes.func,
options: _react.PropTypes.object
},
_Component2.call(this, props, context);
this.renderInput = this.renderInput.bind(this);
}
RadioGroup.prototype.serialize = function serialize(value) {
serialize: function serialize(value) {
return value;
};
},
RadioGroup.prototype.renderOptions = function renderOptions(Radio, options) {
renderOptions: function renderOptions(Radio, options) {
var children = [];

@@ -90,5 +67,5 @@ for (var value in options) {

return children;
};
},
RadioGroup.prototype.renderInput = function renderInput(props) {
renderInput: function renderInput(props) {
var _props = this.props;

@@ -109,5 +86,5 @@ var children = _props.children;

return renderedChildren;
};
},
RadioGroup.prototype.render = function render() {
render: function render() {
var _props2 = this.props;

@@ -124,8 +101,4 @@ var children = _props2.children;

);
};
return RadioGroup;
})(_react.Component);
exports['default'] = RadioGroup;
}
});
module.exports = exports['default'];

54

lib/components/inputs/Select.js

@@ -7,4 +7,2 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -14,6 +12,2 @@

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -27,24 +21,14 @@

var Select = (function (_Component) {
_inherits(Select, _Component);
exports['default'] = _react.createClass({
_createClass(Select, null, [{
key: 'propTypes',
value: {
name: _react.PropTypes.string.isRequired,
options: _react.PropTypes.object,
children: _react.PropTypes.node,
placeholder: _react.PropTypes.string
},
enumerable: true
}]);
displayName: 'Select',
function Select(props, context) {
_classCallCheck(this, Select);
propTypes: {
name: _react.PropTypes.string.isRequired,
options: _react.PropTypes.object,
children: _react.PropTypes.node,
placeholder: _react.PropTypes.string
},
_Component.call(this, props, context);
this.renderInput = this.renderInput.bind(this);
}
Select.prototype.serialize = function serialize(event) {
serialize: function serialize(event) {
var target = event.target;

@@ -66,5 +50,5 @@ var value = target.value;

return value;
};
},
Select.prototype.renderOptions = function renderOptions(options, multiple, placeholder) {
renderOptions: function renderOptions(options, multiple, placeholder) {
var children = [];

@@ -95,5 +79,5 @@

return children;
};
},
Select.prototype.renderInput = function renderInput(props) {
renderInput: function renderInput(props) {
var _props = this.props;

@@ -120,5 +104,5 @@ var options = _props.options;

);
};
},
Select.prototype.render = function render() {
render: function render() {
var _props2 = this.props;

@@ -142,8 +126,4 @@ var children = _props2.children;

);
};
return Select;
})(_react.Component);
exports['default'] = Select;
}
});
module.exports = exports['default'];

52

lib/components/inputs/Text.js

@@ -5,10 +5,4 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -22,32 +16,22 @@

var Text = (function (_Component) {
_inherits(Text, _Component);
exports['default'] = _react.createClass({
_createClass(Text, null, [{
key: 'propTypes',
value: {
name: _react.PropTypes.string.isRequired,
type: _react.PropTypes.oneOf(['date', 'datetime', 'datetime-local', 'email', 'month', 'number', 'password', 'tel', 'text', 'time', 'search', 'url', 'week'])
},
enumerable: true
}, {
key: 'defaultProps',
value: {
type: 'text'
},
enumerable: true
}]);
displayName: 'Text',
function Text(props, context) {
_classCallCheck(this, Text);
propTypes: {
name: _react.PropTypes.string.isRequired,
type: _react.PropTypes.oneOf(['date', 'datetime', 'datetime-local', 'email', 'month', 'number', 'password', 'tel', 'text', 'time', 'search', 'url', 'week'])
},
_Component.call(this, props, context);
this.renderInput = this.renderInput.bind(this);
}
getDefaultProps: function getDefaultProps() {
return {
type: 'text'
};
},
Text.prototype.renderInput = function renderInput(props) {
renderInput: function renderInput(props) {
return _react2['default'].createElement('input', props);
};
},
Text.prototype.render = function render() {
render: function render() {
return _react2['default'].createElement(

@@ -58,8 +42,4 @@ _Input2['default'],

);
};
return Text;
})(_react.Component);
exports['default'] = Text;
}
});
module.exports = exports['default'];

40

lib/components/inputs/TextArea.js

@@ -5,10 +5,4 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -22,25 +16,15 @@

var TextArea = (function (_Component) {
_inherits(TextArea, _Component);
exports['default'] = _react.createClass({
_createClass(TextArea, null, [{
key: 'propTypes',
value: {
name: _react.PropTypes.string.isRequired
},
enumerable: true
}]);
displayName: 'TextArea',
function TextArea(props, context) {
_classCallCheck(this, TextArea);
propTypes: {
name: _react.PropTypes.string.isRequired
},
_Component.call(this, props, context);
this.renderInput = this.renderInput.bind(this);
}
TextArea.prototype.renderInput = function renderInput(props) {
renderInput: function renderInput(props) {
return _react2['default'].createElement('textarea', props);
};
},
TextArea.prototype.render = function render() {
render: function render() {
return _react2['default'].createElement(

@@ -51,8 +35,4 @@ _Input2['default'],

);
};
return TextArea;
})(_react.Component);
exports['default'] = TextArea;
}
});
module.exports = exports['default'];

88

lib/components/Message.js

@@ -5,4 +5,2 @@ 'use strict';

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; }; })();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

@@ -12,6 +10,2 @@

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -37,50 +31,48 @@

var Message = (function (_React$Component) {
_inherits(Message, _React$Component);
exports['default'] = _react.createClass({
_createClass(Message, null, [{
key: 'propTypes',
value: {
name: _react.PropTypes.string.isRequired,
renderMessage: _react.PropTypes.func,
children: _react.PropTypes.func
},
enumerable: true
}, {
key: 'defaultProps',
value: {
displayName: 'Message',
propTypes: {
name: _react.PropTypes.string.isRequired,
renderMessage: _react.PropTypes.func,
children: _react.PropTypes.func
},
contextTypes: {
form: _utilsFormShape2['default']
},
getDefaultProps: function getDefaultProps() {
return {
renderMessage: defaultRenderMessage
},
enumerable: true
}, {
key: 'contextTypes',
value: {
form: _utilsFormShape2['default']
},
enumerable: true
}]);
};
},
function Message(props, context) {
_classCallCheck(this, Message);
getInitialState: function getInitialState() {
var name = this.props.name;
var form = this.context.form;
var getMessage = form.getMessage;
_React$Component.call(this, props, context);
var name = props.name;
var form = context.form;
return {
message: getMessage(name)
};
},
componentWillMount: function componentWillMount() {
var form = this.context.form;
var subscribe = form.subscribe;
var getMessage = form.getMessage;
this.handleFormDataChange = this.handleFormDataChange.bind(this);
this.unsubscribe = subscribe(this.handleFormDataChange);
this.state = { message: getMessage(name) };
}
},
Message.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
return !_utilsShallowEqual2['default'](this.props, nextProps) || !_utilsShallowEqual2['default'](this.state, nextState);
};
},
Message.prototype.componentWillUnmount = function componentWillUnmount() {
componentWillUnmount: function componentWillUnmount() {
this.unsubscribe();
};
},
Message.prototype.handleFormDataChange = function handleFormDataChange() {
handleFormDataChange: function handleFormDataChange() {
var name = this.props.name;

@@ -94,5 +86,5 @@ var form = this.context.form;

this.setState({ message: nextMessage });
};
},
Message.prototype.render = function render() {
render: function render() {
var _props = this.props;

@@ -112,8 +104,4 @@ var renderMessage = _props.renderMessage;

return false;
};
return Message;
})(_react2['default'].Component);
exports['default'] = Message;
}
});
module.exports = exports['default'];

2

package.json
{
"name": "react-formalize",
"version": "0.3.0-alpha4",
"version": "0.3.0",
"description": "Serialize react forms",

@@ -5,0 +5,0 @@ "main": "lib/index.js",

207

README.md
react-formalize
=========================
Work in progress!
[![npm](https://img.shields.io/badge/npm-react--formalize-brightgreen.svg?style=flat-square)]()
[![npm version](https://img.shields.io/npm/v/react-formalize.svg?style=flat-square)](https://www.npmjs.com/package/react-formalize)
[![npm downloads](https://img.shields.io/npm/dm/react-formalize.svg?style=flat-square)](https://www.npmjs.com/package/react-formalize)
* serialize forms with react
* pass defaults to form or input
* easy two-way data binding
* validation messages
* works great with flux, redux and friends
* fully customizable
### Demos
* **[Simple example](http://malte-wessel.github.io/react-formalize/simple.html)**
* **[Bootstrap integration](http://malte-wessel.github.io/react-formalize/bootstrap.html)**
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Customization](#customization)
- [API](#api)
- [Examples](#examples)
- [License](#license)
## Installation
```bash
npm install react-formalize --save
```
## Usage
```javascript
import { Component } from 'react';
import { Form, Text, Select } from 'react-formalize';
export default class MyForm extends Component {
handleSubmit(values) {
console.info('Submit', values);
// {
// title: 'Lorem ipsum dolor ist',
// category: 'news'
// };
}
render() {
const post = {
title: 'Lorem ipsum dolor ist',
category: 'news'
};
return (
<Form
values={post}
onSubmit={this.handleSubmit}
onChange={this.handleChange}>
<div>
<label>Title</label>
<Text
name="title"
placeholder="Enter title"/>
</div>
<div>
<label>Category</label>
<Select
name="category"
placeholder="Choose category..."
options={{news: 'News', sport: 'Sport'}}/>
</div>
<div>
<button type="submit">Submit</button>
</div>
</Form>
);
}
}
```
## API
### Primitives
#### `<Form>`
Form component, manages data and events
##### Props
* `view`: *(Function)* the element your content will be rendered in
* `children`: *(Component|Function)* children components
* `values`: *(Object)* the form's initial values
* `messages`: *(Object)* validation messages by input names
* `onSubmit`: *(Function)* submit handler
* `onChange`: *(Function)* change handler
* `disabled`: *(Boolean)* disable form and it inputs
**[Form component source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/Form.js)**
##### Example
```javascript
<Form
onSubmit={this.onSubmit}
onChange={this.onChange}
values={post}
messages={messages}
disabled={saving}>
{/* Input components ... */}
</Form>
```
#### `<Input>`
Input component wrapper, connects to `Form` component, receives and propagates data, **do not use directly**.
##### Props
* `name`: *(String)* name of the input field
* `value`: *(Array|Boolean|Number|Object|String)* value of the input field
* `serialize`: *(Function)* function that extracts the input's data from the change event
* `children`: *(Component)* children components
**[Input component source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/Form.js)**
##### Example
```javascript
import React, { PropTypes, Component } from 'react';
import { Input } from 'react-formalize';
export default class MyCustomTextField extends Component {
renderInput(props) {
return ;
}
render() {
return (
<Input {...this.props}>
{props => <input type="text" {...props}/>}
</Input>
);
}
}
```
#### `<Message>`
Message component, connects to `Form` component, receives messages
##### Props
* `name`: *(String)* name of the related input field
* `renderMessage`: *(Function)* render a custom message
* `children`: *(Function)* children components
**[Message component source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/Form.js)**
##### Example
```javascript
<Form>
<Text name="title"/>
<Message name="title">{message => <p>{message}</p>}</Message>
</Form>
```
### Build in input components
#### `<Text>`
Native text input component
##### Props
* `name`: *(String)* name of the input field
* `type`: *(String)* One of: `text`, `date`, `datetime`, `datetime-local`, `email`, `month`, `number`, `password`, `tel`, `time`, `search`, `url`, `week`. Default is text
**[Text component source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/inputs/Text.js)**
##### Example
```javascript
<Form>
<Input name="title"/>
<button type="submit">Submit</button>
</Form>
```
* Text ([Source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/inputs/Text.js))
* TextArea ([Source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/inputs/TextArea.js))
* Checkbox ([Source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/inputs/Checkbox.js))
* RadioGroup ([Source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/inputs/RadioGroup.js))
* Select ([Source](https://github.com/malte-wessel/react-formalize/blob/master/src/components/inputs/Select.js))
## Examples
Run the simple example:
```bash
cd react-formalize
npm install
cd react-formalize/examples/simple
npm install
npm start
```
## License
MIT
dist/react-formalize.js

Sorry, the diff of this file is too big to display

dist/react-formalize.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc