acsi-core 0.1.7 → 0.1.9

package/dist/components/CoreInput/index.d.ts

@@ -14,6 +14,7 @@ interface IProps {
     fontWeight?: string;
     onKeyDown?: (e: any) => void;
     ref?: any;
+    maxLength?: number;
 }
 declare const CoreInput: (props: IProps) => React.JSX.Element;
 export default CoreInput;

package/dist/components/CoreModal/index.d.ts

@@ -7,6 +7,7 @@ interface IProps {
     footer?: JSX.Element;
     handleSubmit?: any;
     onSubmit?: any;
+    bodyPadding?: string;
 }
 declare const CoreModal: (props: IProps) => React.JSX.Element;
 export default CoreModal;

package/dist/components/CoreSearch/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface IProps {
+    name?: string;
+    value: string;
+    onChange: (name: string, value: string) => void;
+    width?: number;
+}
+declare const CoreSearch: (props: IProps) => React.JSX.Element;
+export default CoreSearch;

package/dist/components/index.d.ts

@@ -7,3 +7,4 @@ export { default as CoreError } from "./CoreError";
 export { default as CoreModal } from "./CoreModal";
 export { default as CoreRange } from "./CoreRange";
 export { default as CoreTextArea } from "./CoreTextArea";
+export { default as CoreSearch } from "./CoreSearch";

package/dist/index.css

@@ -104,7 +104,8 @@
     height: 100%; }
     ._1KLz9 ._3qndF ._JzdCr {
       padding: 64px 56px; }
-      ._1KLz9 ._3qndF ._JzdCr p, ._1KLz9 ._3qndF ._JzdCr li {
+      ._1KLz9 ._3qndF ._JzdCr p,
+      ._1KLz9 ._3qndF ._JzdCr li {
         font-size: 14px;
         font-weight: 400; }
     ._1KLz9 ._3qndF ._19aCA {
@@ -271,9 +272,6 @@
     font-size: 18px;
     font-weight: 700; }
 
-._2GdIt {
-  padding: 16px 24px 40px 24px !important; }
-
 ._1dzD7 {
   display: flex;
   flex-direction: column; }
@@ -302,3 +300,32 @@
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 4px; }
+
+._wyI1K {
+  height: 32px;
+  border: 1px solid #e6e6eb;
+  border-radius: 8px;
+  padding-inline: 12px;
+  display: flex;
+  align-items: center;
+  gap: 2px; }
+  ._wyI1K:focus-within {
+    border: 2px solid #00afda; }
+  ._wyI1K::-moz-placeholder {
+    color: #a6a6ad; }
+  ._wyI1K::placeholder {
+    color: #a6a6ad; }
+  ._wyI1K:hover {
+    background-color: #e5f9ff; }
+    ._wyI1K:hover ._9XW-D {
+      background-color: #e5f9ff; }
+  ._wyI1K ._9XW-D {
+    font-size: 14px;
+    font-weight: 400;
+    flex: 1;
+    height: 18px;
+    border: none;
+    outline: none;
+    min-width: 0; }
+  ._wyI1K ._1nhXy {
+    cursor: pointer; }

package/dist/index.d.ts

@@ -13,10 +13,10 @@ import { ToastContainer, toast } from "react-toastify";
 import { Role } from "./containers/Login/configs/constants";
 import CustomPagination from "./components/Paginations/CustomPagination";
 import useGoogleSignOut from "./utils/hooks/useGoogleSignOut";
-import { CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea } from "./components";
+import { CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, CoreSearch } from "./components";
 import { getErrorMessage } from "./utils/getErrorMessage";
 import CustomSelect from "./components/Selects/CustomSelect";
 import CustomAsyncSelect from "./components/Selects/CustomAsyncSelect";
 import CustomCreatable from "./components/Selects/CustomCreatable";
 import CustomSelectOption from "./components/Selects/CustomSelectOption";
-export { setLoading, BASE_URL, ACCESS_TOKEN, DATE_TIME_MIN_VALUE, Login, store, historyCore, setAlert, setUser, setMenuCollapse, Loading, NotFound, LayoutContext, api, apiUpload, ConfirmDialog, CommonDialog, ToastContainer, toast, Role, CustomPagination, useGoogleSignOut, CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, getErrorMessage, CustomSelect, CustomAsyncSelect, CustomCreatable, CustomSelectOption };
+export { setLoading, BASE_URL, ACCESS_TOKEN, DATE_TIME_MIN_VALUE, Login, store, historyCore, setAlert, setUser, setMenuCollapse, Loading, NotFound, LayoutContext, api, apiUpload, ConfirmDialog, CommonDialog, ToastContainer, toast, Role, CustomPagination, useGoogleSignOut, CoreButton, CoreInput, CoreSelect, CoreCheckbox, CoreRadio, CoreError, CoreModal, CoreRange, CoreTextArea, CoreSearch, getErrorMessage, CustomSelect, CustomAsyncSelect, CustomCreatable, CustomSelectOption };

package/dist/index.js

@@ -1022,7 +1022,8 @@ var CoreInput = function CoreInput(props) {
     fontSize = props.fontSize,
     fontWeight = props.fontWeight,
     _onKeyDown = props.onKeyDown,
-    ref = props.ref;
+    ref = props.ref,
+    maxLength = props.maxLength;
   return React__default.createElement("div", {
     className: styles$1["core-input"] + "  " + styles$1[type] + " " + (error ? styles$1["error"] : ""),
     style: {
@@ -1043,7 +1044,9 @@ var CoreInput = function CoreInput(props) {
     onKeyDown: function onKeyDown(e) {
       return _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
     }
-  }, ref)), error && React__default.createElement(CoreError, {
+  }, ref, {
+    maxLength: maxLength
+  })), error && React__default.createElement(CoreError, {
     message: errorMessage
   }));
 };
@@ -1146,9 +1149,7 @@ var CoreSelect = function CoreSelect(props) {
   };
   var placeholderStyles = function placeholderStyles(base) {
     var styles = _extends({}, base, {
-      color: COLORS.lightGray,
-      position: "relative",
-      top: "-4px"
+      color: COLORS.lightGray
     });
     return styles;
   };
@@ -1162,15 +1163,14 @@ var CoreSelect = function CoreSelect(props) {
   };
   var valueContainerStyles = function valueContainerStyles(base) {
     var styles = _extends({}, base, {
-      height: isMulti ? undefined : "32px"
+      height: isMulti ? undefined : "32px",
+      position: "relative",
+      top: "-3px"
     });
     return styles;
   };
   var singleValueStyles = function singleValueStyles(base) {
-    var styles = _extends({}, base, {
-      position: "relative",
-      top: "-4px"
-    });
+    var styles = _extends({}, base);
     return styles;
   };
   var optionStyles = function optionStyles(base, state) {
@@ -1328,7 +1328,7 @@ var CoreRadio = function CoreRadio(props) {
   })));
 };
 
-var styles$6 = {"core-modal-header":"_2y5ln","core-modal-body":"_2GdIt"};
+var styles$6 = {"core-modal-header":"_2y5ln"};
 
 var CoreModal = function CoreModal(props) {
   var open = props.open,
@@ -1337,19 +1337,23 @@ var CoreModal = function CoreModal(props) {
     title = props.title,
     footer = props.footer,
     handleSubmit = props.handleSubmit,
-    onSubmit = props.onSubmit;
+    onSubmit = props.onSubmit,
+    _props$bodyPadding = props.bodyPadding,
+    bodyPadding = _props$bodyPadding === void 0 ? "24px" : _props$bodyPadding;
   return React__default.createElement(reactstrap.Modal, {
     isOpen: open,
     toggle: onClose,
-    centered: true,
-    className: styles$6["core-modal"]
+    centered: true
   }, React__default.createElement("form", {
-    onSubmit: onSubmit ? handleSubmit(onSubmit) : undefined
+    onSubmit: onSubmit ? handleSubmit(onSubmit) : undefined,
+    className: styles$6["core-modal-container"]
   }, React__default.createElement(reactstrap.ModalHeader, {
     toggle: onClose,
     className: styles$6["core-modal-header"]
   }, title), React__default.createElement(reactstrap.ModalBody, {
-    className: styles$6['core-modal-body']
+    style: {
+      padding: bodyPadding
+    }
   }, children), footer && React__default.createElement(reactstrap.ModalFooter, null, footer)));
 };
 
@@ -1415,6 +1419,100 @@ var CoreTextArea = function CoreTextArea(props) {
   }));
 };
 
+var styles$9 = {"core-search":"_wyI1K","input":"_9XW-D","clear":"_1nhXy"};
+
+var Search = function Search(props) {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? 16 : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "#A6A6AD" : _props$color;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M9.40376 9.40352C9.63808 9.1692 10.018 9.1692 10.2523 9.40352L13.4243 12.5755C13.6586 12.8098 13.6586 13.1897 13.4243 13.424C13.19 13.6584 12.8101 13.6584 12.5758 13.424L9.40376 10.252C9.16945 10.0177 9.16945 9.63783 9.40376 9.40352Z",
+    fill: color
+  }), React__default.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M6.9999 3.5999C5.12213 3.5999 3.5999 5.12213 3.5999 6.9999C3.5999 8.87767 5.12213 10.3999 6.9999 10.3999C8.87767 10.3999 10.3999 8.87767 10.3999 6.9999C10.3999 5.12213 8.87767 3.5999 6.9999 3.5999ZM2.3999 6.9999C2.3999 4.45939 4.45939 2.3999 6.9999 2.3999C9.54041 2.3999 11.5999 4.45939 11.5999 6.9999C11.5999 9.54041 9.54041 11.5999 6.9999 11.5999C4.45939 11.5999 2.3999 9.54041 2.3999 6.9999Z",
+    fill: color
+  }));
+};
+
+var Close = function Close(props) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? "#A6A6AD" : _props$color,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 16 : _props$size;
+  return React__default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("g", {
+    "clip-path": "url(#clip0_1060_48455)"
+  }, React__default.createElement("rect", {
+    x: "2.48438",
+    y: "3.61597",
+    width: "1.6",
+    height: "14",
+    rx: "0.8",
+    transform: "rotate(-45 2.48438 3.61597)",
+    fill: color
+  }), React__default.createElement("rect", {
+    x: "12.2427",
+    y: "2.34326",
+    width: "1.6",
+    height: "14",
+    rx: "0.8",
+    transform: "rotate(45 12.2427 2.34326)",
+    fill: color
+  })), React__default.createElement("defs", null, React__default.createElement("clipPath", {
+    id: "clip0_1060_48455"
+  }, React__default.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))));
+};
+
+var CoreSearch = function CoreSearch(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    value = props.value,
+    _onChange = props.onChange,
+    width = props.width;
+  var handleClear = function handleClear() {
+    _onChange(name, "");
+  };
+  return React__default.createElement("div", {
+    className: styles$9["core-search"],
+    style: {
+      width: width != null ? width : "100%"
+    },
+    tabIndex: 1
+  }, React__default.createElement("div", {
+    className: styles$9["icon"]
+  }, React__default.createElement(Search, null)), React__default.createElement("input", {
+    className: styles$9["input"],
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
+    },
+    placeholder: "Search..."
+  }), value.length ? React__default.createElement("div", {
+    className: styles$9["clear"],
+    onClick: handleClear
+  }, React__default.createElement(Close, null)) : null);
+};
+
 var getErrorMessage = function getErrorMessage(error, defaultErrorMessage) {
   var _error$response, _error$response$data, _error$response2, _error$response3, _error$response3$data;
   var errorMessage = error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.title;
@@ -1640,6 +1738,7 @@ exports.CoreInput = CoreInput;
 exports.CoreModal = CoreModal;
 exports.CoreRadio = CoreRadio;
 exports.CoreRange = CoreRange;
+exports.CoreSearch = CoreSearch;
 exports.CoreSelect = CoreSelect;
 exports.CoreTextArea = CoreTextArea;
 exports.CustomAsyncSelect = CustomAsyncSelect;