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
284 lines (231 loc) • 11.7 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 _reactClickOutside = require('react-click-outside');
var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);
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; } /**
* Created by mano.bharathi on 24/02/2018
*/
/**
* Conatiner should always be position relative
* This is to handle the position of the visibilityToggle Menu
*/
var VisibilityToggleHelper = function (_React$PureComponent) {
_inherits(VisibilityToggleHelper, _React$PureComponent);
function VisibilityToggleHelper(props) {
_classCallCheck(this, VisibilityToggleHelper);
var _this = _possibleConstructorReturn(this, (VisibilityToggleHelper.__proto__ || Object.getPrototypeOf(VisibilityToggleHelper)).call(this, props));
_initialiseProps.call(_this);
_this.state = {
visibilityToggleOpen: _this.props.openOnRender,
display: 'visibilityHidden'
};
return _this;
}
/**
* Getting the container Ref
* @param ref
*/
/**
* Getting the clickableEle ref
* @param ref
*/
/**
* This will calculate the position of the popOver container
* Left and right will be always 0 (Left or Right will be choosen from the given props)
* Will calculate the Top dynamically based on the ClickableEle height and container height
* @returns {Object of position}
*/
/**
* Toggling the popOver menu by showing and hiding
* Execute the callback if any from the props
*/
/**
* This is the callback for enhanceWithClickOutside
* Execute the callback if any from the props
*/
/**
* Clone all the children and add closeChildComponent props to that
* @param props
*/
_createClass(VisibilityToggleHelper, [{
key: 'render',
/**
* Will render the newly created clickableElement.
* Will render the visibilityToggle container.
* PopOver Container will be in Visibility: hidden mode in idle state.
* Visibility: hidden is used to calculate the container height, when it is hidden.
* @returns {PopOver Component}.
*/
value: function render() {
var position = this.getPosition();
var action = this.props.action;
var onClick = action === 'click' ? this.togglevisibilityToggle : false;
var onMouseOver = action === 'hover' ? this.showChildComponent : false;
var onMouseLeave = action === 'hover' ? this.hideChildComponent : false;
this.cloneChildern(this.props);
return _react2.default.createElement(
_styles.Container,
null,
_react2.default.createElement(
_styles.ClickableContainer,
{
onClick: onClick,
onMouseOver: onMouseOver,
onMouseLeave: onMouseLeave,
onFocus: false,
innerRef: this.setClickableEleRef
},
this.props.clickableElem
),
this.state.display === 'visibilityHidden' ? _react2.default.createElement(
_styles.VisibilityToggleContainer,
{
innerRef: this.setContainerRef,
style: position,
isHidden: !this.state.visibilityToggleOpen,
onMouseOver: onMouseOver,
onFocus: false,
onMouseLeave: onMouseLeave
},
this.newChildren
) : _react2.default.createElement(
_styles.VisibilityToggleContainerNone,
{
innerRef: this.setContainerRef,
style: position,
isHidden: !this.state.visibilityToggleOpen,
onMouseOver: onMouseOver,
onFocus: false,
onMouseLeave: onMouseLeave
},
this.newChildren
)
);
}
}]);
return VisibilityToggleHelper;
}(_react2.default.PureComponent);
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.setContainerRef = function (ref) {
if (ref && !_this2.containerRef) {
_this2.containerRef = ref;
_this2.containerBoundingRect = _this2.containerRef.getBoundingClientRect();
_this2.setState({
display: 'displayNone'
});
}
};
this.setClickableEleRef = function (ref) {
if (ref) {
_this2.buttonRef = ref;
}
};
this.getPosition = function () {
var _props$position = _this2.props.position,
vertical = _props$position.vertical,
horizontal = _props$position.horizontal;
if (_this2.buttonRef && _this2.containerRef) {
var top = void 0;
var bottom = void 0;
var left = 0;
var boundingRect = _this2.buttonRef.getBoundingClientRect();
switch (vertical) {
case 'top':
top = '-' + _this2.containerBoundingRect.height + 'px';
break;
case 'bottom':
top = boundingRect.height + 'px';
break;
case 'parallel-top':
top = '0px';
break;
case 'parallel-bottom':
bottom = '0px';
break;
case 'parallel-center':
top = boundingRect.height > _this2.containerBoundingRect.height ? (boundingRect.height - _this2.containerBoundingRect.height) / 2 + 'px' : '-' + (_this2.containerBoundingRect.height - boundingRect.height) / 2 + 'px';
break;
default:
return '';
}
if (horizontal === 'right') {
return { top: top, right: 0 };
} else if (horizontal === 'left') {
left = 0;
} else if (horizontal === 'center') {
left = (boundingRect.width - _this2.containerBoundingRect.width) / 2 + 'px';
} else if (horizontal === 'right-top' || horizontal === 'right-bottom' || horizontal === 'right-center') {
left = boundingRect.width + 'px';
} else if (horizontal === 'left-top' || horizontal === 'left-bottom' || horizontal === 'left-center') {
left = '-' + _this2.containerBoundingRect.width + 'px';
}
var position = top ? { top: top, left: left } : { bottom: bottom, left: left };
return position;
}
};
this.togglevisibilityToggle = function () {
var onChange = _this2.props.onChange;
var visibilityToggleOpen = _this2.state.visibilityToggleOpen;
_this2.setState({
visibilityToggleOpen: !visibilityToggleOpen
});
onChange({ active: !visibilityToggleOpen });
};
this.showChildComponent = function () {
_this2.setState({
visibilityToggleOpen: true
});
};
this.hideChildComponent = function () {
_this2.setState({
visibilityToggleOpen: false
});
};
this.handleClickOutside = function () {
_this2.props.onChange({ active: false });
_this2.setState({ visibilityToggleOpen: false });
};
this.cloneChildern = function (props) {
_this2.newChildren = _react2.default.Children.map(props.children, function (child) {
return _react2.default.cloneElement(child, {
closeChildComponent: _this2.handleClickOutside
});
});
};
};
VisibilityToggleHelper.propTypes = {
position: _propTypes2.default.shape({
horizontal: _propTypes2.default.string,
vertical: _propTypes2.default.string
}).isRequired,
onChange: _propTypes2.default.func,
action: _propTypes2.default.string,
openOnRender: _propTypes2.default.bool,
clickableElem: _propTypes2.default.node.isRequired
};
/**
* Default props for the VisibilityToggleHelper Component
* Onchange is to notifiy any change in the component, which is type Function
* Position is type object, where you want to position of your VisibilityToggleHelper menu example:position{horizontal: left, vertical: bottom}
* clickableElem is the element on which you want to show the popOver Menu
*/
VisibilityToggleHelper.defaultProps = {
onChange: function onChange(f) {
return f;
},
openOnRender: false,
action: 'click'
};
exports.default = (0, _reactClickOutside2.default)(VisibilityToggleHelper);