Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import React from 'react';
import PropTypes from 'prop-types';
import {uniqueId} from '../utilities/helpers';
/**
* SLDS Checkbox Toggle (Base)
* Reference: https://v1.lightningdesignsystem.com/components/checkbox-toggle/#Base
*/
const CheckboxToggle = ({
id,
name,
label,
checked,
defaultChecked,
disabled = false,
onChange,
onLabel = 'Enabled',
offLabel = 'Disabled',
ariaDescribedBy,
}) => {
const inputId = id || uniqueId('checkbox-toggle-');
const describedById = ariaDescribedBy || `${inputId}-desc`;
const handleChange = (e) => {
if (onChange) {
onChange(e, { checked: e.target.checked });
}
};
// Controlled vs uncontrolled props
const checkedProps =
typeof checked === 'boolean' ? { checked } : { defaultChecked: defaultChecked };
return (
<div className="slds-form-element">
<label className={`slds-checkbox_toggle slds-grid${disabled ? ' slds-is-disabled' : ''}`} htmlFor={inputId}>
{label ? (
<span className="slds-form-element__label slds-m-bottom_none">{label}</span>
) : (
<span className="slds-assistive-text">Toggle</span>
)}
<input
type="checkbox"
id={inputId}
name={name}
disabled={disabled}
aria-describedby={describedById}
onChange={handleChange}
{...checkedProps}
/>
<span id={describedById} className="slds-checkbox_faux_container" aria-live="assertive">
<span className="slds-checkbox_faux" />
<span className="slds-checkbox_on">{onLabel}</span>
<span className="slds-checkbox_off">{offLabel}</span>
</span>
</label>
</div>
);
};
CheckboxToggle.propTypes = {
id: PropTypes.string,
name: PropTypes.string,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
checked: PropTypes.bool,
defaultChecked: PropTypes.bool,
disabled: PropTypes.bool,
onChange: PropTypes.func,
onLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
offLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
ariaDescribedBy: PropTypes.string,
};
export default CheckboxToggle;
|