Skip to content

Commit

Permalink
Support vite2 (#3490)
Browse files Browse the repository at this point in the history
* refactor: supports vite2

* refactor: remove CommonJS dependencies

* chore: update pkg

* refactor: update

* chore: update pkg
  • Loading branch information
John60676 authored Jan 7, 2021
1 parent 75931a1 commit f61018a
Show file tree
Hide file tree
Showing 18 changed files with 373 additions and 50 deletions.
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

0 comments on commit f61018a

Please sign in to comment.