@alifd/next
Version:
A configurable component library for web built on React.
483 lines (408 loc) • 15.5 kB
JavaScript
'use strict';
exports.__esModule = true;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp, _initialiseProps;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
var _input = require('../input');
var _input2 = _interopRequireDefault(_input);
var _select = require('../select');
var _select2 = _interopRequireDefault(_select);
var _button = require('../button');
var _button2 = _interopRequireDefault(_button);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
var _util = require('../util');
var _zhCn = require('../locale/zh-cn');
var _zhCn2 = _interopRequireDefault(_zhCn);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Group = _input2.default.Group;
var AutoComplete = _select2.default.AutoComplete;
var noop = _util.func.noop;
/**
* Search
* @description 输入框部分继承 Select.AutoComplete 的能力，可以直接用AutoComplete 的 api
*/
var Search = (_temp = _class = function (_React$Component) {
(0, _inherits3.default)(Search, _React$Component);
function Search(props) {
(0, _classCallCheck3.default)(this, Search);
var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
_initialiseProps.call(_this);
var value = 'value' in props ? props.value : props.defaultValue;
var filterValue = 'filterValue' in props ? props.filterValue : props.defaultFilterValue;
_this.state = {
value: typeof value === 'undefined' ? '' : value,
filterValue: filterValue
};
_this.highlightKey = null;
return _this;
}
Search.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
var nextState = {};
if ('value' in nextProps && nextProps.value !== prevState.value) {
var value = nextProps.value;
nextState.value = value === undefined || value === null ? '' : nextProps.value;
}
if ('filterValue' in nextProps && nextProps.filterValue !== prevState.filterValue) {
var filterValue = nextProps.filterValue;
nextState.filterValue = filterValue === undefined ? '' : filterValue;
}
if (Object.keys(nextState).length > 0) {
return nextState;
}
return null;
};
Search.prototype.focus = function focus() {
var _inputRef;
(_inputRef = this.inputRef).focus.apply(_inputRef, arguments);
};
Search.prototype.render = function render() {
var _classNames;
var _props = this.props,
shape = _props.shape,
filter = _props.filter,
hasIcon = _props.hasIcon,
disabled = _props.disabled,
placeholder = _props.placeholder,
type = _props.type,
className = _props.className,
style = _props.style,
size = _props.size,
prefix = _props.prefix,
searchText = _props.searchText,
dataSource = _props.dataSource,
filterProps = _props.filterProps,
buttonProps = _props.buttonProps,
fillProps = _props.fillProps,
popupContent = _props.popupContent,
followTrigger = _props.followTrigger,
hasClear = _props.hasClear,
visible = _props.visible,
locale = _props.locale,
rtl = _props.rtl,
icons = _props.icons,
autoHighlightFirstItem = _props.autoHighlightFirstItem,
others = (0, _objectWithoutProperties3.default)(_props, ['shape', 'filter', 'hasIcon', 'disabled', 'placeholder', 'type', 'className', 'style', 'size', 'prefix', 'searchText', 'dataSource', 'filterProps', 'buttonProps', 'fillProps', 'popupContent', 'followTrigger', 'hasClear', 'visible', 'locale', 'rtl', 'icons', 'autoHighlightFirstItem']);
var cls = (0, _classnames2.default)((_classNames = {}, _classNames[prefix + 'search'] = true, _classNames[prefix + 'search-' + shape] = true, _classNames['' + prefix + type] = type, _classNames['' + prefix + size] = size, _classNames[prefix + 'disabled'] = !!disabled, _classNames[className] = !!className, _classNames));
var searchIcon = null,
filterSelect = null,
searchBtn = null,
iconsSearch = icons.search;
if (!(0, _react.isValidElement)(icons.search) && icons.search) {
iconsSearch = _react2.default.createElement(
'span',
null,
icons.search
);
}
if (shape === 'simple') {
var _classNames2;
var _cls = (0, _classnames2.default)((_classNames2 = {}, _classNames2[prefix + 'search-icon'] = true, _classNames2[buttonProps.className] = !!buttonProps.className, _classNames2[prefix + 'search-symbol-icon'] = !iconsSearch, _classNames2));
hasIcon && (searchIcon = _react2.default.cloneElement(iconsSearch || _react2.default.createElement(_icon2.default, { type: 'search' }), (0, _extends3.default)({
role: 'button',
'aria-disabled': disabled,
'aria-label': locale.buttonText
}, buttonProps, {
className: _cls,
onClick: this.onSearch,
onKeyDown: this.onKeyDown
})));
} else {
var _classNames3;
var _cls2 = (0, _classnames2.default)((_classNames3 = {}, _classNames3[prefix + 'search-btn'] = true, _classNames3[buttonProps.className] = !!buttonProps.className, _classNames3));
searchBtn = _react2.default.createElement(
_button2.default,
(0, _extends3.default)({
tabIndex: '0',
'aria-disabled': disabled,
'aria-label': locale.buttonText,
className: _cls2,
disabled: disabled
}, buttonProps, {
onClick: this.onSearch,
onKeyDown: this.onKeyDown
}),
hasIcon ? iconsSearch || _react2.default.createElement(_icon2.default, { type: 'search', className: prefix + 'search-symbol-icon' }) : null,
searchText ? _react2.default.createElement(
'span',
{ className: prefix + 'search-btn-text' },
searchText
) : null
);
}
if (filter.length > 0) {
filterSelect = _react2.default.createElement(_select2.default, (0, _extends3.default)({}, filterProps, {
followTrigger: followTrigger,
hasBorder: false,
dataSource: filter,
size: size,
disabled: disabled,
value: this.state.filterValue,
onChange: this.onFilterChange
}));
}
var othersAttributes = _util.obj.pickOthers(Search.propTypes, others);
if (visible !== undefined) {
// 受控属性 visible 不能直接写在组件上
othersAttributes.visible = Boolean(visible);
}
var dataAttr = _util.obj.pickAttrsWith(others, 'data-');
var left = _react2.default.createElement(
Group,
{
addonBefore: filterSelect,
className: prefix + 'search-left',
addonBeforeClassName: prefix + 'search-left-addon'
},
_react2.default.createElement(AutoComplete, (0, _extends3.default)({
'aria-label': locale.buttonText
}, othersAttributes, {
followTrigger: followTrigger,
role: 'searchbox',
hasClear: hasClear,
className: prefix + 'search-input',
size: size,
fillProps: fillProps,
placeholder: placeholder,
dataSource: dataSource,
innerAfter: searchIcon,
onPressEnter: this.onPressEnter,
value: this.state.value,
onChange: this.onChange,
onToggleHighlightItem: this.onToggleHighlightItem,
autoHighlightFirstItem: autoHighlightFirstItem,
popupContent: popupContent,
disabled: disabled,
ref: this.saveInputRef
}))
);
return _react2.default.createElement(
'span',
(0, _extends3.default)({ className: cls, style: style }, dataAttr, { dir: rtl ? 'rtl' : undefined }),
searchBtn ? _react2.default.createElement(
Group,
{ addonAfter: searchBtn },
left
) : left
);
};
return Search;
}(_react2.default.Component), _class.propTypes = {
/**
* 样式前缀
*/
prefix: _propTypes2.default.string,
/**
* 形状
*/
shape: _propTypes2.default.oneOf(['normal', 'simple']),
/**
* 类型 shape=normal: primary/secondary; shape=simple: normal/dark;
*/
type: _propTypes2.default.oneOf(['primary', 'secondary', 'normal', 'dark']),
/**
* 大小
* @enumdesc '大', '小'
*/
size: _propTypes2.default.oneOf(['large', 'medium']),
/**
* 搜索框默认值
*/
defaultValue: _propTypes2.default.string,
/**
* 搜索框数值
*/
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
/**
* 输入关键字时的回掉
* @param {Object} value 输入值
*/
onChange: _propTypes2.default.func,
/**
* 点击搜索按钮触发的回调
* @param {String} value 输入值
* @param {String} filterValue 选项值
*/
onSearch: _propTypes2.default.func,
/**
* 选择器默认值
*/
defaultFilterValue: _propTypes2.default.string,
/**
* 填充到输入框里的值的 key ，默认是value
*/
fillProps: _propTypes2.default.string,
/**
* 选择器
*/
filter: _propTypes2.default.array,
/**
* 选择器值
*/
filterValue: _propTypes2.default.string,
/**
* 选择器发生变化时回调
* @param {Object} filter value
*/
onFilterChange: _propTypes2.default.func,
/**
* 搜索框下拉联想列表
*/
dataSource: _propTypes2.default.array,
/**
* 默认提示
*/
placeholder: _propTypes2.default.string,
/**
* button 的内容
*/
searchText: _propTypes2.default.node,
/**
* 自定义样式
*/
style: _propTypes2.default.object,
/**
* 样式名称
*/
className: _propTypes2.default.string,
/**
* 选择器的props
*/
filterProps: _propTypes2.default.object,
/**
* 按钮的额外属性
*/
buttonProps: _propTypes2.default.object,
/**
* 自定义渲染的的下拉框
*/
popupContent: _propTypes2.default.node,
/**
* 是否跟随滚动
*/
followTrigger: _propTypes2.default.bool,
/**
* 自定义渲染的的下拉框
*/
visible: _propTypes2.default.bool,
/**
* 是否显示清除按钮
*/
hasClear: _propTypes2.default.bool,
/**
* 是否显示搜索按钮
*/
hasIcon: _propTypes2.default.bool,
/**
* 是否禁用
*/
disabled: _propTypes2.default.bool,
locale: _propTypes2.default.object,
rtl: _propTypes2.default.bool,
/**
* 可配置的icons，包括 search 等
*/
icons: _propTypes2.default.object,
/**
* 是否自动高亮第一个元素
*/
autoHighlightFirstItem: _propTypes2.default.bool,
/**
* 上下箭头切换选项的回调
*/
onToggleHighlightItem: _propTypes2.default.func
}, _class.defaultProps = {
prefix: 'next-',
shape: 'normal',
type: 'normal',
size: 'medium',
hasIcon: true,
filter: [],
locale: _zhCn2.default.Search,
buttonProps: {},
onChange: noop,
onSearch: noop,
onFilterChange: noop,
onToggleHighlightItem: noop,
hasClear: false,
disabled: false,
icons: {},
autoHighlightFirstItem: true
}, _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onChange = function (value, type) {
for (var _len = arguments.length, argv = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
argv[_key - 2] = arguments[_key];
}
var _props2;
if (_this2.props.disabled) {
return;
}
if (!('value' in _this2.props)) {
_this2.setState({ value: value });
}
(_props2 = _this2.props).onChange.apply(_props2, [value, type].concat(argv));
if (type === 'enter') {
_this2.highlightKey = '';
_this2.props.onSearch(value, _this2.state.filterValue);
}
};
this.onPressEnter = function () {
if (_this2.highlightKey) {
return;
}
_this2.onSearch();
};
this.onSearch = function () {
if (_this2.props.disabled) {
return;
}
_this2.props.onSearch(_this2.state.value, _this2.state.filterValue);
};
this.onFilterChange = function (filterValue) {
if (!('filterValue' in _this2.props)) {
_this2.setState({ filterValue: filterValue });
}
_this2.props.onFilterChange(filterValue);
};
this.onToggleHighlightItem = function (highlightKey) {
var _props3;
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
_this2.highlightKey = highlightKey;
(_props3 = _this2.props).onToggleHighlightItem.apply(_props3, [highlightKey].concat(args));
};
this.onKeyDown = function (e) {
if (_this2.props.disabled) {
return;
}
if (e.keyCode !== _util.KEYCODE.ENTER) {
return;
}
_this2.onSearch();
};
this.saveInputRef = function (ref) {
if (ref && ref.getInstance()) {
_this2.inputRef = ref.getInstance();
}
};
}, _temp);
Search.displayName = 'Search';
exports.default = (0, _reactLifecyclesCompat.polyfill)(Search);
module.exports = exports['default'];