material-motion
Version:
Makes it easy to add rich, interactive motion to your application.
59 lines • 2.82 kB
JavaScript
/** @license
* Copyright 2016 - present The Material Motion Authors. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*/
import * as tslib_1 from "tslib";
import { combineLatest, } from '../combineLatest';
// TODO(#250): Merge StyleStreams and csstype
export function combineStyleStreams(styleStreams) {
return combineLatest(stripStreamSuffices(styleStreams), { waitForAllValues: false })._debounce()._map({
transform: (_a) => {
var { willChange = '', opacity = 1, translate = { x: 0, y: 0 }, rotate = 0, scale = 1, borderRadius = '', transformOrigin = { x: 0, y: 0 }, dimensions = {} } = _a, passthrough = tslib_1.__rest(_a, ["willChange", "opacity", "translate", "rotate", "scale", "borderRadius", "transformOrigin", "dimensions"]);
return (Object.assign({}, passthrough, { borderRadius: Array.isArray(borderRadius)
? borderRadius.map(appendPixels).join(' ')
: borderRadius, opacity: typeof opacity === 'number'
? Number(opacity.toFixed(3))
: opacity, transform: buildTransformString({ translate, rotate, scale }), transformOrigin: `${appendPixels(transformOrigin.x)} ${appendPixels(transformOrigin.y)}`, width: appendPixels(dimensions.width || passthrough.width), height: appendPixels(dimensions.height || passthrough.height), willChange }));
}
});
}
export default combineStyleStreams;
export function buildTransformString({ translate: { x: translateX = 0, y: translateY = 0 } = {}, rotate = 0, scale = 1, }) {
return `
translate(${appendPixels(translateX)}, ${appendPixels(translateY)})
rotate(${appendRadians(rotate)})
scale(${scale})
`;
}
export function applySuffix(value, suffix = '') {
if (typeof value === 'number') {
return value + suffix;
}
return value;
}
// Poor-man's currying
export function appendPixels(value) {
return applySuffix(value, 'px');
}
export function appendRadians(value) {
return applySuffix(value, 'rad');
}
function stripStreamSuffices(dictWithSufficies) {
const result = {};
Object.keys(dictWithSufficies).forEach(key => {
result[key.replace('$', '')] = dictWithSufficies[key];
});
return result;
}
//# sourceMappingURL=combineStyleStreams.js.map