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
196 lines (165 loc) • 12.9 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 _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
var _templateObject = _taggedTemplateLiteral(['\n .dropdown {\n display: flex;\n flex-wrap: wrap;\n box-sizing: border-box;\n width: 100%;\n position: relative;\n z-index: 999;\n height: 30px;\n border: 1px solid #e9e9e9;\n border-radius: 4px;\n }\n\n .dropdownHeader {\n display: flex;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n }\n\n .dropdown:focus {\n outline: none;\n }\n .dropdown:not(:empty) {\n transform: scaleY(1);\n }\n\n .dropdownBody {\n display: flex;\n width: 100%;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n z-index: 999;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px,\n rgba(0, 0, 0, 0.23) 0px 3px 10px;\n background: #fff;\n transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n transform-origin: top;\n transform: scaleY(0);\n max-height: 250px;\n overflow: auto;\n }\n\n .selectBox {\n width: 100%;\n color: rgb(85, 85, 85);\n font-weight: 500;\n font-size: 13px;\n }\n\n .selectBox input {\n transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n font: inherit;\n height: 100%;\n width: 100%;\n cursor: pointer;\n }\n\n .dropControl {\n display: flex;\n height: 100%;\n width: 15%;\n cursor: pointer;\n }\n\n .dropControl span {\n margin: auto;\n }\n\n .items {\n width: 100%;\n overflow: auto;\n font-size: 1em;\n }\n\n .item {\n padding: 16px;\n transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n font-size: 14px;\n font-weight: inherit;\n color: rgb(85, 85, 85);\n line-height: 16px;\n }\n\n .item:hover {\n background: rgba(85, 85, 85, 0.1);\n cursor: pointer;\n }\n\n .showBody {\n transform: scaleY(1);\n }\n\n input {\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n }\n\n input:focus {\n outline: none;\n }\n'], ['\n .dropdown {\n display: flex;\n flex-wrap: wrap;\n box-sizing: border-box;\n width: 100%;\n position: relative;\n z-index: 999;\n height: 30px;\n border: 1px solid #e9e9e9;\n border-radius: 4px;\n }\n\n .dropdownHeader {\n display: flex;\n width: 100%;\n height: 100%;\n padding: 0 10px;\n }\n\n .dropdown:focus {\n outline: none;\n }\n .dropdown:not(:empty) {\n transform: scaleY(1);\n }\n\n .dropdownBody {\n display: flex;\n width: 100%;\n position: absolute;\n top: 100%;\n margin-top: 8px;\n z-index: 999;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px,\n rgba(0, 0, 0, 0.23) 0px 3px 10px;\n background: #fff;\n transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n transform-origin: top;\n transform: scaleY(0);\n max-height: 250px;\n overflow: auto;\n }\n\n .selectBox {\n width: 100%;\n color: rgb(85, 85, 85);\n font-weight: 500;\n font-size: 13px;\n }\n\n .selectBox input {\n transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n font: inherit;\n height: 100%;\n width: 100%;\n cursor: pointer;\n }\n\n .dropControl {\n display: flex;\n height: 100%;\n width: 15%;\n cursor: pointer;\n }\n\n .dropControl span {\n margin: auto;\n }\n\n .items {\n width: 100%;\n overflow: auto;\n font-size: 1em;\n }\n\n .item {\n padding: 16px;\n transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;\n font-size: 14px;\n font-weight: inherit;\n color: rgb(85, 85, 85);\n line-height: 16px;\n }\n\n .item:hover {\n background: rgba(85, 85, 85, 0.1);\n cursor: pointer;\n }\n\n .showBody {\n transform: scaleY(1);\n }\n\n input {\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n }\n\n input:focus {\n outline: none;\n }\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _FormElement2 = require('../FormElement');
var _FormElement3 = _interopRequireDefault(_FormElement2);
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; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var DropdownStyled = _styledComponents2.default.div(_templateObject);
var Select = function (_FormElement) {
_inherits(Select, _FormElement);
function Select(props) {
_classCallCheck(this, Select);
var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
var selectedValue = props.selectedValue || '';
_this.state = {
selected: selectedValue,
showBody: false
};
_this.handleBlur = _this.handleBlur.bind(_this);
_this.showHideDropdown = _this.showHideDropdown.bind(_this);
_this.handleDropdownClick = _this.handleDropdownClick.bind(_this);
return _this;
}
_createClass(Select, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps.selectedValue !== this.props.selectedValue) {
this.setState({
selected: nextProps.selectedValue
});
}
}
/*
This will trigger when dropdwon is clicked and type is select
*/
}, {
key: 'handleDropdownClick',
value: function handleDropdownClick(event) {
var value = event.currentTarget.dataset.value;
this.showHideDropdown();
this.setState({
selected: value
});
_get(Select.prototype.__proto__ || Object.getPrototypeOf(Select.prototype), 'handleChange', this).call(this, event);
}
/*
This will show/hide the drop down
*/
}, {
key: 'showHideDropdown',
value: function showHideDropdown() {
this.setState({
showBody: !this.state.showBody
});
}
}, {
key: 'getDisplayValue',
value: function getDisplayValue() {
var _this2 = this;
var dropdownItem = this.props.dropdownData && (this.props.dropdownData.filter(function (item) {
return item.value === _this2.state.selected;
})[0] || {});
return dropdownItem.displayName || dropdownItem.value || '';
}
}, {
key: 'handleBlur',
value: function handleBlur() {
if (this.state.showBody) {
this.setState({
showBody: false
});
}
if (this.props.openCloseChange) {
this.props.openCloseChange();
}
}
}, {
key: 'render',
value: function render() {
var _this3 = this;
return _react2.default.createElement(
DropdownStyled,
null,
_react2.default.createElement(
'div',
{
className: (0, _classnames2.default)('dropdown', this.props.customDropdown),
onBlur: this.handleBlur,
role: 'button',
tabIndex: 0
},
_react2.default.createElement(
'div',
{
className: 'dropdownHeader',
role: 'button',
onClick: this.showHideDropdown,
style: this.props.style
},
_react2.default.createElement(
'div',
{ className: 'selectBox' },
_react2.default.createElement('input', {
type: 'text',
placeholder: this.props.placeholder ? this.props.placeholder : 'Select',
value: this.getDisplayValue(),
disabled: true
})
),
_react2.default.createElement(
'div',
{ className: 'dropControl' },
_react2.default.createElement(
'span',
null,
'\u25BE'
)
)
),
_react2.default.createElement(
'div',
{
className: (0, _classnames2.default)('dropdownBody', this.state.showBody ? 'showBody' : null),
ref: function ref(_ref) {
_this3.dropdownBody = _ref;
}
},
_react2.default.createElement(
'div',
{ className: 'items' },
this.props.dropdownData ? this.props.dropdownData.map(function (item) {
return _react2.default.createElement(
'div',
{
className: 'item',
key: item.id,
role: 'button',
'data-value': item.value,
onClick: _this3.handleDropdownClick
},
item.displayName ? item.displayName : item.value
);
}) : null
)
)
)
);
}
}]);
return Select;
}(_FormElement3.default);
exports.default = Select;