?????????????? ?????????????? toggle.scss000064400000003275152405541100006726 0ustar00@import '../../../scss/base'; .et-core-control-toggle { $root: &; display: table; background: $catskill-white; border-radius: $border-radius; padding: 5px; box-sizing: border-box; transition: background-color $transition-duration $transition-timing-function, color $transition-duration $transition-timing-function; color: $cadet-blue; cursor: pointer; &[disabled], &[disabled] * { cursor: not-allowed; } &__label { color: inherit; font-family: $body-font; font-size: $modal-fontsize-content-allcaps; font-weight: $font-bold; text-align: center; text-transform: uppercase; display: table-cell; vertical-align: middle; min-width: 30px; height: 20px; position: relative; &--on { padding-right: 2.5px; } &--off { padding-left: 2.5px; } } &__text { transform: translateY(2px); margin-top: -3px; line-height: 1.6em; } &__handle { position: relative; background: $white; width: 100%; height: 20px; border-radius: $border-radius; box-shadow: 0 1px 3px rgba($black, 0.1); transition: all $transition-duration $transition-timing-function; position: absolute; top: 0; right: 0; } //ON STATE &--on { background: $info; color: $white; > #{$root}__label--on > #{$root}__handle { opacity: 0; transform: translateX(90%); box-shadow: none; } > #{$root}__label--off { color: transparent; } } //OFF STATE &--off { > #{$root}__label--off > #{$root}__handle { opacity: 0; transform: translateX(-90%); box-shadow: none; } > #{$root}__label--on { color: transparent; } } } toggle.jsx000064400000004535152405541100006557 0ustar00// External dependencies import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import noop from 'lodash/noop'; import isUndefined from 'lodash/isUndefined'; // Internal dependencies import './toggle.scss'; class ETCoreControlToggle extends PureComponent { static propTypes = { dataCy: PropTypes.string, }; static defaultProps = { value: 'off', _onChange: noop, }; _getDefaultValue() { return this.props.defaultValue || this.props.default; } _onChange = () => { const { name, value, _onChange, readonly } = this.props; const defaultValue = this._getDefaultValue(); const toggleFrom = !value && defaultValue ? defaultValue : value; const newValue = toggleFrom === 'on' ? 'off' : 'on'; if (! readonly) { _onChange(name, newValue); } }; render() { let { className, onClick, value, name, id, dataCy } = this.props; const defaultValue = this._getDefaultValue(); let isEqual = ! isUndefined(this.props.button_options) && 'equal' === this.props.button_options.button_type; const visualValue = !value && defaultValue ? defaultValue : value; let classes = classnames({ 'et-core-control-toggle': true, 'et-core-control-toggle--equal': isEqual, 'et-core-control-toggle--on': visualValue === 'on', 'et-core-control-toggle--off': ! visualValue || visualValue === 'off', }, className); if (!id && name) { id = `et-fb-${name}`; } let additional_attrs = {}; if (this.props.readonly) { additional_attrs.disabled = true; } return (
{this.props.options.on}
{this.props.options.off}
); } } export default ETCoreControlToggle;