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
232 lines (195 loc) • 9.96 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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 _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _colorCodes = require('../colorCodes');
var _Inputs = require('../FormElements/Inputs');
var _reactClickOutside = require('react-click-outside');
var _reactClickOutside2 = _interopRequireDefault(_reactClickOutside);
var _SearchWithOptions = require('./styles/SearchWithOptions');
var _styledComponents = require('styled-components');
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 SearchWithOptions = function (_React$Component) {
_inherits(SearchWithOptions, _React$Component);
function SearchWithOptions(props) {
_classCallCheck(this, SearchWithOptions);
var _this = _possibleConstructorReturn(this, (SearchWithOptions.__proto__ || Object.getPrototypeOf(SearchWithOptions)).call(this, props));
_this.onChange = function (e) {
var value = e.target.value;
_this.setState({ value: value });
};
_this.onFocus = function () {
if (_this.state.value.length > 0) {
_this.setState({ showSearchList: true });
}
};
_this.onKeyUp = function () {
_this.setState({ showSearchList: _this.state.value.length > 0 });
};
_this.getUndoState = function (value) {
return Boolean(value && _this.initialValue === value || !value && _this.initialValue !== value);
};
_this.searchTypeClick = function (option) {
var onOptionSearch = _this.props.onOptionSearch;
_this.setState({ showSearchList: false });
onOptionSearch && onOptionSearch(option, _this.state.value); // eslint-disable-line no-unused-expressions
};
_this.undoSearch = function () {
var onOptionSearch = _this.props.onOptionSearch;
_this.setState({ showSearchList: false, value: '' });
onOptionSearch && onOptionSearch({}, ''); // eslint-disable-line no-unused-expressions
};
_this.handleClickOutside = function () {
_this.setState({ showSearchList: false });
};
_this.state = {
value: '',
showSearchList: false
};
_this.initialValue = props.value;
return _this;
}
_createClass(SearchWithOptions, [{
key: 'componentWillMount',
value: function componentWillMount() {
if (this.props.value) {
this.setState({ value: this.props.value });
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.value !== nextProps.value) {
this.initialValue = nextProps.value;
this.setState({ value: nextProps.value });
}
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
className = _props.className,
width = _props.width,
height = _props.height,
padding = _props.padding,
boxShadow = _props.boxShadow,
border = _props.border,
backgroundColor = _props.backgroundColor,
placeholder = _props.placeholder,
searchOptions = _props.searchOptions,
listClassName = _props.listClassName,
fontSize = _props.fontSize,
borderRadius = _props.borderRadius,
theme = _props.theme;
var _state = this.state,
value = _state.value,
showSearchList = _state.showSearchList;
return _react2.default.createElement(
'div',
{ style: { position: 'relative' }, className: className },
_react2.default.createElement(_Inputs.SearchInput, {
width: width,
height: height,
padding: padding,
className: 'simple-search-input ' + (value ? 'active' : ''),
boxShadow: boxShadow,
border: border,
ref: function ref(input) {
_this2.searchInput = input;
},
backgroundColor: backgroundColor || theme.white,
fontSize: fontSize,
borderRadius: borderRadius,
value: value,
type: 'text',
onChange: this.onChange,
placeholder: placeholder,
onFocus: this.onFocus,
onKeyUp: this.onKeyUp
}),
this.getUndoState(value) ? _react2.default.createElement(_SearchWithOptions.SimpleSearchIcon, {
className: 'fa fa-undo active-icon-color',
onClick: this.undoSearch
}) : _react2.default.createElement(_SearchWithOptions.SimpleSearchIcon, {
className: 'fa fa-search ' + (value ? 'active-icon-color' : 'inprogress-icon-color')
}),
showSearchList && searchOptions && searchOptions.length && _react2.default.createElement(
_SearchWithOptions.SearchTypeList,
{ className: listClassName },
searchOptions.map(function (option) {
return _react2.default.createElement(
'li',
{
key: option.searchBy + '-key',
className: 'search-type-list-item',
onClick: function onClick() {
return _this2.searchTypeClick(option);
}
},
_react2.default.createElement(
'span',
null,
_react2.default.createElement(
'span',
{ className: 'id-type' },
option.label,
':',
' '
),
_react2.default.createElement(
'strong',
{ className: 'search-value' },
value
)
)
);
})
)
);
}
}]);
return SearchWithOptions;
}(_react2.default.Component);
SearchWithOptions.propTypes = {
className: _propTypes2.default.string,
listClassName: _propTypes2.default.string,
width: _propTypes2.default.string,
height: _propTypes2.default.string,
padding: _propTypes2.default.string,
boxShadow: _propTypes2.default.string,
border: _propTypes2.default.string,
backgroundColor: _propTypes2.default.string,
placeholder: _propTypes2.default.string,
searchOptions: _propTypes2.default.array, // eslint-disable-line react/forbid-prop-types
onOptionSearch: _propTypes2.default.func,
value: _propTypes2.default.string,
fontSize: _propTypes2.default.string,
borderRadius: _propTypes2.default.string
};
SearchWithOptions.defaultProps = {
className: '',
listClassName: '',
width: '100%',
height: '30px',
padding: '10px',
boxShadow: undefined,
border: undefined,
placeholder: 'Search',
searchOptions: [],
onOptionSearch: function onOptionSearch() {},
value: undefined,
fontSize: '12px',
borderRadius: '2px',
theme: _extends({}, _colorCodes.guidelineColors)
};
exports.default = (0, _styledComponents.withTheme)((0, _reactClickOutside2.default)(SearchWithOptions));