This repository has been archived by the owner on Jan 6, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 772
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(layout): add wrap options support to fxLayout (#207)
* feat(fxLayout): add 'wrap' options support to fxLayout * add support for wrap options as part of fxLayout * marked fxLayoutWrap as deprecated (but still supported) * fix(fxFlex): improve support of flex-basis variations * improve support for fxFlex options and parsing * add calc() auto-corrections for bad whitespacing * add basis-validator tools
- Loading branch information
1 parent
7cad395
commit 2340a19
Showing
7 changed files
with
213 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google Inc. All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
| import {validateBasis} from './basis-validator'; | ||
|
|
||
|
|
||
| describe('validateBasis', () => { | ||
|
|
||
| it('should validate single-value basis with default grow/shrink', () => { | ||
| let result = validateBasis('37px').join(" "); | ||
| expect( result ).toEqual('1 1 37px'); | ||
| }); | ||
|
|
||
| it('should validate single-value basis with custom grow and shrink', () => { | ||
| let result = validateBasis('37px', "2", "13").join(" "); | ||
| expect( result ).toEqual('2 13 37px'); | ||
| }); | ||
|
|
||
| it('should validate full `flex` value `2 1 37%`', () => { | ||
| let result = validateBasis('2 1 37%').join(" "); | ||
| expect( result ).toEqual('2 1 37%'); | ||
| }); | ||
|
|
||
| it('should validate with complex value that includes calc()', () => { | ||
| let result = validateBasis('3 3 calc(15em + 20px)').join(" "); | ||
| expect( result ).toEqual('3 3 calc(15em + 20px)'); | ||
| }); | ||
|
|
||
| it('should validate with complex value that includes a bad calc() expression', () => { | ||
| let result = validateBasis('3 3 calc(15em +20px)').join(" "); | ||
| expect( result ).toEqual('3 3 calc(15em + 20px)'); | ||
| }); | ||
|
|
||
| it('should validate with complex value that includes ONLY calc()', () => { | ||
| let result = validateBasis('calc(15em + 20px)').join(" "); | ||
| expect( result ).toEqual('1 1 calc(15em + 20px)'); | ||
| }); | ||
|
|
||
| it('should validate with good calc(x + x) expression()', () => { | ||
| let result = validateBasis('calc(15em + 20px)').join(" "); | ||
| expect( result ).toEqual('1 1 calc(15em + 20px)'); | ||
| }); | ||
|
|
||
| it('should validate with bad calc(x+x) expression()', () => { | ||
| let result = validateBasis('calc(15em+20px)').join(" "); | ||
| expect( result ).toEqual('1 1 calc(15em + 20px)'); | ||
| }); | ||
|
|
||
| it('should validate with bad calc(x-x) expression()', () => { | ||
| let result = validateBasis('calc(15em-20px)').join(" "); | ||
| expect( result ).toEqual('1 1 calc(15em - 20px)'); | ||
| }); | ||
|
|
||
| it('should validate with bad calc(x*x) expression()', () => { | ||
| let result = validateBasis('calc(15em*20px)').join(" "); | ||
| expect( result ).toEqual('1 1 calc(15em * 20px)'); | ||
| }); | ||
|
|
||
| it('should validate with bad calc(x/x) expression()', () => { | ||
| let result = validateBasis('calc(15em/20px)').join(" "); | ||
| expect( result ).toEqual('1 1 calc(15em / 20px)'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /** | ||
| * The flex API permits 3 or 1 parts of the value: | ||
| * - `flex-grow flex-shrink flex-basis`, or | ||
| * - `flex-basis` | ||
| * Flex-Basis values can be complicated short-hand versions such as: | ||
| * - "3 3 calc(15em + 20px)" | ||
| * - "calc(15em + 20px)" | ||
| * - "calc(15em+20px)" | ||
| * - "37px" | ||
| * = "43%" | ||
| */ | ||
| export function validateBasis(basis: string, grow = "1", shrink = "1"): string[] { | ||
| let parts = [grow, shrink, basis]; | ||
|
|
||
| let j = basis.indexOf('calc'); | ||
| if (j > 0) { | ||
| parts[2] = _validateCalcValue(basis.substring(j).trim()); | ||
| let matches = basis.substr(0, j).trim().split(" "); | ||
| if (matches.length == 2) { | ||
| parts[0] = matches[0]; | ||
| parts[1] = matches[1]; | ||
| } | ||
| } else if (j == 0) { | ||
| parts[2] = _validateCalcValue(basis.trim()); | ||
| } else { | ||
| let matches = basis.split(" "); | ||
| parts = (matches.length === 3) ? matches : [ | ||
| grow, shrink, basis | ||
| ]; | ||
| } | ||
|
|
||
| return parts; | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Calc expressions require whitespace before & after the operator | ||
| * This is a simple, crude whitespace padding solution. | ||
| */ | ||
| function _validateCalcValue(calc: string): string { | ||
| let operators = ["+", "-", "*", "/"]; | ||
| let findOperator = () => operators.reduce((index, operator) => { | ||
| return index || (calc.indexOf(operator) + 1); | ||
| }, 0); | ||
|
|
||
| if (findOperator() > 0) { | ||
| calc = calc.replace(/[\s]/g, ""); | ||
| let offset = findOperator() - 1; | ||
| calc = calc.substr(0, offset) + " " + calc.charAt(offset) + " " + calc.substr(offset + 1); | ||
| } | ||
| return calc; | ||
| } |