chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
154 lines (149 loc) • 6.38 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _Icon = _interopRequireDefault(require("../../react-chayns-icon/component/Icon"));
require("./FilterButton.css");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
const isValue = val => typeof val !== 'undefined' && val !== null;
const PREFIX = 'CC_FB_';
let currentId = 0;
/**
* A chip-like component that is used to filter lists. Usually used in a group
* of 2 or more.
*/
const FilterButton = _ref => {
let {
icon,
label,
count,
checked = false,
onChange,
name,
value,
className,
style,
id,
disabled = false,
stopPropagation = false,
small = false,
rectangular = false
} = _ref;
const htmlId = (0, _react.useRef)(id || `${PREFIX}${currentId += 1}`);
if (!isValue(label) && !isValue(icon)) {
return null;
}
const captureClick = stopPropagation ? e => e.stopPropagation() : undefined;
return (
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
_react.default.createElement("label", {
className: (0, _clsx.default)(className, 'button--filter', checked && 'button--filter--active' + (!className ? " chayns__color--headline" : ""), disabled && 'button--filter--disabled', small && 'button--filter--small', rectangular && 'button--filter--rectangular'),
style: style,
htmlFor: htmlId.current,
onClick: captureClick
}, /*#__PURE__*/_react.default.createElement("input", {
id: htmlId.current,
type: name ? 'radio' : 'checkbox',
name: name,
className: "button--filter__input",
onChange: e => {
if (onChange) {
if (e.target.type === 'checkbox') {
onChange(e.target.checked, htmlId.current);
} else {
onChange(isValue(value) ? value : e.target.value);
}
}
},
checked: checked,
disabled: disabled
}), /*#__PURE__*/_react.default.createElement("span", {
className: "label chayns__color--text"
}, icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: icon,
className: "button--filter__icon chayns__color--headlinei"
}) : null, isValue(label) ? /*#__PURE__*/_react.default.createElement("span", null, label) : null, isValue(count) ? /*#__PURE__*/_react.default.createElement("b", null, count) : null))
);
};
FilterButton.propTypes = {
/**
* A string or `ReactNode` that is shown inside of the filter button.
*/
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.element]),
/**
* A number that is shown in bold on the right side of the button.
*/
count: _propTypes.default.number,
/**
* A function that will be called when the state of the button changes.
*/
onChange: _propTypes.default.func,
/**
* Wether the button is checked or not.
*/
checked: _propTypes.default.bool,
/**
* Multiple filter buttons with the same name belong to one group. Only one
* of the buttons in a group can be active at one time.
*/
name: _propTypes.default.string,
/**
* The value that is provided as the first argument to the
* `onChanged`-callback when the `name`-property is set.
*/
value: _propTypes.default.any,
// eslint-disable-line react/forbid-prop-types
/**
* An icon that will be shown in the button. Use a FontAwesome icon like
* this: `"fa fa-plane"`.
*/
icon: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.shape({
iconName: _propTypes.default.string.isRequired,
prefix: _propTypes.default.string.isRequired
}).isRequired]),
/**
* A classname string that will be set on the `<label>`-element. To change
* the color of the filter button give it a class that sets the CSS
* `color`-attribute, not `background-color`.
*/
className: _propTypes.default.string,
/**
* A React style object that will be applied to the `<label>`-element. To
* change the color of the filter button, add a `color`-style attribute to
* the button, not `background-color`.
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
/**
* An HTML id that will be set on the (invisible) `<input>`-element. This is
* given as the second argument to onChange if `name` is unset.
*/
id: _propTypes.default.string,
/**
* Disables any interaction and renders the filter button as disabled.
*/
disabled: _propTypes.default.bool,
/**
* Wether to stop propagation of click events to parent elements.
*/
stopPropagation: _propTypes.default.bool,
/**
* Shrinks the filter button in size.
*/
small: _propTypes.default.bool,
/**
* Changes the filter button shape to that of a button.
*/
rectangular: _propTypes.default.bool
};
FilterButton.displayName = 'FilterButton';
var _default = FilterButton;
exports.default = _default;
//# sourceMappingURL=FilterButton.js.map