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 / src / playground / Button / deps.js
Size: Mime:
"use strict";

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

const exotic_1 = require("exotic");

const fixture_1 = require("./fixture");

function toIconOrderClassName(props) {
  const {
    iconOrder
  } = props;

  switch (iconOrder) {
    case 'left':
      return -1;

    case 'right':
      return 10;

    default:
      return iconOrder;
  }
}

exports.toIconOrderClassName = toIconOrderClassName;

function makeButtonState(props) {// const state = {
  //   isFocused: !!props.isFocused,
  //   isDisabled: !!props.is
  // }
  // handleBlur = event => {
  // }
  // handleFocus = event => {
  // }
}

exports.makeButtonState = makeButtonState;
/**
 * ========= group 1 =========
 */
// this.hasSnackbar === true

function isAnimated(props) {
  return props.isAnimated === true || props.hasAnimation === true || props.shouldAnimate === true;
}

exports.isAnimated = isAnimated;

function isDisabled(props) {
  return props.states === 'disabled' || props.isDisabled;
}

exports.isDisabled = isDisabled;

function isSelected(props, state) {
  return props.states === 'selected' || props.isSelected || state.isSelected;
}

exports.isSelected = isSelected;

function isFocused(props, state) {
  return props.states === 'focused' || props.isFocused || state.isFocused;
}

exports.isFocused = isFocused;

function isResting(props, state) {
  return props.states === 'resting' || props.isResting || state.isResting;
}

exports.isResting = isResting;

function isPushed(props, state) {
  return props.states === 'pushed' || props.isPushed || state.isPushed;
}

exports.isPushed = isPushed;

function isCenter(props) {
  return Boolean(props.center || props.isCenter);
}

exports.isCenter = isCenter;

function isLink(props) {
  return props.to !== undefined || props.isLink === true;
}

exports.isLink = isLink;

function isGhost(props) {
  return props.ghost || props.isGhost;
}

exports.isGhost = isGhost;

function isIconLeft(props) {
  return props.iconOrder === 'left' || !!props.iconOrder;
}

exports.isIconLeft = isIconLeft;

function isIconRight(props) {
  return props.iconOrder === 'right' || !!props.iconOrder;
}

exports.isIconRight = isIconRight;
/**
 * @alias isSecondary
 * ^ (on a secondary button color......)
 *
 * @description makes it gray but not disabled, or less attention
 */

function isLowPriority(props) {
  return props.isLowPriority;
}

exports.isLowPriority = isLowPriority;

function hasSnackbar(props) {
  return Boolean(props.snackbarText !== undefined || props.snackbar !== undefined || props.onSnackbarClose !== undefined || props.onSnacbkarUndo !== undefined || props.snackbarTimeout !== undefined);
}

exports.hasSnackbar = hasSnackbar;

function toRemappedProps(props, state = exotic_1.EMPTY_OBJ) {
  return {
    isAnimated: isAnimated(props),
    isDisabled: isDisabled(props),
    isSelected: isSelected(props, state),
    isFocused: isFocused(props, state),
    isResting: isResting(props, state),
    isPushed: isPushed(props, state),
    isLowPriority: isLowPriority(props),
    isLink: isLink(props),
    isCenter: isCenter(props),
    isGhost: isGhost(props),
    hasSnackbar: hasSnackbar(props),
    // yagni icon top bottom center - but it's used in mobile menu
    isIconLeft: isIconLeft(props),
    isIconRight: isIconRight(props),
    // @todo this one is from the component...
    eventHandlers: props.eventHandlers,
    renderSnackbar: props.renderSnackbar,
    renderIconAndText: props.renderIconAndText,
    render: props.render
  };
}

exports.toRemappedProps = toRemappedProps;
/**
 * @todo right, left... ?
 */

function toButtonClassName(props) {
  // const extendedClassName = this.extendedClassName || this.props.extendedClassName || ''
  const defaultClassName = props.defaultClassName || '';
  const className = props.className || '';
  const isSquare = props.isSquare;
  const squareClass = isSquare ? fixture_1.classes.default : '';
  const states = props.states;
  const iconOrder = props.iconOrder;
  const dynamic = {
    // ...priority 1-3?
    // [classes.isHighPriority]: this.isHighPriority,
    [fixture_1.classes.isIconLeft]: iconOrder === 'left' || !!iconOrder,
    [fixture_1.classes.isIconRight]: iconOrder === 'right' || !!iconOrder,
    [fixture_1.classes.isGhost]: isGhost,
    [fixture_1.classes.isLowPriority]: isLowPriority,
    [fixture_1.classes.isSelected]: isSelected,
    [fixture_1.classes.isDisabled]: isDisabled,
    [fixture_1.classes.isFocused]: isFocused,
    [fixture_1.classes.isResting]: isResting,
    [fixture_1.classes.isPushed]: isPushed,
    [fixture_1.classes.center]: isCenter
  }; // 'button'  - messes  a lot
  // return toClassName(defaultClassName, squareClass, className, dynamic, extendedClassName)
  // return classnames(defaultClassName, className, this.props.class || '')
}

exports.toButtonClassName = toButtonClassName;
/**
 * ========= group 2 =========
 */

function toRole(props) {
  return exotic_1.isString(props.role) ? props.role : isLink(props) === true ? 'link' : 'button';
}

exports.toRole = toRole;
/**
 * @todo toIdentifier(this, 'button')
 */

function toIdentifier(props) {
  return props.identifier || props.id;
}

exports.toIdentifier = toIdentifier;

function toChildren(props) {
  return props.text || props.value || props.children;
}

exports.toChildren = toChildren;

function toLabel(props) {
  // || humanize(props.className) || throw new Error()
  return props['aria-label'] || props.label || toChildren(props);
}

exports.toLabel = toLabel;

function toTabIndex(props) {
  if (props.tabIndex !== undefined) {
    return props.tabIndex;
  } else if (props.isPresentational === true) {
    /**
     * @example a list of images like on the carousell,
     *          you want to tab each image,
     *          not tab the navigation
     */
    return undefined;
  } else {
    return '0';
  } // return '-1' ?

}

exports.toTabIndex = toTabIndex;
/**
 * @alias toFinalProps
 * @alias toPassThroughProps
 * @alias attributeProps
 */

function toPassThroughProps(props) {
  // style
  const {
    className,
    role,
    tabIndex
  } = toAttributes(props);
  const attributes = {
    className
  };

  if (tabIndex !== undefined) {// attributes.style = style
  }

  if (tabIndex !== undefined) {
    attributes.tabIndex = tabIndex;
  }

  if (props.onSubmit !== undefined) {
    attributes.onSubmit = props.onSubmit;
  } // next will be <link


  if (role !== 'button') {
    attributes.role = role;
  }

  return attributes;
} // unused


function toStyles(props) {
  if (exotic_1.isReal(props.styled)) {
    return props.styled;
  } else if (exotic_1.isString(props.height) || exotic_1.isString(props.width)) {
    return {
      height: props.height,
      width: props.width
    };
  } else {
    return {};
  }
}

exports.toStyles = toStyles; // eslint-disable-next-line

function toAttributes(props, state) {
  // const text = renderText(props, state)
  // @todo !!!!!! but may not want to do it here
  // const value = renderIconAndText(props, state)
  return Object.assign({}, props, toRemappedProps(props), {
    // value,
    identifier: toIdentifier(props),
    children: toChildren(props),
    label: toLabel(props),
    hasSnackbar: hasSnackbar(props),
    tabIndex: toTabIndex(props),
    role: toRole(props)
  });
}

exports.toAttributes = toAttributes;
/**
 * @todo tabindex for -1 inside of expandable divs
 *
 * @todo aria-flowto for compare & modal
 * https://www.w3.org/TR/wai-aria/states_and_properties#aria-flowto
 *
 * @todo aria-controls
 * https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls
 *
 * @todo aria-busy
 * https://www.w3.org/TR/wai-aria/states_and_properties#aria-busy
 */

function toAccessibleAttributes(props, state) {
  const label = toLabel(props);
  const role = toRole(props);
  const accessibleAttributes = {
    // @todo isToggle for toggle states
    // 'aria-label': this.label,
    // can use for controlledby and controls
    id: toIdentifier(props)
  };

  if (exotic_1.isString(label)) {
    accessibleAttributes['aria-label'] = label;
  }

  if (role !== 'link') {
    accessibleAttributes['aria-pressed'] = state.isActive;
  } // should be `qa`?


  if (exotic_1.isString(props.dataQa)) {
    accessibleAttributes['data-qa'] = props.dataQa;
  }

  return accessibleAttributes;
}

exports.toAccessibleAttributes = toAccessibleAttributes; //# sourceMappingURL=deps.js.map