fk-react-ui-components
Version:
Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should
220 lines (183 loc) • 9.36 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _FormComponent = require('../FormComponent/FormComponent');
var _FormComponent2 = _interopRequireDefault(_FormComponent);
var _style = require('../FormComponent/style');
var _SubmitButton = require('../FormElements/SubmitButton/SubmitButton');
var _SubmitButton2 = _interopRequireDefault(_SubmitButton);
var _CancelButton = require('../FormElements/CancelButton/CancelButton');
var _CancelButton2 = _interopRequireDefault(_CancelButton);
var _Inputs = require('../FormElements/Inputs');
var _Inputs2 = _interopRequireDefault(_Inputs);
var _Error = require('../FormElements/Error/Error');
var _Error2 = _interopRequireDefault(_Error);
var _ = require('./..');
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _styles = require('./styles');
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 _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 PLACEHOLDER = 'Enter value here';
var AttributeModifier = function (_Component) {
_inherits(AttributeModifier, _Component);
function AttributeModifier(props) {
_classCallCheck(this, AttributeModifier);
var _this = _possibleConstructorReturn(this, (AttributeModifier.__proto__ || Object.getPrototypeOf(AttributeModifier)).call(this, props));
_this.onSubmit = function () {
var newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props.content;
if (newValue !== oldValue && newValue) {
_this.props.onSave(newValue, _this.props.content, _this.props.showConfirmationDialog);
} else {
_this.setState({
sameContent: 'Same Value'
});
}
};
_this.onFocus = function () {
_this.setState({ placeholder: '' });
};
_this.onBlur = function () {
_this.setState({
placeholder: _this.props.content || PLACEHOLDER
});
};
_this.onCancel = function () {
_this.props.onCancel(_this.props.content, _this.props.showConfirmationDialog);
};
_this.state = {
placeholder: _this.props.content || PLACEHOLDER,
sameContent: ''
};
return _this;
}
_createClass(AttributeModifier, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
_styles.ContentWrapper,
null,
_react2.default.createElement(
_FormComponent2.default,
{
onCancel: this.onCancel,
onSuccess: this.onSubmit
},
_react2.default.createElement(
_style.ElementWrapper,
{ className: 'wrapper' },
this.props.title && _react2.default.createElement(
_styles.ContainerHeader,
null,
this.props.title
),
this.props.description && _react2.default.createElement(
_styles.ContainerDesc,
null,
this.props.description
),
_react2.default.createElement(_Inputs2.default, {
className: 'custom',
validator: this.props.validateFunction,
placeholder: this.state.placeholder,
onFocus: this.onFocus,
onBlur: this.onBlur,
name: 'value',
autocomplete: 'off',
type: this.props.inputType
}),
this.props.error || this.state.sameContent ? _react2.default.createElement(
_styles.ErrorWrapper,
null,
_react2.default.createElement('i', { className: 'fa fa-exclamation-circle' }),
_react2.default.createElement(
_styles.StateInfo,
null,
this.props.errorMessage
)
) : '',
this.props.success ? _react2.default.createElement(
_styles.SuccessWrapper,
null,
_react2.default.createElement('i', { className: 'fa fa-check' }),
_react2.default.createElement(
_styles.StateInfo,
null,
this.props.successMessage
)
) : '',
this.props.loading ? _react2.default.createElement(
_styles.IconWrapper,
null,
_react2.default.createElement(_.LoaderIcon, { width: '35px' })
) : '',
_react2.default.createElement(_Error2.default, { name: 'value' })
),
_react2.default.createElement(
_style.ElementWrapper,
null,
this.props.footer && _react2.default.createElement(
_styles.ContainerFooter,
null,
this.props.footer
)
),
_react2.default.createElement(
_style.ElementWrapper,
{ align: 'left' },
_react2.default.createElement(
_CancelButton2.default,
null,
'Cancel'
),
_react2.default.createElement(_styles.Separator, null),
_react2.default.createElement(
_SubmitButton2.default,
{ className: 'custom', isAnchor: true },
this.props.showConfirmationDialog ? 'Confirm' : 'Apply'
)
)
)
);
}
}]);
return AttributeModifier;
}(_react.Component);
AttributeModifier.propTypes = {
onSave: _propTypes2.default.func.isRequired,
content: _propTypes2.default.string.isRequired,
validateFunction: _propTypes2.default.func.isRequired,
inputType: _propTypes2.default.string.isRequired,
title: _propTypes2.default.string,
description: _propTypes2.default.string,
footer: _propTypes2.default.string,
successMessage: _propTypes2.default.string,
errorMessage: _propTypes2.default.string,
onCancel: _propTypes2.default.func,
loading: _propTypes2.default.bool,
success: _propTypes2.default.bool,
error: _propTypes2.default.bool,
showConfirmationDialog: _propTypes2.default.bool
};
AttributeModifier.defaultProps = {
onCancel: function onCancel(f) {
return f;
},
title: '',
description: '',
footer: '',
successMessage: 'Value updated successfully',
errorMessage: 'Value updation failed!',
loading: false,
success: false,
error: false,
showConfirmationDialog: false
};
exports.default = AttributeModifier;