material-motion-views-dom
Version:
DOM support for Material Motion
66 lines • 3.1 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.
*/
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const material_motion_1 = require("material-motion");
// TODO(#250): Merge StyleStreams and csstype
function combineStyleStreams(styleStreams) {
return material_motion_1.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 }));
}
});
}
exports.combineStyleStreams = combineStyleStreams;
exports.default = combineStyleStreams;
function buildTransformString({ translate: { x: translateX = 0, y: translateY = 0 } = {}, rotate = 0, scale = 1, }) {
return `
translate(${appendPixels(translateX)}, ${appendPixels(translateY)})
rotate(${appendRadians(rotate)})
scale(${scale})
`;
}
exports.buildTransformString = buildTransformString;
function applySuffix(value, suffix = '') {
if (typeof value === 'number') {
return value + suffix;
}
return value;
}
exports.applySuffix = applySuffix;
// Poor-man's currying
function appendPixels(value) {
return applySuffix(value, 'px');
}
exports.appendPixels = appendPixels;
function appendRadians(value) {
return applySuffix(value, 'rad');
}
exports.appendRadians = appendRadians;
function stripStreamSuffices(dictWithSufficies) {
const result = {};
Object.keys(dictWithSufficies).forEach(key => {
result[key.replace('$', '')] = dictWithSufficies[key];
});
return result;
}
//# sourceMappingURL=combineStyleStreams.js.map