Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

eyzy

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

eyzy - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

src/components/tag/index.tsx

447

dist/eyzy.js
/*!
* Eyzy vv0.0.3
* Eyzy v0.0.4
* (c) 2019 amsik

@@ -8,232 +8,283 @@ * Released under the MIT License.

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
(global = global || self, factory(global.eyzy = {}, global.React));
}(this, function (exports, React) { 'use strict';
import React from 'react';
React = React && React.hasOwnProperty('default') ? React['default'] : React;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
var hasOwn = {}.hasOwnProperty;
function cn() {
var names = [];
for (var _i = 0; _i < arguments.length; _i++) {
names[_i] = arguments[_i];
}
function cn() {
var names = [];
for (var _i = 0; _i < arguments.length; _i++) {
names[_i] = arguments[_i];
var result = [];
for (var i = 0; i < names.length; i++) {
var item = names[i];
if (!item) {
continue;
}
var result = [];
for (var i = 0; i < names.length; i++) {
var item = names[i];
if (!item) {
continue;
}
if (Array.isArray(item) && item.length) {
result.push(cn.apply(null, item));
}
else if ('object' === typeof item) {
for (var _a = 0, item_1 = item; _a < item_1.length; _a++) {
var _b = item_1[_a], key = _b[0], value = _b[1];
if (value) {
names.push(key);
}
var type = typeof item;
if (type === 'string' || type === 'number') {
result.push(item);
}
else if (Array.isArray(item) && item.length) {
result.push(cn.apply(null, item));
}
else if ('object' === typeof item) {
for (var key in item) {
if (hasOwn.call(item, key) && item[key]) {
result.push(key);
}
}
else {
result.push(item);
}
}
return result.join(' ');
else {
result.push(item);
}
}
return result.join(' ');
}
var Button = React.memo(function Button(props) {
var appearance = props.appearance, className = props.className, children = props.children, intent = props.intent, active = props.active, shape = props.shape, type = props.type, size = props.size, fit = props.fit, rest = __rest(props, ["appearance", "className", "children", "intent", "active", "shape", "type", "size", "fit"]);
var classNames = cn('btn', appearance && "btn-" + appearance, intent && "btn-" + intent, active && "btn-active", shape && "btn-" + shape, size && "btn-" + size, fit && 'btn-fit', className);
return (React.createElement("button", __assign({ className: classNames }, rest), children));
});
var Button = React.memo(function Button(props) {
var appearance = props.appearance, className = props.className, children = props.children, intent = props.intent, active = props.active, shape = props.shape, type = props.type, size = props.size, fit = props.fit, rest = __rest(props, ["appearance", "className", "children", "intent", "active", "shape", "type", "size", "fit"]);
var classNames = cn('eyzy-btn', appearance && "eyzy-btn-" + appearance, intent && "eyzy-btn-" + intent, active && "eyzy-btn-active", shape && "eyzy-btn-" + shape, size && "eyzy-btn-" + size, fit && 'eyzy-btn-fit', className);
return (React.createElement("button", __assign({ className: classNames }, rest), children));
});
var Group = React.memo(function ButtonGroup(props) {
var className = props.className, children = props.children, size = props.size, fit = props.fit, rest = __rest(props, ["className", "children", "size", "fit"]);
var classNames = cn('btn-group', size && "btn-" + size, fit && "btn-group-fit", className);
return (React.createElement("div", __assign({ className: classNames }, rest), children));
});
var Group = React.memo(function ButtonGroup(props) {
var className = props.className, children = props.children, size = props.size, fit = props.fit, rest = __rest(props, ["className", "children", "size", "fit"]);
var classNames = cn('eyzy-btn-group', size && "eyzy-btn-" + size, fit && "eyzy-btn-group-fit", className);
return (React.createElement("div", __assign({ className: classNames }, rest), children));
});
Button["Group"] = Group;
Button["Group"] = Group;
function parseWidth(width) {
var parsed = parseInt(width, 10);
if (!isNaN(parsed)) {
return parsed + "px";
}
return null;
function parseWidth(width) {
var parsed = parseInt(width, 10);
if (!isNaN(parsed)) {
return parsed + "px";
}
var Input = React.memo(function Input(props) {
console.log('rename size everywere (!)');
var className = props.className, intent = props.intent, shape = props.shape, width = props.width, size = props.size, type = props.type, fit = props.fit, rest = __rest(props, ["className", "intent", "shape", "width", "size", "type", "fit"]);
var classNames = cn('input', intent && "input-" + intent, shape && "input-" + shape, size && "input-" + size, fit && 'input-fit', className);
return null;
}
var Input = /** @class */ (function (_super) {
__extends(Input, _super);
function Input() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleKeyDown = function (e) {
var _a = _this.props, onPressEnter = _a.onPressEnter, onPressEsc = _a.onPressEsc, onKeyDown = _a.onKeyDown;
if (onPressEnter && 13 === e.keyCode) {
onPressEnter(e);
}
if (onPressEsc && 27 === e.keyCode) {
onPressEsc(e);
}
if (onKeyDown) {
onKeyDown(e);
}
};
return _this;
}
Input.prototype.render = function () {
var _a = this.props, className = _a.className, intent = _a.intent, shape = _a.shape, width = _a.width, size = _a.size, type = _a.type, fit = _a.fit, style = _a.style, onPressEnter = _a.onPressEnter, onPressEsc = _a.onPressEsc, rest = __rest(_a, ["className", "intent", "shape", "width", "size", "type", "fit", "style", "onPressEnter", "onPressEsc"]);
var classNames = cn('eyzy-input', intent && "eyzy-input-" + intent, shape && "eyzy-input-" + shape, size && "eyzy-input-" + size, fit && 'eyzy-input-fit', className);
var parsedWidth = parseWidth(width);
var style = !parsedWidth
? undefined
: {
width: parsedWidth
};
return (React.createElement("input", __assign({ className: classNames, type: type || "text", style: style }, rest)));
});
var elemStyle = style || {};
if (parsedWidth) {
elemStyle.width = parsedWidth;
}
return (React.createElement("input", __assign({}, rest, { className: classNames, type: type || "text", style: elemStyle, onKeyDown: this.handleKeyDown })));
};
return Input;
}(React.Component));
var Group$1 = React.memo(function InputButton(props) {
var className = props.className, children = props.children, size = props.size, fit = props.fit, rest = __rest(props, ["className", "children", "size", "fit"]);
var classNames = cn('input-group', size && "input-" + size, fit && "input-group-fit", className);
return (React.createElement("div", __assign({ className: classNames }, rest), children));
});
var Group$1 = React.memo(function InputButton(props) {
var className = props.className, children = props.children, size = props.size, fit = props.fit, rest = __rest(props, ["className", "children", "size", "fit"]);
var classNames = cn('eyzy-input-group', size && "eyzy-input-" + size, fit && "eyzy-input-group-fit", className);
return (React.createElement("div", __assign({ className: classNames }, rest), children));
});
Input["Group"] = Group$1;
Input["Group"] = Group$1;
var Tab = function (props) {
return (React.createElement("div", { className: "tabs-content__item" }, props.children || props.tab));
};
var Tab$1 = React.memo(Tab);
var Tab = function (props) {
return (React.createElement("div", { className: "eyzy-tabs-content__item" }, props.children || props.tab));
};
var Tab$1 = React.memo(Tab);
var isTab = function (component) {
return component && component.type === Tab$1;
};
var Tabs = /** @class */ (function (_super) {
__extends(Tabs, _super);
function Tabs(props) {
var _this = _super.call(this, props) || this;
_this.getChildNodes = function (children) {
if (children === void 0) { children = _this.props.children; }
var childNodes = [];
React.Children.forEach(children, function (item) {
childNodes.push(item);
});
return childNodes;
};
_this.getActiveContent = function () {
var children = _this.props.children;
var activeKey = _this.state.activeKey;
var activeContent = _this.getChildNodes()
.find(function (child, i) {
return child.key === activeKey || i === activeKey;
});
return activeContent || (children ? children[0] : null);
};
_this.handleChange = function (key) {
if (_this.props.onChange) {
_this.props.onChange(key);
}
_this.setState({ activeKey: key });
};
var state = {
activeKey: props.defaultActiveKey || props.activeKey || null
};
if (!state.activeKey && !props.activeKey) {
var children = _this.getChildNodes(props.children);
state.activeKey = (children[0] && children[0].key) || 0;
}
_this.state = state;
return _this;
}
Tabs.getDerivedStateFromProps = function (props) {
if (props.activeKey) {
return {
activeKey: props.activeKey
};
}
return null;
var isTab = function (component) {
return component && component.type === Tab$1;
};
var Tabs = /** @class */ (function (_super) {
__extends(Tabs, _super);
function Tabs(props) {
var _this = _super.call(this, props) || this;
_this.getChildNodes = function (children) {
if (children === void 0) { children = _this.props.children; }
var childNodes = [];
React.Children.forEach(children, function (item) {
childNodes.push(item);
});
return childNodes;
};
Tabs.prototype.renderHeader = function () {
var _this = this;
var headers = [];
var activeTabKey = this.state.activeKey;
this.getChildNodes().forEach(function (child, i) {
if (!isTab(child)) {
return;
}
var key = child.key || i;
var className = [
'tabs-header__item',
key === activeTabKey ? 'active' : ''
]
.filter(Boolean)
.join(' ');
headers.push(React.createElement("div", { className: className, onClick: function () { return _this.handleChange(key); }, key: key }, child.props.label));
_this.getActiveContent = function () {
var children = _this.props.children;
var activeKey = _this.state.activeKey;
var activeContent = _this.getChildNodes()
.find(function (child, i) {
return child.key === activeKey || i === activeKey;
});
return headers;
return activeContent || (children ? children[0] : null);
};
Tabs.prototype.render = function () {
var className = cn('tabs', this.props.className);
return (React.createElement("div", { className: className },
React.createElement("div", { className: "tabs-header" }, this.renderHeader()),
React.createElement("div", { className: "tabs-content" }, this.getActiveContent())));
_this.handleChange = function (key) {
if (_this.props.onChange) {
_this.props.onChange(key);
}
_this.setState({ activeKey: key });
};
Tabs.Tab = Tab$1;
return Tabs;
}(React.PureComponent));
var state = {
activeKey: props.defaultActiveKey || props.activeKey || null
};
if (!state.activeKey && !props.activeKey) {
var children = _this.getChildNodes(props.children);
state.activeKey = (children[0] && children[0].key) || 0;
}
_this.state = state;
return _this;
}
Tabs.getDerivedStateFromProps = function (props) {
if (props.activeKey) {
return {
activeKey: props.activeKey
};
}
return null;
};
Tabs.prototype.renderHeader = function () {
var _this = this;
var headers = [];
var activeTabKey = this.state.activeKey;
this.getChildNodes().forEach(function (child, i) {
if (!isTab(child)) {
return;
}
var key = child.key || i;
var className = cn({
'eyzy-tabs-header__item': true,
'active': key === activeTabKey,
}, child.props.headerClassName);
headers.push(React.createElement("div", { className: className, onClick: function () { return _this.handleChange(key); }, key: key }, child.props.label));
});
return headers;
};
Tabs.prototype.render = function () {
var className = cn('eyzy-tabs', this.props.className);
return (React.createElement("div", { className: className },
React.createElement("div", { className: "eyzy-tabs-header" }, this.renderHeader()),
React.createElement("div", { className: "eyzy-tabs-content" }, this.getActiveContent())));
};
Tabs.Tab = Tab$1;
return Tabs;
}(React.PureComponent));
var Checkbox = React.memo(function Checkbox(props) {
var className = props.className, rest = __rest(props, ["className"]);
var classNames = cn('checkbox', className);
return (React.createElement("span", { className: classNames },
React.createElement("input", __assign({ type: "checkbox" }, rest))));
});
Tabs.Tab = Tab$1;
exports.Button = Button;
exports.Checkbox = Checkbox;
exports.Input = Input;
exports.Tabs = Tabs;
var getStyle = function (color, style) {
return __assign({ backgroundColor: color }, style);
};
var Tag = React.memo(function Tag(props) {
var color = props.color, rounded = props.rounded, onRemove = props.onRemove, children = props.children, style = props.style, rest = __rest(props, ["color", "rounded", "onRemove", "children", "style"]);
var className = cn('eyzy-tag', rounded ? 'eyzy-tag--rounded' : null);
return (React.createElement("span", __assign({ className: className }, rest, { style: getStyle(color, style) }),
children,
onRemove && (React.createElement("button", { className: "eyzy-tag__remove-btn", onClick: onRemove },
React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16" },
React.createElement("path", { d: "M9.41 8l2.29-2.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42L6.59 8 4.3 10.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l2.29 2.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z", fillRule: "evenodd" }))))));
});
Object.defineProperty(exports, '__esModule', { value: true });
var Checkbox = /** @class */ (function (_super) {
__extends(Checkbox, _super);
function Checkbox(props) {
var _this = _super.call(this, props) || this;
_this.handleChange = function (e) {
if (_this.props.onChange) {
_this.props.onChange(e);
}
else {
_this.setState({ checked: e.target.checked });
}
};
var checked = 'checked' in props
? props.checked
: props.defaultChecked;
_this.state = {
checked: checked || false
};
return _this;
}
Checkbox.getDerivedStateFromProps = function (props, state) {
if ('checked' in props) {
return __assign(__assign({}, state), { checked: props.checked });
}
return null;
};
Checkbox.prototype.render = function () {
var _a = this.props, className = _a.className, children = _a.children, align = _a.align, defaultChecked = _a.defaultChecked, rest = __rest(_a, ["className", "children", "align", "defaultChecked"]);
var checked = this.state.checked;
var classNames = cn('eyzy-checkbox', 'right' === align ? 'eyzy-checkbox--right' : null, checked ? 'checked' : null, className);
return (React.createElement("label", { className: classNames },
React.createElement("input", __assign({ type: "checkbox", onChange: this.handleChange, checked: checked }, rest)),
React.createElement("span", { className: "eyzy-checkbox-inner" }),
children && (React.createElement("span", { className: "eyzy-checkbox-label" }, children))));
};
return Checkbox;
}(React.Component));
}));
export { Button, Checkbox, Input, Tabs, Tag };
//# sourceMappingURL=eyzy.js.map
{
"name": "eyzy",
"version": "v0.0.3",
"version": "0.0.4",
"author": "Kostiantyn",

@@ -5,0 +5,0 @@ "description": "React UI Toolkit",

@@ -0,1 +1,3 @@

const hasOwn = {}.hasOwnProperty
export function cn(...names: any[]): string {

@@ -8,11 +10,15 @@ const result: string[] = []

if (!item) {
continue;
continue
}
if (Array.isArray(item) && item.length) {
const type: string = typeof item
if (type === 'string' || type === 'number') {
result.push(item)
} else if (Array.isArray(item) && item.length) {
result.push(cn.apply(null, item))
} else if ('object' === typeof item) {
for (let [key, value] of item) {
if (value) {
names.push(key)
for (let key in item) {
if (hasOwn.call(item, key) && item[key]) {
result.push(key)
}

@@ -19,0 +25,0 @@ }

import Button from './components/button'
import Input from './components/input'
import Tabs from './components/tabs'
import Tag from './components/tag'
import Checkbox from './components/checkbox'
export { Button, Input, Tabs, Checkbox }
export { Button, Input, Tabs, Tag, Checkbox }

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc