wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
104 lines • 5.34 kB
JavaScript
import { __extends } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import CloseIcon from '../../icons/Close';
import Dropdown from '../../ui/dropdown';
import RadioGroup from '../../ui/radio-group';
import Button from './button';
import NO_VALUE_TYPE from '../../AutoExample/no-value-type';
var isThing = function (type) { return function (thing) { return typeof thing === type; }; }; // eslint-disable-line
var isUndefined = isThing('undefined');
var isFunction = isThing('function');
var isString = isThing('string');
var noop = function () { };
var List = /** @class */ (function (_super) {
__extends(List, _super);
function List(props) {
var _this = _super.call(this, props) || this;
_this.createOptions = function (values) {
return values.map(function (option, id) {
option = !isString(option) ? option || {} : option;
return {
id: option.id || id,
// `value` is used in InputWithOptions as displayed value in dropdown
// however, it's possible `value` is complex react component. instead of
// displaying that component, we save it in `realValue` and
// show `value` as some string representation of component instead
value: option.label || (option.type && option.type.name) || '' + option,
realValue: isUndefined(option.value) ? option : option.value,
};
});
};
_this.getFilteredOptions = function () {
return _this.state.isFiltering
? _this.state.options.filter(function (_a) {
var value = _a.value;
return _this.state.currentFilter.length
? value.toLowerCase().includes(_this.state.currentFilter)
: true;
})
: _this.state.options;
};
_this.clearValue = function () {
return _this.setState({ currentValue: {}, currentFilter: '' }, function () {
return _this.props.onChange(NO_VALUE_TYPE);
});
};
_this.clearIcon = (React.createElement("span", { onClick: _this.clearValue, style: { color: '#3899ec', cursor: 'pointer', marginLeft: '-20px' }, children: React.createElement(CloseIcon, { size: "7px" }) }));
_this.clearButton = (React.createElement("div", { style: { padding: '1em 0' } },
React.createElement(Button, { children: "Clear", onClick: _this.clearValue })));
_this.getSelectedOption = function () {
var selectedOption = _this.state.options.find(function (option) { return option.id === _this.state.currentValue.id; }) || {};
return selectedOption;
};
_this.onOptionChange = function (_a) {
var id = _a.id;
var currentValue = _this.state.options.find(function (option) { return option.id === id; }) || {};
_this.setState({
currentValue: currentValue,
currentFilter: currentValue.value,
isFiltering: false,
}, function () { return _this.props.onChange(currentValue.realValue); });
};
_this.onFilterChange = function (currentFilter) {
return _this.setState({ currentFilter: currentFilter, isFiltering: true });
};
var options = _this.createOptions(props.values || []);
var currentValue = options.find(function (option) { return option.realValue === props.value; }) || {};
_this.state = {
currentValue: currentValue,
currentFilter: props.defaultValue &&
[props.defaultValue, props.defaultValue.type].some(isFunction)
? currentValue.value
: props.defaultValue || '',
isFiltering: false,
options: options,
};
return _this;
}
List.prototype.dropdown = function () {
var _this = this;
return (React.createElement(Dropdown, { value: this.state.currentFilter, options: this.getFilteredOptions(), selectedOption: this.getSelectedOption(), placeholder: isString(this.props.defaultValue) ? this.props.defaultValue : '', onSelect: function (option) { return (option ? _this.onOptionChange(option) : noop); }, onChange: this.onFilterChange, onClear: !this.props.isRequired ? this.clearValue : noop }));
};
List.prototype.radios = function () {
var _this = this;
return (React.createElement("div", null,
React.createElement(RadioGroup, { value: this.state.currentValue.id, onChange: function (id) { return _this.onOptionChange({ id: id }); }, radios: this.state.options }),
!this.props.isRequired &&
this.state.currentValue.value &&
this.clearButton));
};
List.prototype.render = function () {
return this.props.values.length > 3 ? this.dropdown() : this.radios();
};
List.propTypes = {
value: PropTypes.any,
defaultValue: PropTypes.any,
values: PropTypes.arrayOf(PropTypes.any),
onChange: PropTypes.func,
isRequired: PropTypes.bool,
};
return List;
}(React.Component));
export default List;
//# sourceMappingURL=list.js.map