Repository URL to install this package:
|
Version:
2.0.4 ▾
|
"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