@os-design/core - npm Package Compare versions

Comparing version 0.0.31 to 0.0.32

lib/Button/index.js

@@ -11,9 +11,2 @@ "use strict";
 const icons_1 = require("@os-design/icons");
-const reset = core_1.css `
-  border: 0;
-  
-  &:focus {
-    outline: none;
-  }
-`;
 const color = p => core_1.css `
@@ -52,2 +45,3 @@ color: rgb(${p.darkMode ? p.theme.colorPrimary : '255,255,255'});
 const StyledButton = styled_1.default('button', utils_1.omitProps(['ghost', 'shape', 'loading', 'darkMode', 'sizing'])) `
+  ${utils_1.resetButton};
   cursor: pointer;
@@ -63,4 +57,2 @@ user-select: none;
   
-  ${reset};
-  
   ${color};
@@ -67,0 +59,0 @@ ${backgroundColor};

lib/index.d.ts

 export { default as Alert } from './Alert';
 export { default as Button } from './Button';
 export { default as Drawer } from './Drawer';
+export { default as Empty } from './Empty';
 export { default as Form } from './Form';
@@ -14,5 +15,7 @@ export { default as GlobalStyles } from './GlobalStyles';
 export { default as Portal } from './Portal';
+export { default as Select } from './Select';
 export * from './Alert';
 export * from './Button';
 export * from './Drawer';
+export * from './Empty';
 export * from './Input';
@@ -25,2 +28,3 @@ export * from './InputPassword';
 export * from './Modal';
+export * from './Select';
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -12,2 +12,4 @@ "use strict";
 exports.Drawer = Drawer_1.default;
+var Empty_1 = require("./Empty");
+exports.Empty = Empty_1.default;
 var Form_1 = require("./Form");
@@ -33,5 +35,8 @@ exports.Form = Form_1.default;
 exports.Portal = Portal_1.default;
+var Select_1 = require("./Select");
+exports.Select = Select_1.default;
 __export(require("./Alert"));
 __export(require("./Button"));
 __export(require("./Drawer"));
+__export(require("./Empty"));
 __export(require("./Input"));
@@ -44,2 +49,3 @@ __export(require("./InputPassword"));
 __export(require("./Modal"));
+__export(require("./Select"));
 //# sourceMappingURL=index.js.map

lib/Input/InputField.d.ts

 /// <reference types="react" />
 /// <reference types="@emotion/core" />
+import { WithTheme } from '@os-design/theming';
 import { InputProps } from './index';
 export declare const INPUT_PADDING_HORIZONTAL_EM: number;
+export declare const color: (p: WithTheme & Pick<InputProps, "left" | "right" | "type" | "placeholder" | "onChange" | "darkMode" | "value">) => false | import("@emotion/utils").SerializedStyles;
+export declare const darkMode: (p: WithTheme & Pick<InputProps, "left" | "right" | "type" | "placeholder" | "onChange" | "darkMode" | "value">) => false | import("@emotion/utils").SerializedStyles | undefined;
+export declare const INPUT_FIELD_BOX_SHADOW_EM = 0.15;
+export declare const focusDefault: (p: WithTheme) => import("@emotion/utils").SerializedStyles;
+export declare const focusDarkMode: import("@emotion/utils").SerializedStyles;
+export declare const focus: (p: WithTheme & Pick<InputProps, "left" | "right" | "type" | "placeholder" | "onChange" | "darkMode" | "value">) => import("@emotion/utils").SerializedStyles;
+export declare const placeholderDefault: (p: WithTheme) => import("@emotion/utils").SerializedStyles;
+export declare const placeholderDarkMode: import("@emotion/utils").SerializedStyles;
+export declare const INPUT_FIELD_PADDING_HORIZONTAL_EM = 0.7;
 declare const InputField: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Pick<InputProps, "left" | "right" | "type" | "placeholder" | "onChange" | "darkMode" | "value">, {
@@ -6,0 +16,0 @@ colorPrimary: string;

lib/Input/InputField.js

@@ -12,32 +12,36 @@ "use strict";
 const reset = core_1.css `
+  ${utils_1.resetFocus};
   appearance: none;
-  
-  &:focus {
-    outline: none;
-  }
 `;
-const color = (p) => !p.darkMode && core_1.css `
+exports.color = (p) => !p.darkMode && core_1.css `
   border: 1px solid rgb(${p.theme.colorBorder});
-  
-  &:focus {
-    border-color: rgb(${p.theme.colorPrimary});
-    box-shadow: 0 0 0 .15em rgba(${p.theme.colorPrimary}, 0.2);
-  }
-  
-  &::placeholder {
-    color: rgb(${p.theme.colorPlaceholder});
-  }
 `;
-const darkMode = (p) => p.darkMode && core_1.css `
+exports.darkMode = (p) => p.darkMode && core_1.css `
   border: 0;
   background-color: rgba(0,0,0,0.4);
   color: #fff;
-  
+`;
+exports.INPUT_FIELD_BOX_SHADOW_EM = 0.15;
+exports.focusDefault = (p) => core_1.css `
+  border-color: rgb(${p.theme.colorPrimary});
+  box-shadow: 0 0 0 ${exports.INPUT_FIELD_BOX_SHADOW_EM}em rgba(${p.theme.colorPrimary}, 0.2);
+`;
+exports.focusDarkMode = core_1.css `
+  box-shadow: 0 0 0 ${exports.INPUT_FIELD_BOX_SHADOW_EM}em rgba(255,255,255,0.2);
+`;
+exports.focus = (p) => core_1.css `
   &:focus {
-    box-shadow: 0 0 0 .15em rgba(255,255,255,0.2);
+    ${p.darkMode ? exports.focusDarkMode : exports.focusDefault(p)};
   }
-  
+`;
+exports.placeholderDefault = (p) => core_1.css `
+  color: rgb(${p.theme.colorPlaceholder});
+`;
+exports.placeholderDarkMode = core_1.css `
+  color: #fff;
+  opacity: 0.5;
+`;
+const placeholder = (p) => core_1.css `
   &::placeholder {
-    color: #fff;
-    opacity: 0.5;
+    ${p.darkMode ? exports.placeholderDarkMode : exports.placeholderDefault(p)};
   }
@@ -49,3 +53,5 @@ `;
 `;
+exports.INPUT_FIELD_PADDING_HORIZONTAL_EM = 0.7;
 const InputField = styled_1.default('input', utils_1.omitProps(['darkMode', 'left', 'right'])) `
+  ${reset};
   box-sizing: border-box;
@@ -56,10 +62,10 @@ width: 100%;
   font-size: 1em;
-  padding: 0 0.7em;
+  padding: 0 ${exports.INPUT_FIELD_PADDING_HORIZONTAL_EM}em;
   border-radius: ${p => p.theme.borderRadius}em;
   
-  ${reset};
+  ${exports.color};
+  ${exports.darkMode};
+  ${exports.focus};
+  ${placeholder};
   
-  ${color};
-  ${darkMode};
-  
   ${addonPadding};
@@ -66,0 +72,0 @@ ${utils_1.transition('border-color', 'box-shadow')};

lib/InputSearch/index.js

@@ -16,2 +16,3 @@ "use strict";
 const styled_1 = __importDefault(require("@os-design/styled"));
+const utils_1 = require("@os-design/utils");
 const Input_1 = __importDefault(require("../Input"));
@@ -22,16 +23,6 @@ const Button_1 = __importDefault(require("../Button"));
 `;
-const INPUT_SEARCH_TIMEOUT_MS = 400;
-let timeout;
 const InputSearch = props => {
     const { onSearch = () => undefined } = props;
-    react_1.useEffect(() => {
-        if (timeout)
-            clearTimeout(timeout);
-        if (props.value) {
-            timeout = setTimeout(onSearch, INPUT_SEARCH_TIMEOUT_MS);
-        }
-        else {
-            onSearch();
-        }
-    }, [props.value, onSearch]);
+    const debouncedSearchHandler = utils_1.debounce(onSearch, 400);
+    react_1.useEffect(debouncedSearchHandler, [props.value, onSearch]);
     const clearButton = (react_1.default.createElement(Button_1.default, { darkMode: !props.darkMode, ghost: true, onClick: props.onClear },
@@ -38,0 +29,0 @@ react_1.default.createElement(GrayCloseCircle, null)));

lib/Modal/index.js

@@ -29,2 +29,3 @@ "use strict";
     const hasFooter = props.footer !== undefined;
+    const renderBody = () => props.children && (react_1.default.createElement(ModalBody_1.default, { className: props.className, hasFooter: hasFooter }, props.children));
     const renderFooter = () => {
@@ -38,5 +39,5 @@ if (hasFooter)
         react_1.default.createElement(ModalContainer_1.default, { visible: props.visible, onClick: props.onCancel },
-            react_1.default.createElement(ModalContent_1.default, { visible: props.visible, className: props.className, onClick: e => e.stopPropagation() },
+            react_1.default.createElement(ModalContent_1.default, { visible: props.visible, onClick: e => e.stopPropagation() },
                 react_1.default.createElement(ModalHeader_1.default, { title: props.title, onCancel: props.onCancel }),
-                props.children && react_1.default.createElement(ModalBody_1.default, { hasFooter: hasFooter }, props.children),
+                renderBody(),
                 renderFooter()))));
@@ -43,0 +44,0 @@ };

package.json

 {
   "name": "@os-design/core",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "license": "MIT",
@@ -20,5 +20,5 @@ "main": "lib/index.js",
     "@emotion/core": "^10.0.22",
-    "@os-design/icons": "^0.0.11",
+    "@os-design/icons": "^0.0.12",
     "@os-design/styled": "^0.0.4",
-    "@os-design/utils": "^0.0.4",
+    "@os-design/utils": "^0.0.5",
     "facepaint": "^1.2.1"
@@ -33,3 +33,3 @@ },
   },
-  "gitHead": "e12d9ab48a8579c2bd82e4dc392a6f40acdd3f77"
+  "gitHead": "f2f226112b2a69605220d6f0d7a08df130f59ad4"
 }

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

155628

increased by36.76%

Number of package files

170

increased by30.77%

Lines of code

1938

increased by34.4%

Dependency changes

• + Added@os-design/icons@0.0.12(transitive)

• + Added@os-design/utils@0.0.5(transitive)

• - Removed@os-design/icons@0.0.11(transitive)

• - Removed@os-design/utils@0.0.4(transitive)

• Updated@os-design/icons@^0.0.12

• Updated@os-design/utils@^0.0.5