wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
106 lines • 5.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
var Close_1 = tslib_1.__importDefault(require("../../icons/Close"));
var dropdown_1 = tslib_1.__importDefault(require("../../ui/dropdown"));
var radio_group_1 = tslib_1.__importDefault(require("../../ui/radio-group"));
var button_1 = tslib_1.__importDefault(require("./button"));
var no_value_type_1 = tslib_1.__importDefault(require("../../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) {
tslib_1.__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_1.default);
});
};
_this.clearIcon = (react_1.default.createElement("span", { onClick: _this.clearValue, style: { color: '#3899ec', cursor: 'pointer', marginLeft: '-20px' }, children: react_1.default.createElement(Close_1.default, { size: "7px" }) }));
_this.clearButton = (react_1.default.createElement("div", { style: { padding: '1em 0' } },
react_1.default.createElement(button_1.default, { 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_1.default.createElement(dropdown_1.default, { 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_1.default.createElement("div", null,
react_1.default.createElement(radio_group_1.default, { 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: prop_types_1.default.any,
defaultValue: prop_types_1.default.any,
values: prop_types_1.default.arrayOf(prop_types_1.default.any),
onChange: prop_types_1.default.func,
isRequired: prop_types_1.default.bool,
};
return List;
}(react_1.default.Component));
exports.default = List;
//# sourceMappingURL=list.js.map