@geneui/components
Version:
The Gene UI components library designed for BI tools
194 lines (189 loc) • 8.61 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { forwardRef, useRef, useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { c as checkboxRadioSwitcherConfig } from '../configs-00612ce0.js';
import { n as noop, i as interceptValue } from '../index-a0e4e333.js';
import useKeyDown from '../hooks/useKeyDown.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import { g as guid } from '../guid-8ddf77b3.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .switcher-element{--size:1.8rem;align-items:center;background:rgba(var(--background-sc-rgb),.38);border:1px solid #0000;border-radius:2rem;color:var(--background);cursor:pointer;display:flex;font:600 .8rem/1rem var(--font-family);height:var(--size);justify-content:center;min-width:calc(var(--size)*2);padding-inline-end:.3rem;padding-inline-start:var(--size);position:relative;transition:color .2s,background .2s,border-color .2s,min-width .2s,height .2s}[data-gene-ui-version=\"2.16.5\"] .switcher-element small{background:var(--background);border-radius:1.4rem;box-shadow:0 .2rem .4rem 0 #00000029;height:calc(var(--size) - 4px);position:absolute;top:1px;transition:width .2s,left .2s,right .2s,transform .2s,background .2s,box-shadow .2s;width:calc(var(--size) - 4px)}html:not([dir=rtl]) .switcher-element small{left:1px}html[dir=rtl] .switcher-element small{right:1px}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .crs-component .switcher-element:hover,[data-gene-ui-version=\"2.16.5\"] .crs-holder:focus-within .switcher-element,[data-gene-ui-version=\"2.16.5\"] .crs-label:hover~.crs-component .switcher-element{color:#0000}[data-gene-ui-version=\"2.16.5\"] .crs-component .switcher-element:hover small,[data-gene-ui-version=\"2.16.5\"] .crs-holder:focus-within .switcher-element small,[data-gene-ui-version=\"2.16.5\"] .crs-label:hover~.crs-component .switcher-element small{width:var(--size)}}[data-gene-ui-version=\"2.16.5\"] .switcher-element.active{background:var(--hero);color:var(--hero-sc);padding-inline-end:var(--size);padding-inline-start:.3rem}[data-gene-ui-version=\"2.16.5\"] .switcher-element.active small{background:var(--hero-sc);transform:translateX(-100%)}html:not([dir=rtl]) .switcher-element.active small{left:calc(100% - 1px)}html[dir=rtl] .switcher-element.active small{right:calc(100% - 1px);transform:translateX(100%)}[data-gene-ui-version=\"2.16.5\"] .switcher-element.s-big{--size:2rem}[data-gene-ui-version=\"2.16.5\"] .switcher-element.error-color{background:var(--danger);color:var(--danger-sc)}[data-gene-ui-version=\"2.16.5\"] .switcher-element.error-color small{background:var(--danger-sc)}[data-gene-ui-version=\"2.16.5\"] .switcher-element.read-only{background:none;border-color:rgba(var(--background-sc-rgb),.38);color:rgba(var(--background-sc-rgb),.38)}[data-gene-ui-version=\"2.16.5\"] .switcher-element.read-only small{background:rgba(var(--background-sc-rgb),.38);box-shadow:none}[data-gene-ui-version=\"2.16.5\"] .switcher-element.read-only.active{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .switcher-element.read-only.active small{background:var(--hero)}";
styleInject(css_248z);
const Switcher = /*#__PURE__*/forwardRef((props, ref) => {
const {
onText,
offText,
size,
label,
labelPosition,
labelAlignment,
description,
readOnly,
disabled,
required,
isValid,
errorText,
defaultChecked,
onChange,
changeOnEnter,
value,
className,
...restProps
} = props;
const containerRef = useRef(null);
const [checkedState, setCheckedState] = useState(defaultChecked);
const isControlled = ('checked' in props);
const checked = isControlled ? props.checked : checkedState;
const randomId = useMemo(guid, []);
const handleChange = e => {
const {
checked
} = e.target;
!isControlled && setCheckedState(checked);
onChange(interceptValue(e, value));
};
const hasError = !isValid;
/*
* Change value on Enter key down
*/
useKeyDown(e => {
if (changeOnEnter) {
setCheckedState(checked => !checked);
onChange(interceptValue(e, value));
}
}, [value, onChange], containerRef, ['Enter']);
return /*#__PURE__*/React__default.createElement("div", {
ref: containerRef,
className: classnames('crs-holder', className, "lp-".concat(labelPosition), "la-".concat(labelAlignment), {
disabled,
error: hasError,
'read-only': readOnly
})
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('label-holder', {
'has-label': !!label
})
}, label && /*#__PURE__*/React__default.createElement("div", {
className: "crs-item crs-label"
}, /*#__PURE__*/React__default.createElement("label", {
className: "ellipsis-text",
htmlFor: randomId
}, required && "* ", label)), /*#__PURE__*/React__default.createElement("div", {
className: "crs-item crs-component"
}, /*#__PURE__*/React__default.createElement("input", _extends({
type: "checkbox",
onChange: handleChange,
checked: checked,
disabled: disabled,
value: value,
ref: ref,
id: randomId
}, restProps)), /*#__PURE__*/React__default.createElement("label", {
className: classnames('switcher-element', "s-".concat(size), {
active: checked,
'error-color': !checked && !errorText && hasError,
'read-only': readOnly
}),
htmlFor: randomId
}, /*#__PURE__*/React__default.createElement("span", null, checked ? onText : offText), /*#__PURE__*/React__default.createElement("small", null)))), hasError && errorText && /*#__PURE__*/React__default.createElement("div", {
className: "information-message color-danger"
}, errorText), description && /*#__PURE__*/React__default.createElement("div", {
className: "input-description"
}, description));
});
Switcher.propTypes = {
/**
* Text to be written when on
*/
onText: PropTypes.string,
/**
* Text to be written when off
*/
offText: PropTypes.string,
/**
* Control Switcher state with this prop. When component is controled it will not switch automatically
*/
checked: PropTypes.bool,
/**
* Switcher size
*/
size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
/**
* Will add a label for switcher. Any valid React node
*/
label: PropTypes.node,
/**
* Specify label position
*/
labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
/**
* Specify label alignment
*/
labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
/**
* Will add a description for switcher. Any valid React node
*/
description: PropTypes.node,
/**
* Switcher will become readonly when set to "true"
*/
readOnly: PropTypes.bool,
/**
* Switcher will change when Enter key pressed (note: its will not work inside of form component)
*/
changeOnEnter: PropTypes.bool,
/**
* Switcher will become disabled when set to "true"
*/
disabled: PropTypes.bool,
/**
* Switcher will add an extra asterix to the "label". For more info see "ValidatableSwitcher"(integrated Radio with "Form" organism).
*/
required: PropTypes.bool,
/**
* Control Switcher validation. For more info see "ValidatableSwitcher"(integrated Radio with "Form" organism).
*/
isValid: PropTypes.bool,
/**
* Shows error text when "isValid" is set to "false".
*/
errorText: PropTypes.string,
/**
* This prop will only applied once as defaultState for "checked" when Swticher mounts.
* Note that specifing this prop is not mean controlling it.
*/
defaultChecked: PropTypes.bool,
/**
* Fires an event when Switcher changes checked state((event: Event) => void).
*/
onChange: PropTypes.func,
/**
* Pass a value to Switcher and get it back within "onChange" event
*/
value: PropTypes.any,
/**
* Additional className
*/
className: PropTypes.string
};
Switcher.defaultProps = {
onText: '',
offText: '',
size: checkboxRadioSwitcherConfig.size[0],
label: '',
labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0],
description: '',
readOnly: false,
onChange: noop,
disabled: false,
required: false,
isValid: true,
errorText: '',
defaultChecked: false
};
export { Switcher as default };