2020-10-07 14:49:01 +00:00
|
|
|
const attributes = `accept acceptcharset accesskey action allowfullscreen allowtransparency
|
|
|
|
alt async autocomplete autofocus autoplay capture cellpadding cellspacing challenge
|
|
|
|
charset checked classid classname colspan cols content contenteditable contextmenu
|
|
|
|
controls coords crossorigin data datetime default defer dir disabled download draggable
|
|
|
|
enctype form formaction formenctype formmethod formnovalidate formtarget frameborder
|
|
|
|
headers height hidden high href hreflang htmlfor httpequiv icon id inputmode integrity
|
|
|
|
is keyparams keytype kind label lang list loop low manifest marginheight marginwidth max maxlength media
|
|
|
|
mediagroup method min minlength multiple muted name novalidate nonce open
|
|
|
|
optimum pattern placeholder poster preload radiogroup readonly rel required
|
|
|
|
reversed role rowspan rows sandbox scope scoped scrolling seamless selected
|
|
|
|
shape size sizes span spellcheck src srcdoc srclang srcset start step style
|
|
|
|
summary tabindex target title type usemap value width wmode wrap`;
|
2020-09-30 08:21:04 +00:00
|
|
|
|
2020-10-07 14:49:01 +00:00
|
|
|
const eventsName = `onCopy onCut onPaste onCompositionend onCompositionstart onCompositionupdate onKeydown
|
|
|
|
onKeypress onKeyup onFocus onBlur onChange onInput onSubmit onClick onContextmenu onDoubleclick onDblclick
|
|
|
|
onDrag onDragend onDragenter onDragexit onDragleave onDragover onDragstart onDrop onMousedown
|
|
|
|
onMouseenter onMouseleave onMousemove onMouseout onMouseover onMouseup onSelect onTouchcancel
|
|
|
|
onTouchend onTouchmove onTouchstart onScroll onWheel onAbort onCanplay onCanplaythrough
|
|
|
|
onDurationchange onEmptied onEncrypted onEnded onError onLoadeddata onLoadedmetadata
|
|
|
|
onLoadstart onPause onPlay onPlaying onProgress onRatechange onSeeked onSeeking onStalled onSuspend onTimeupdate onVolumechange onWaiting onLoad onError`;
|
2020-09-30 08:21:04 +00:00
|
|
|
|
|
|
|
const propList = `${attributes} ${eventsName}`.split(/[\s\n]+/);
|
|
|
|
|
|
|
|
/* eslint-enable max-len */
|
|
|
|
const ariaPrefix = 'aria-';
|
|
|
|
const dataPrefix = 'data-';
|
|
|
|
|
2020-10-13 14:26:56 +00:00
|
|
|
function match(key: string, prefix: string) {
|
2020-09-30 08:21:04 +00:00
|
|
|
return key.indexOf(prefix) === 0;
|
|
|
|
}
|
|
|
|
|
2020-10-13 14:26:56 +00:00
|
|
|
export interface PickConfig {
|
|
|
|
aria?: boolean;
|
|
|
|
data?: boolean;
|
|
|
|
attr?: boolean;
|
|
|
|
}
|
|
|
|
|
2020-09-30 08:21:04 +00:00
|
|
|
/**
|
|
|
|
* Picker props from exist props with filter
|
|
|
|
* @param props Passed props
|
|
|
|
* @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
|
|
|
|
*/
|
2020-10-13 14:26:56 +00:00
|
|
|
export default function pickAttrs(props: object, ariaOnly: boolean | PickConfig = false) {
|
2020-10-02 07:44:10 +00:00
|
|
|
let mergedConfig;
|
2020-09-30 08:21:04 +00:00
|
|
|
if (ariaOnly === false) {
|
|
|
|
mergedConfig = {
|
|
|
|
aria: true,
|
|
|
|
data: true,
|
|
|
|
attr: true,
|
|
|
|
};
|
|
|
|
} else if (ariaOnly === true) {
|
|
|
|
mergedConfig = {
|
|
|
|
aria: true,
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
mergedConfig = {
|
|
|
|
...ariaOnly,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
const attrs = {};
|
|
|
|
Object.keys(props).forEach(key => {
|
|
|
|
if (
|
|
|
|
// Aria
|
|
|
|
(mergedConfig.aria && (key === 'role' || match(key, ariaPrefix))) ||
|
|
|
|
// Data
|
|
|
|
(mergedConfig.data && match(key, dataPrefix)) ||
|
|
|
|
// Attr
|
2020-10-07 14:49:01 +00:00
|
|
|
(mergedConfig.attr && (propList.includes(key) || propList.includes(key.toLowerCase())))
|
2020-09-30 08:21:04 +00:00
|
|
|
) {
|
|
|
|
attrs[key] = props[key];
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return attrs;
|
|
|
|
}
|