Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support vite2 #3490

Merged
merged 5 commits into from
Jan 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 168 additions & 0 deletions components/_util/component-classes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
/**
* source by `component-classes`
* https://github.com/component/classes.git
*/

import { indexOf } from 'lodash-es';

/**
* Whitespace regexp.
*/
const re = /\s+/;

export class ClassList {
el: Element;
list: DOMTokenList;

constructor(el: Element) {
if (!el || !el.nodeType) {
throw new Error('A DOM element reference is required');
}
this.el = el;
this.list = el.classList;
}

array() {
const className = this.el.getAttribute('class') || '';
const str = className.replace(/^\s+|\s+$/g, '');
const arr = str.split(re);
if ('' === arr[0]) arr.shift();
return arr;
}

/**
* Add class `name` if not already present.
*
* @param {String} name
* @return {ClassList}
* @api public
*/
add(name: string): ClassList {
// classList
if (this.list) {
this.list.add(name);
return this;
}

// fallback
const arr = this.array();
const i = indexOf(arr, name);
if (!~i) arr.push(name);
this.el.className = arr.join(' ');
return this;
}
/**
* Remove class `name` when present, or
* pass a regular expression to remove
* any which match.
*
* @param {String|RegExp} name
* @return {ClassList}
* @api public
*/
remove(name: string | RegExp): ClassList {
if ('[object RegExp]' === toString.call(name)) {
return this._removeMatching(name as RegExp);
}

// classList
if (this.list) {
this.list.remove(name as string);
return this;
}

// fallback
const arr = this.array();
const i = indexOf(arr, name);
if (~i) arr.splice(i, 1);
this.el.className = arr.join(' ');
return this;
}
/**
* Remove all classes matching `re`.
*
* @param {RegExp} re
* @return {ClassList}
* @api private
*/
_removeMatching(re: RegExp): ClassList {
const arr = this.array();
for (let i = 0; i < arr.length; i++) {
if (re.test(arr[i])) {
this.remove(arr[i]);
}
}
return this;
}

/**
* Toggle class `name`, can force state via `force`.
*
* For browsers that support classList, but do not support `force` yet,
* the mistake will be detected and corrected.
*
* @param {String} name
* @param {Boolean} force
* @return {ClassList}
* @api public
*/
toggle(name: string, force: boolean): ClassList {
// classList
if (this.list) {
if ('undefined' !== typeof force) {
if (force !== this.list.toggle(name, force)) {
this.list.toggle(name); // toggle again to correct
}
} else {
this.list.toggle(name);
}
return this;
}

// fallback
if ('undefined' !== typeof force) {
if (!force) {
this.remove(name);
} else {
this.add(name);
}
} else {
if (this.has(name)) {
this.remove(name);
} else {
this.add(name);
}
}

return this;
}
/**
* Check if class `name` is present.
*
* @param {String} name
* @api public
*/
has(name: string) {
return this.list ? this.list.contains(name) : !!~indexOf(this.array(), name);
}
/**
* Check if class `name` is present.
*
* @param {String} name
* @api public
*/
contains(name: string) {
return this.has(name);
}
}

/**
* Wrap `el` in a `ClassList`.
*
* @param {Element} el
* @return {ClassList}
* @api public
*/
export default function(el: Element): ClassList {
return new ClassList(el);
}
2 changes: 1 addition & 1 deletion components/_util/css-animation/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// https://github.com/yiminghe/css-animation 1.5.0

import Event from './Event';
import classes from 'component-classes';
import classes from '../component-classes';
import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout';

const isCssAnimationSupported = Event.endEvents.length !== 0;
Expand Down
24 changes: 24 additions & 0 deletions components/_util/dom-closest.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* source by `dom-closest`
* https://github.com/necolas/dom-closest.git
*/

import matches from './dom-matches';

/**
* @param element {Element}
* @param selector {String}
* @param context {Element=}
* @return {Element}
*/
export default function(element, selector, context) {
context = context || document;
// guard against orphans
element = { parentNode: element };

while ((element = element.parentNode) && element !== context) {
if (matches(element, selector)) {
return element;
}
}
}
47 changes: 47 additions & 0 deletions components/_util/dom-matches.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/**
* source by `dom-matches`
* https://github.com/necolas/dom-matches.git
*/

/**
* Determine if a DOM element matches a CSS selector
*
* @param {Element} elem
* @param {String} selector
* @return {Boolean}
* @api public
*/

export default function matches(elem, selector) {
// Vendor-specific implementations of `Element.prototype.matches()`.
const proto = window.Element.prototype;
const nativeMatches =
proto.matches ||
proto.mozMatchesSelector ||
proto.msMatchesSelector ||
proto.oMatchesSelector ||
proto.webkitMatchesSelector;

if (!elem || elem.nodeType !== 1) {
return false;
}

const parentElem = elem.parentNode;

// use native 'matches'
if (nativeMatches) {
return nativeMatches.call(elem, selector);
}

// native support for `matches` is missing and a fallback is required
const nodes = parentElem.querySelectorAll(selector);
const len = nodes.length;

for (let i = 0; i < len; i++) {
if (nodes[i] === elem) {
return true;
}
}

return false;
}
60 changes: 60 additions & 0 deletions components/_util/json2mq.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/**
* source by `json2mq`
* https://github.com/akiran/json2mq.git
*/

const camel2hyphen = function(str) {
return str
.replace(/[A-Z]/g, function(match) {
return '-' + match.toLowerCase();
})
.toLowerCase();
};

const isDimension = function(feature) {
const re = /[height|width]$/;
return re.test(feature);
};

const obj2mq = function(obj) {
let mq = '';
const features = Object.keys(obj);
features.forEach(function(feature, index) {
let value = obj[feature];
feature = camel2hyphen(feature);
// Add px to dimension features
if (isDimension(feature) && typeof value === 'number') {
value = value + 'px';
}
if (value === true) {
mq += feature;
} else if (value === false) {
mq += 'not ' + feature;
} else {
mq += '(' + feature + ': ' + value + ')';
}
if (index < features.length - 1) {
mq += ' and ';
}
});
return mq;
};

export default function(query) {
let mq = '';
if (typeof query === 'string') {
return query;
}
// Handling array of media queries
if (query instanceof Array) {
query.forEach(function(q, index) {
mq += obj2mq(q);
if (index < query.length - 1) {
mq += ', ';
}
});
return mq;
}
// Handling single media query
return obj2mq(query);
}
13 changes: 6 additions & 7 deletions components/_util/openAnimation.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import cssAnimation from './css-animation';
import raf from 'raf';
import { nextTick } from 'vue';

function animate(node, show, done) {
Expand All @@ -9,7 +8,7 @@ function animate(node, show, done) {
return cssAnimation(node, 'ant-motion-collapse-legacy', {
start() {
if (appearRequestAnimationFrameId) {
raf.cancel(appearRequestAnimationFrameId);
cancelAnimationFrame(appearRequestAnimationFrameId);
}
if (!show) {
node.style.height = `${node.offsetHeight}px`;
Expand All @@ -19,7 +18,7 @@ function animate(node, show, done) {
// not get offsetHeight when appear
// set it into raf get correct offsetHeight
if (height === 0) {
appearRequestAnimationFrameId = raf(() => {
appearRequestAnimationFrameId = requestAnimationFrame(() => {
height = node.offsetHeight;
node.style.height = '0px';
node.style.opacity = '0';
Expand All @@ -32,19 +31,19 @@ function animate(node, show, done) {
},
active() {
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId);
cancelAnimationFrame(requestAnimationFrameId);
}
requestAnimationFrameId = raf(() => {
requestAnimationFrameId = requestAnimationFrame(() => {
node.style.height = `${show ? height : 0}px`;
node.style.opacity = show ? '1' : '0';
});
},
end() {
if (appearRequestAnimationFrameId) {
raf.cancel(appearRequestAnimationFrameId);
cancelAnimationFrame(appearRequestAnimationFrameId);
}
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId);
cancelAnimationFrame(requestAnimationFrameId);
}
node.style.height = '';
node.style.opacity = '';
Expand Down
8 changes: 3 additions & 5 deletions components/_util/raf.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import raf from 'raf';

interface RafMap {
[id: number]: number;
}
Expand All @@ -19,19 +17,19 @@ export default function wrapperRaf(callback: () => void, delayFrames = 1): numbe
callback();
delete ids[myId];
} else {
ids[myId] = raf(internalCallback);
ids[myId] = requestAnimationFrame(internalCallback);
}
}

ids[myId] = raf(internalCallback);
ids[myId] = requestAnimationFrame(internalCallback);

return myId;
}

wrapperRaf.cancel = function cancel(pid?: number) {
if (pid === undefined) return;

raf.cancel(ids[pid]);
cancelAnimationFrame(ids[pid]);
delete ids[pid];
};

Expand Down
Loading