Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/ui / dist / components / molecules / Toggle / renderProps.js
Size: Mime:
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const exotic_1 = require("exotic");

const Empty_1 = require("../../atoms/Empty");

const MaterialIcon_1 = require("../../atoms/MaterialIcon");

const deps_1 = require("../deps");

const styled_1 = require("./styled"); // NOTE: leaving this animated switch as is, everything else uses MaterialIcon


function defaultRenderSwitch(props) {
  const {
    isAnimated,
    isSelected,
    defaultLabel = 'ON',
    toggleLabel = 'OFF',
    defaultLabelDataQa,
    toggleLabelDataQa
  } = props;
  const attributes = {
    isSelected,
    isAnimated
  };
  const switchLabelView = react_1.default.createElement(styled_1.SwitchLabel, {
    "data-qa": isSelected === true ? defaultLabelDataQa : toggleLabelDataQa,
    content: isSelected === true ? defaultLabel : toggleLabel
  });
  return react_1.default.createElement(styled_1.SwitchIconWrapper, {
    isSelected: isSelected
  }, react_1.default.createElement(styled_1.StyledSwitchIcon, Object.assign({}, attributes)), switchLabelView);
}

function defaultRenderCheckBox(props) {
  const {
    isSelected,
    dataQa
  } = props;
  const breed = isSelected === true ? 'check_on' : 'check_off';
  const attributes = {
    type: breed,
    isSelected: isSelected,
    'data-qa': dataQa
  };
  return react_1.default.createElement(MaterialIcon_1.MaterialIcon, Object.assign({}, attributes));
}

function defaultRenderHeart(props) {
  const {
    isSelected,
    dataQa
  } = props;
  const breed = isSelected ? 'favorite' : 'favorite_border';
  const attributes = {
    type: breed,
    isSelected: isSelected,
    'data-qa': dataQa
  };
  return react_1.default.createElement(MaterialIcon_1.MaterialIcon, Object.assign({}, attributes));
}

function defaultRenderRadio(props) {
  const {
    isSelected,
    dataQa
  } = props;
  const breed = isSelected ? 'radio_on' : 'radio_off';
  const attributes = {
    type: breed,
    isSelected: isSelected,
    'data-qa': dataQa
  };
  return react_1.default.createElement(MaterialIcon_1.MaterialIcon, Object.assign({}, attributes));
} // NOTE: visually this is identical to the defaultRenderSwitch...


function defaultRenderToggle(props) {
  const {
    isSelected,
    dataQa
  } = props;
  const breed = isSelected ? 'toggle_on' : 'toggle_off';
  const attributes = {
    type: breed,
    isSelected: isSelected,
    'data-qa': dataQa
  };
  return react_1.default.createElement(MaterialIcon_1.MaterialIcon, Object.assign({}, attributes));
}

function defaultRenderIcon(props) {
  const {
    iconType,
    isSelected
  } = props;
  const dataQa = isSelected === true ? 'qa-facet-selected' : 'qa-facet';

  const switchIconType = type => {
    switch (type) {
      case 'checkbox':
        return defaultRenderCheckBox(Object.assign({}, props, {
          dataQa
        }));

      case 'switch':
        return defaultRenderSwitch(Object.assign({}, props, {
          dataQa
        }));

      case 'toggle':
        return defaultRenderToggle(Object.assign({}, props, {
          dataQa
        }));

      case 'heart':
        return defaultRenderHeart(Object.assign({}, props, {
          dataQa
        }));

      case 'radio':
      default:
        return defaultRenderRadio(Object.assign({}, props, {
          dataQa
        }));
    }
  };

  const iconView = switchIconType(iconType);
  return react_1.default.createElement(styled_1.IconWrapper, null, iconView);
}

exports.defaultRenderIcon = defaultRenderIcon;

function defaultRenderBeforeLabel(props) {
  return react_1.default.createElement(Empty_1.Empty, null);
}

exports.defaultRenderBeforeLabel = defaultRenderBeforeLabel;

function defaultRenderLabel(props) {
  const {
    label
  } = props;
  return exotic_1.isSafe(label) && react_1.default.createElement(styled_1.StyledLabel, null, label);
}

exports.defaultRenderLabel = defaultRenderLabel;

function defaultRenderAfterLabel(props) {
  return react_1.default.createElement(Empty_1.Empty, null);
}

exports.defaultRenderAfterLabel = defaultRenderAfterLabel;

function defaultRenderBox(props, state) {
  const {
    renderIcon,
    renderBeforeLabel,
    renderLabel,
    renderAfterLabel
  } = props,
        remainingProps = tslib_1.__rest(props, ["renderIcon", "renderBeforeLabel", "renderLabel", "renderAfterLabel"]);

  return react_1.default.createElement(react_1.default.Fragment, null, exotic_1.isFunction(renderIcon) && renderIcon(Object.assign({}, remainingProps, {
    isSelected: state.isSelected
  })), react_1.default.createElement(styled_1.LabelWrapper, null, exotic_1.isFunction(renderBeforeLabel) && renderBeforeLabel(remainingProps), exotic_1.isFunction(renderLabel) && renderLabel(remainingProps), exotic_1.isFunction(renderAfterLabel) && renderAfterLabel(remainingProps)));
}

exports.defaultRenderBox = defaultRenderBox;

function defaultRenderWrapper(props, state) {
  const {
    children,
    className,
    onToggle
  } = props;
  const passThroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa'],
    'aria-pressed': state.isSelected ? 'true' : 'false',
    role: 'button'
  });

  const handleClickEvent = event => {
    if (exotic_1.isFunction(onToggle)) {
      onToggle(event);
    }
  };

  const handleKeyDownEvent = event => {
    if (deps_1.isEnter(event)) {
      handleClickEvent(event);
    }
  };

  return react_1.default.createElement(styled_1.Wrapper, Object.assign({}, passThroughProps, {
    onClick: handleClickEvent,
    onKeyDown: handleKeyDownEvent,
    tabIndex: 0
  }), children);
}

exports.defaultRenderWrapper = defaultRenderWrapper; //# sourceMappingURL=renderProps.js.map