baseui
Version:
A React Component library implementing the Base design language
347 lines (344 loc) • 11.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledRoot = exports.StyledProgressBarRoundedTrackForeground = exports.StyledProgressBarRoundedTrackBackground = exports.StyledProgressBarRoundedText = exports.StyledProgressBarRoundedSvg = exports.StyledProgressBarRoundedRoot = exports.StyledLabel = exports.StyledInfiniteBar = exports.StyledBarProgress = exports.StyledBarContainer = exports.StyledBar = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @ts-ignore
function getBarHeight(size) {
// @ts-ignore
return {
[_constants.SIZE.small]: '2px',
[_constants.SIZE.medium]: '4px',
[_constants.SIZE.large]: '8px'
}[size];
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', props => {
return {
width: '100%'
};
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledBarContainer = exports.StyledBarContainer = (0, _styles.styled)('div', props => {
const {
$theme
} = props;
const {
sizing
} = $theme;
return {
display: 'flex',
marginLeft: sizing.scale500,
marginRight: sizing.scale500,
marginTop: sizing.scale500,
marginBottom: sizing.scale500
};
});
StyledBarContainer.displayName = "StyledBarContainer";
StyledBarContainer.displayName = 'StyledBarContainer';
const StyledBar = exports.StyledBar = (0, _styles.styled)('div', props => {
const {
$theme,
$size,
$steps
} = props;
const {
colors,
sizing,
borders
} = $theme;
const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
return {
borderTopLeftRadius: borderRadius,
borderTopRightRadius: borderRadius,
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius,
backgroundColor: colors.backgroundTertiary,
height: getBarHeight($size),
flex: 1,
overflow: 'hidden',
// @ts-ignore
...($steps < 2 ? {} : {
marginLeft: sizing.scale300,
':first-child': {
marginLeft: '0'
}
})
};
});
StyledBar.displayName = "StyledBar";
StyledBar.displayName = 'StyledBar';
const StyledBarProgress = exports.StyledBarProgress = (0, _styles.styled)('div', props => {
const {
$theme,
$value,
$successValue,
$steps,
$index,
$maxValue,
$minValue = 0
} = props;
// making sure this doesn't break existing use that use StyledBarProgress directly
const maxValue = $maxValue ? $maxValue : $successValue;
const {
colors,
sizing,
borders
} = $theme;
const width = `${100 - ($value - $minValue) * 100 / (maxValue - $minValue)}%`;
const stepStates = {
default: 'default',
awaits: 'awaits',
inProgress: 'inProgress',
completed: 'completed'
};
let stepState = stepStates.default;
if ($steps > 1) {
const stepValue = (maxValue - $minValue) / $steps;
const currentValue = ($value - $minValue) / (maxValue - $minValue) * 100;
const completedSteps = Math.floor(currentValue / stepValue);
if ($index < completedSteps) {
stepState = stepStates.completed;
} else if ($index === completedSteps) {
stepState = stepStates.inProgress;
} else {
stepState = stepStates.awaits;
}
}
const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
const animationStyles = {
transform: `translateX(-${width})`
};
const stepAnimationStyles = stepState === stepStates.inProgress ? {
animationDuration: '2.1s',
animationIterationCount: 'infinite',
animationTimingFunction: $theme.animation.linearCurve,
animationName: {
'0%': {
transform: 'translateX(-102%)',
opacity: 1
},
'50%': {
transform: 'translateX(0%)',
opacity: 1
},
'100%': {
transform: 'translateX(0%)',
opacity: 0
}
}
} : stepState === stepStates.completed ? {
transform: 'translateX(0%)'
} : {
transform: 'translateX(-102%)'
};
return {
borderTopLeftRadius: borderRadius,
borderTopRightRadius: borderRadius,
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius,
backgroundColor: colors.backgroundAccent,
height: '100%',
width: '100%',
transform: 'translateX(-102%)',
transition: 'transform 0.5s',
...($steps > 1 ? stepAnimationStyles : animationStyles)
};
});
StyledBarProgress.displayName = "StyledBarProgress";
StyledBarProgress.displayName = 'StyledBarProgress';
const StyledInfiniteBar = exports.StyledInfiniteBar = (0, _styles.styled)('div', props => {
const {
$theme,
$isLeft = false,
$size = _constants.SIZE.medium
} = props;
const {
colors,
sizing,
borders
} = $theme;
const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
const height = getBarHeight($size);
const animationStyles = {
display: 'inline-block',
flex: 1,
marginLeft: 'auto',
marginRight: 'auto',
transitionProperty: 'background-position',
animationDuration: '1.5s',
animationIterationCount: 'infinite',
animationTimingFunction: $theme.animation.linearCurve,
backgroundSize: '300% auto',
backgroundRepeat: 'no-repeat',
backgroundPositionX: $isLeft ? '-50%' : '150%',
backgroundImage: `linear-gradient(${$isLeft ? '90' : '270'}deg, transparent 0%, ${colors.backgroundAccent} 25%, ${colors.backgroundAccent} 75%, transparent 100%)`,
animationName: $isLeft ? {
'0%': {
backgroundPositionX: '-50%'
},
'33%': {
backgroundPositionX: '50%'
},
'66%': {
backgroundPositionX: '50%'
},
'100%': {
backgroundPositionX: '150%'
}
} : {
'0%': {
backgroundPositionX: '150%'
},
'33%': {
backgroundPositionX: '50%'
},
'66%': {
backgroundPositionX: '50%'
},
'100%': {
backgroundPositionX: '-50%'
}
}
};
return {
...($isLeft ? {
borderTopLeftRadius: borderRadius,
borderBottomLeftRadius: borderRadius
} : {
borderTopRightRadius: borderRadius,
borderBottomRightRadius: borderRadius
}),
height,
...animationStyles
};
});
StyledInfiniteBar.displayName = "StyledInfiniteBar";
StyledInfiniteBar.displayName = 'StyledInfiniteBar';
const StyledLabel = exports.StyledLabel = (0, _styles.styled)('div', props => {
return {
textAlign: 'center',
...props.$theme.typography.font150,
color: props.$theme.colors.contentTertiary
};
});
StyledLabel.displayName = "StyledLabel";
StyledLabel.displayName = 'StyledLabel';
const PROGRESS_BAR_ROUNDED_SIZES = {
[_constants.SIZE.large]: {
d: 'M47.5 4H71.5529C82.2933 4 91 12.9543 91 24C91 35.0457 82.2933 44 71.5529 44H23.4471C12.7067 44 4 35.0457 4 24C4 12.9543 12.7067 4 23.4471 4H47.5195',
width: 95,
height: 48,
strokeWidth: 8,
typography: 'LabelLarge'
},
[_constants.SIZE.medium]: {
d: 'M39 2H60.5833C69.0977 2 76 9.16344 76 18C76 26.8366 69.0977 34 60.5833 34H17.4167C8.90228 34 2 26.8366 2 18C2 9.16344 8.90228 2 17.4167 2H39.0195',
width: 78,
height: 36,
strokeWidth: 4,
typography: 'LabelMedium'
},
[_constants.SIZE.small]: {
d: 'M32 1H51.6271C57.9082 1 63 6.37258 63 13C63 19.6274 57.9082 25 51.6271 25H12.3729C6.09181 25 1 19.6274 1 13C1 6.37258 6.09181 1 12.3729 1H32.0195',
width: 64,
height: 26,
strokeWidth: 2,
typography: 'LabelSmall'
}
};
const StyledProgressBarRoundedRoot = exports.StyledProgressBarRoundedRoot = (0, _styles.styled)('div', ({
$size,
$inline
}) => {
return {
width: PROGRESS_BAR_ROUNDED_SIZES[$size].width + 'px',
height: PROGRESS_BAR_ROUNDED_SIZES[$size].height + 'px',
position: 'relative',
display: $inline ? 'inline-flex' : 'flex',
alignItems: 'center',
justifyContent: 'center'
};
});
StyledProgressBarRoundedRoot.displayName = "StyledProgressBarRoundedRoot";
StyledProgressBarRoundedRoot.displayName = 'StyledProgressBarRoundedRoot';
const _StyledProgressBarRoundedSvg = (0, _styles.styled)('svg', ({
$size
}) => {
return {
width: PROGRESS_BAR_ROUNDED_SIZES[$size].width + 'px',
height: PROGRESS_BAR_ROUNDED_SIZES[$size].height + 'px',
position: 'absolute',
fill: 'none'
};
});
_StyledProgressBarRoundedSvg.displayName = "_StyledProgressBarRoundedSvg";
_StyledProgressBarRoundedSvg.displayName = '_StyledProgressBarRoundedSvg';
const StyledProgressBarRoundedSvg = exports.StyledProgressBarRoundedSvg = (0, _styles.withWrapper)(_StyledProgressBarRoundedSvg, Styled => function StyledProgressBarRoundedSvg(props) {
return /*#__PURE__*/_react.default.createElement(Styled, _extends({
viewBox: `0 0 ${PROGRESS_BAR_ROUNDED_SIZES[props.$size].width} ${PROGRESS_BAR_ROUNDED_SIZES[props.$size].height}`,
xmlns: "http://www.w3.org/2000/svg"
}, props));
});
const _StyledProgressBarRoundedTrackBackground = (0, _styles.styled)('path', ({
$theme,
$size
}) => {
return {
stroke: $theme.colors.backgroundTertiary,
strokeWidth: PROGRESS_BAR_ROUNDED_SIZES[$size].strokeWidth + 'px'
};
});
_StyledProgressBarRoundedTrackBackground.displayName = "_StyledProgressBarRoundedTrackBackground";
_StyledProgressBarRoundedTrackBackground.displayName = '_StyledProgressBarRoundedTrackBackground';
const StyledProgressBarRoundedTrackBackground = exports.StyledProgressBarRoundedTrackBackground = (0, _styles.withWrapper)(_StyledProgressBarRoundedTrackBackground, Styled => function StyledProgressBarRoundedSvg(props) {
return /*#__PURE__*/_react.default.createElement(Styled, _extends({
d: PROGRESS_BAR_ROUNDED_SIZES[props.$size].d
}, props));
});
const _StyledProgressBarRoundedTrackForeground = (0, _styles.styled)('path', ({
$theme,
$size,
$visible
}) => {
return {
visibility: $visible ? 'visible' : 'hidden',
stroke: $theme.colors.borderAccent,
strokeWidth: PROGRESS_BAR_ROUNDED_SIZES[$size].strokeWidth + 'px'
};
});
_StyledProgressBarRoundedTrackForeground.displayName = "_StyledProgressBarRoundedTrackForeground";
_StyledProgressBarRoundedTrackForeground.displayName = '_StyledProgressBarRoundedTrackForeground';
const StyledProgressBarRoundedTrackForeground = exports.StyledProgressBarRoundedTrackForeground = (0, _styles.withWrapper)(_StyledProgressBarRoundedTrackForeground, Styled => function StyledProgressBarRoundedSvg(props) {
return /*#__PURE__*/_react.default.createElement(Styled, _extends({
d: PROGRESS_BAR_ROUNDED_SIZES[props.$size].d
// We're using inline styles here to avoid the change on the class name on every update
,
style: {
strokeDasharray: props.$pathLength,
strokeDashoffset: props.$pathLength * (1 - props.$pathProgress) + ''
}
}, props));
});
const StyledProgressBarRoundedText = exports.StyledProgressBarRoundedText = (0, _styles.styled)('div', ({
$theme,
$size
}) => {
return {
color: $theme.colors.contentPrimary,
// @ts-ignore
...$theme.typography[PROGRESS_BAR_ROUNDED_SIZES[$size].typography]
};
});
StyledProgressBarRoundedText.displayName = "StyledProgressBarRoundedText";
StyledProgressBarRoundedText.displayName = 'StyledProgressBarRoundedText';