@exivity/ui - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Change Log
 
+# [0.10.0](https://github.com/exivity/ui/compare/v0.9.0...v0.10.0) (2019-03-20)
+
+
+### Features
+
+* Tabs ([#39](https://github.com/exivity/ui/issues/39)) ([4b0076a](https://github.com/exivity/ui/commit/4b0076a))
+
+
+
 # [0.9.0](https://github.com/exivity/ui/compare/v0.8.8...v0.9.0) (2019-03-20)
@@ -7,0 +16,0 @@

Dropdown/Dropdown.js

@@ -9,3 +9,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { fromTheme } from '../utils/styled';
-var StyledDropdown = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var StyledDropdown = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var Content = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  background-color: #f9f9f9;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n  z-index: ", ";\n\n  min-width: 160px;\n  ", "\n\n  visibility: ", ";\n  ", "\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  background-color: #f9f9f9;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n  z-index: ", ";\n\n  min-width: 160px;\n  ",
@@ -12,0 +12,0 @@ "\n\n  visibility: ", ";\n  ", "\n"])), fromTheme(function (theme) { return theme.global.zPriority.one; }), function (props) { return (props.useTriggerComponentWidth && props.width) && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), props.width); }, function (_a) {

index.d.ts

@@ -20,2 +20,3 @@ export * from './Block';
 export * from './SelectInput';
+export * from './SelectList';
 export * from './Table';
@@ -22,0 +23,0 @@ export * from './TextArea';

index.js

@@ -20,2 +20,3 @@ export * from './Block';
 export * from './SelectInput';
+export * from './SelectList';
 export * from './Table';
@@ -22,0 +23,0 @@ export * from './TextArea';

ListFocus/ListFocus.js

@@ -0,6 +1,13 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
+import styled from 'styled-components';
 import { handleKeyDownFocusListItem } from './helpers';
+var StyledDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n"], ["\n  height: 100%;\n  width: 100%;\n"])));
 export var ListFocus = function (_a) {
     var children = _a.children;
-    return (React.createElement("div", { onKeyDown: handleKeyDownFocusListItem }, children));
+    return (React.createElement(StyledDiv, { onKeyDown: handleKeyDownFocusListItem }, children));
 };
+var templateObject_1;

package.json

 {
   "name": "@exivity/ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "A collection of components to build interfaces",
@@ -89,2 +89,3 @@ "keywords": [
     "color": "^3.1.0",
+    "react-spring": "^8.0.14",
     "react-icons": "^3.5.0",
@@ -91,0 +92,0 @@ "react-markdown": "^4.0.6",

Select/Select.d.ts

 import React from 'react';
-import { FixedSizeList as List } from 'react-window';
-export interface SelectItem {
-    key: string;
-    value: string;
-}
 interface InjectValueAndHandler {
-    value: string;
+    name?: string;
+    value?: string;
+    placeholder?: string;
     onClick: () => void;
 }
-interface SelectProps {
+export interface SelectProps {
     name?: string;
     value?: string;
     placeholder?: string;
-    data: SelectItem[];
     valueComponent?: React.ReactElement<any>;
     useTriggerComponentWidth?: boolean;
-    innerElementType?: string;
-    onChange?: (item: SelectItem) => void;
-    noDataText?: string;
-    children?: any;
+    onChange?: (value: any) => void;
+    children: React.FunctionComponentElement<any>;
 }
-export declare const StyledList: import("styled-components").StyledComponent<typeof List, any, {}, never>;
 export declare const injectComponent: (component: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>, props: InjectValueAndHandler) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
 export declare const Select: React.FC<SelectProps>;
 export {};

Select/Select.js

@@ -1,5 +0,1 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
@@ -16,11 +12,5 @@ __assign = Object.assign || function(t) {
 };
-import React, { useState, useMemo } from 'react';
-import styled from 'styled-components';
-import { FixedSizeList as List } from 'react-window';
+import React, { useState } from 'react';
 import { SelectInput } from '../SelectInput';
 import { Dropdown } from '../Dropdown';
-import { ListFocus } from '../ListFocus';
-import { DefaultItem } from './DefaultItem';
-import { calculateHeight, getSelectedItem, getNoDataPlaceholder, ITEM_HEIGHT, emptyFn } from './helpers';
-export var StyledList = styled(List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 20px 0;\n\n  ul {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n  }\n"], ["\n  padding: 20px 0;\n\n  ul {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n  }\n"])));
 export var injectComponent = function (component, props) {
@@ -36,24 +26,15 @@ return React.cloneElement(component, __assign({}, props, component.props));
 export var Select = function (_a) {
-    var name = _a.name, value = _a.value, placeholder = _a.placeholder, data = _a.data, onChange = _a.onChange, valueComponent = _a.valueComponent, _b = _a.useTriggerComponentWidth, useTriggerComponentWidth = _b === void 0 ? true : _b, _c = _a.innerElementType, innerElementType = _c === void 0 ? 'ul' : _c, noDataText = _a.noDataText, children = _a.children;
-    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
-    var componentData = getNoDataPlaceholder(data, noDataText);
-    var selectedItem = getSelectedItem(value, componentData);
+    var name = _a.name, value = _a.value, placeholder = _a.placeholder, onChange = _a.onChange, valueComponent = _a.valueComponent, _b = _a.useTriggerComponentWidth, useTriggerComponentWidth = _b === void 0 ? true : _b, children = _a.children;
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
     var valueComponentProps = {
         name: name,
         placeholder: placeholder,
-        value: selectedItem ? selectedItem.value : '',
+        value: value,
         onClick: function () { return setIsOpen(!isOpen); }
     };
     var triggerComponent = getTriggerComponent(valueComponentProps, valueComponent);
-    var height = calculateHeight(componentData);
-    var itemData = useMemo(function () {
-        if (!data.length) {
-            return { items: componentData, setIsOpen: emptyFn, onChange: emptyFn };
-        }
-        return { items: componentData, setIsOpen: setIsOpen, onChange: onChange };
-    }, [data, setIsOpen]);
-    return (React.createElement(ListFocus, null,
-        React.createElement(Dropdown, { open: isOpen, triggerComponent: triggerComponent, useTriggerComponentWidth: useTriggerComponentWidth },
-            React.createElement(StyledList, { height: height, itemData: itemData, itemCount: componentData.length, itemSize: ITEM_HEIGHT, innerElementType: innerElementType, width: '100%' }, children ? children : DefaultItem))));
+    return (React.createElement(Dropdown, { open: isOpen, triggerComponent: triggerComponent, useTriggerComponentWidth: useTriggerComponentWidth }, React.cloneElement(children, __assign({}, children.props, { onChange: function (value) {
+            children.props.onChange && children.props.onChange(value);
+            setIsOpen(false);
+        } }))));
 };
-var templateObject_1;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140185

increased by0.9%

Number of package files

183

increased by2.23%

Lines of code

2358

increased by0.86%

Worsened metrics

Dependency count

10

increased by11.11%

Dependency changes

• + Addedreact-spring@^8.0.14

• + Addedreact-spring@8.0.27(transitive)