GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

🐛 Do not prettier js in less

pull/16448/head
afc163 6 years ago
parent
32bb3bcb90
commit
15e5e4cb59
No known key found for this signature in database GPG Key ID: 738F973FCE5C6B48
4 changed files with 168 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .prettierignore
  2. 155
      components/style/color/bezierEasing.less
  3. 89
      components/style/color/colorPalette.less

1
.prettierignore
View File

@ -24,3 +24,4 @@ components/*/*.jsx
.editorconfig .editorconfig
.eslintignore .eslintignore
**/*.yml **/*.yml
components/style/color/*.less

155
components/style/color/bezierEasing.less
View File

@ -1,57 +1,108 @@
/* stylelint-disable */ /* stylelint-disable */
.bezierEasingMixin() { .bezierEasingMixin() {
@functions: ~`( @functions: ~`(function() {
function() {var NEWTON_ITERATIONS = 4; var NEWTON_MIN_SLOPE = 0.001; var SUBDIVISION_PRECISION var NEWTON_ITERATIONS = 4;
= 0.0000001; var SUBDIVISION_MAX_ITERATIONS = 10; var kSplineTableSize = 11; var kSampleStepSize var NEWTON_MIN_SLOPE = 0.001;
= 1 / (kSplineTableSize - 1) ; var float32ArraySupported = typeof Float32Array === 'function' var SUBDIVISION_PRECISION = 0.0000001;
; function A (aA1, aA2) {return 1 - 3 * aA2 + 3 * aA1;} function B (aA1, aA2) {return 3 * var SUBDIVISION_MAX_ITERATIONS = 10;
aA2 - 6 * aA1;} function C (aA1) {return 3 * aA1;} / / Returns x(t) given t,
x1, var kSplineTableSize = 11;
and x2, var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
or y(t) given t,
y1, var float32ArraySupported = typeof Float32Array === 'function';
and y2. function calcBezier (aT, aA1, aA2) {return (
(A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1) function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
) * aT;} / / Returns dx/dt given t, function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
x1, function C (aA1) { return 3.0 * aA1; }
and x2,
or dy/dt given t, // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
y1, function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
and y2. function getSlope (aT, aA1, aA2) {return 3 * A(aA1, aA2) * aT * aT + 2 * B(aA1, aA2) *
aT + C(aA1) ;} function binarySubdivide (aX, aA, aB, mX1, mX2) {var currentX, // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
currentT, function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
i = 0; do {currentT = aA + (aB - aA) / 2.0; currentX = calcBezier(currentT, mX1, mX2) - aX; if
(currentX > 0) {aB = currentT;} else {aA = currentT;}} while function binarySubdivide (aX, aA, aB, mX1, mX2) {
(Math.abs(currentX) > SUBDIVISION_PRECISION && + +i < SUBDIVISION_MAX_ITERATIONS) ; return var currentX, currentT, i = 0;
currentT;} function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {for do {
(var i = 0; i < NEWTON_ITERATIONS; + +i) {var currentSlope = getSlope(aGuessT, mX1, mX2) ; if currentT = aA + (aB - aA) / 2.0;
(currentSlope === 0) {return aGuessT;} var currentX = calcBezier(aGuessT, mX1, mX2) - aX; aGuessT -= currentX = calcBezier(currentT, mX1, mX2) - aX;
currentX / currentSlope;} return aGuessT;} var BezierEasing = function (mX1, mY1, mX2, mY2) if (currentX > 0.0) {
{if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {throw new aB = currentT;
Error('bezier x values must be in [0, 1] range') ;} / / Precompute samples table var sampleValues } else {
= float32ArraySupported ? new Float32Array(kSplineTableSize): new Array(kSplineTableSize) ; if aA = currentT;
(mX1 !== mY1 || mX2 !== mY2) {for (var i = 0; i < kSplineTableSize; + +i) {sampleValues[i] = }
calcBezier(i * kSampleStepSize, mX1, mX2) ;}} function getTForX (aX) {var intervalStart = } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
0.0; var currentSample = 1; var lastSample = kSplineTableSize - 1; for return currentT;
(; currentSample !== lastSample && sampleValues[currentSample] <= aX; + +currentSample) {intervalStart + }
= kSampleStepSize;} --currentSample; / / Interpolate to provide an initial guess for t var
dist = (aX - sampleValues[currentSample]) / function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
(sampleValues[currentSample + 1] - sampleValues[currentSample]) ; var guessForT = for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
intervalStart + dist * kSampleStepSize; var initialSlope = getSlope(guessForT, mX1, mX2) ; var currentSlope = getSlope(aGuessT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {return newtonRaphsonIterate(aX, guessForT, mX1, mX2) ;} if (currentSlope === 0.0) {
else if (initialSlope === 0) {return guessForT;} else {return binarySubdivide( return aGuessT;
aX, }
intervalStart, var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
intervalStart + kSampleStepSize, aGuessT -= currentX / currentSlope;
mX1, }
mX2 return aGuessT;
) ;}} return function BezierEasing (x) {if (mX1 === mY1 && mX2 === mY2) {return x; / / linear} / / }
Because JavaScript number are imprecise,
we should guarantee the extremes are right. if (x === 0) {return 0;} if (x === 1) {return 1;} var BezierEasing = function (mX1, mY1, mX2, mY2) {
return calcBezier(getTForX(x), mY1, mY2) ;};}; this.colorEasing = if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
BezierEasing(0.26, 0.09, 0.37, 0.18) ; / / less 3 requires a return return '' ;} throw new Error('bezier x values must be in [0, 1] range');
) }
() `;
// Precompute samples table
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
if (mX1 !== mY1 || mX2 !== mY2) {
for (var i = 0; i < kSplineTableSize; ++i) {
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}
}
function getTForX (aX) {
var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
intervalStart += kSampleStepSize;
}
--currentSample;
// Interpolate to provide an initial guess for t
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;
var initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} else if (initialSlope === 0.0) {
return guessForT;
} else {
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
}
}
return function BezierEasing (x) {
if (mX1 === mY1 && mX2 === mY2) {
return x; // linear
}
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
return calcBezier(getTForX(x), mY1, mY2);
};
};
this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
// less 3 requires a return
return '';
})()`;
} }
// It is hacky way to make this function will be compiled preferentially by less // It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined` // resolve error: `ReferenceError: colorPalette is not defined`

89
components/style/color/colorPalette.less
View File

@ -1,40 +1,73 @@
/* stylelint-disable no-duplicate-selectors */ /* stylelint-disable no-duplicate-selectors */
@import 'bezierEasing'; @import "bezierEasing";
@import 'tinyColor'; @import "tinyColor";
// We create a very complex algorithm which take the place of original tint/shade color system // We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it 👻 // to make sure no one can understand it 👻
// and create an entire color palette magicly by inputing just a single primary color. // and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin // We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() { .colorPaletteMixin() {
@functions: ~`( @functions: ~`(function() {
function() {var hueStep = 2; var saturationStep = 16; var saturationStep2 = 5; var brightnessStep1 var hueStep = 2;
= 5; var brightnessStep2 = 15; var lightColorCount = 5; var darkColorCount = 4; var getHue = var saturationStep = 16;
function(hsv, i, isLight) {var hue; if (hsv.h >= 60 && hsv.h <= 240) {hue = isLight ? hsv.h - var saturationStep2 = 5;
hueStep * i: hsv.h + hueStep * i;} else {hue = isLight ? hsv.h + hueStep * i: hsv.h - hueStep * var brightnessStep1 = 5;
i;} if (hue < 0) {hue + = 360;} else if (hue >= 360) {hue -= 360;} return Math.round(hue) ;}; var brightnessStep2 = 15;
var getSaturation = function(hsv, i, isLight) {var saturation; if (isLight) {saturation = Math.round( var lightColorCount = 5;
hsv.s * 100 var darkColorCount = 4;
) - saturationStep * i;} else if (i == darkColorCount) {saturation = Math.round(
hsv.s * 100 var getHue = function(hsv, i, isLight) {
) + saturationStep;} else {saturation = Math.round(hsv.s * 100) + saturationStep2 * i;} if var hue;
(saturation > 100) {saturation = 100;} if if (hsv.h >= 60 && hsv.h <= 240) {
(isLight && i === lightColorCount && saturation > 10) {saturation = 10;} if (saturation < 6) hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
{saturation = 6;} return Math.round(saturation) ;}; var getValue = function(hsv, i, isLight) } else {
{if (isLight) {return Math.round(hsv.v * 100) + brightnessStep1 * i;} return Math.round( hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
hsv.v * 100 }
) - brightnessStep2 * i;}; this.colorPalette = function(color, index) {var isLight = index if (hue < 0) {
<= 6; var hsv = tinycolor(color) .toHsv() ; var i = isLight ? lightColorCount + 1 - index: hue += 360;
index - lightColorCount - 1; return } else if (hue >= 360) {
tinycolor( hue -= 360;
{h: getHue(hsv, i, isLight), }
return Math.round(hue);
};
var getSaturation = function(hsv, i, isLight) {
var saturation;
if (isLight) {
saturation = Math.round(hsv.s * 100) - saturationStep * i;
} else if (i == darkColorCount) {
saturation = Math.round(hsv.s * 100) + saturationStep;
} else {
saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
}
if (saturation > 100) {
saturation = 100;
}
if (isLight && i === lightColorCount && saturation > 10) {
saturation = 10;
}
if (saturation < 6) {
saturation = 6;
}
return Math.round(saturation);
};
var getValue = function(hsv, i, isLight) {
if (isLight) {
return Math.round(hsv.v * 100) + brightnessStep1 * i;
}
return Math.round(hsv.v * 100) - brightnessStep2 * i;
};
this.colorPalette = function(color, index) {
var isLight = index <= 6;
var hsv = tinycolor(color).toHsv();
var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
return tinycolor({
h: getHue(hsv, i, isLight),
s: getSaturation(hsv, i, isLight), s: getSaturation(hsv, i, isLight),
v: getValue(hsv, i, isLight), v: getValue(hsv, i, isLight),
} }).toHexString();
) };
.toHexString() ;};} })()`;
)
() `;
} }
// It is hacky way to make this function will be compiled preferentially by less // It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined` // resolve error: `ReferenceError: colorPalette is not defined`

Write Preview
Loading…
Cancel
Save