acsi-core 0.1.9 → 0.1.11

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import { createBrowserHistory } from 'history';
 import { createAction, createReducer, configureStore } from '@reduxjs/toolkit';
 import React, { useState, useCallback, useEffect, Fragment } from 'react';
-import { Row, Col, Form, Modal, ModalHeader, ModalBody, ModalFooter, Button, Pagination, PaginationItem, PaginationLink, FormGroup, Input, Label } from 'reactstrap';
+import { Row, Col, Form, Modal, ModalHeader, ModalBody, ModalFooter, Button, Pagination, PaginationItem, PaginationLink, FormGroup, Input, Label, Tooltip } from 'reactstrap';
 import GoogleLogin, { useGoogleLogout } from '@leecheuk/react-google-login';
 import axios from 'axios';
 import moment from 'moment';
@@ -10,7 +10,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { gapi } from 'gapi-script';
 import { Box, Typography } from '@mui/material';
 export { ToastContainer, toast } from 'react-toastify';
-import Select, { components } from 'react-select';
+import ReactSelect, { components } from 'react-select';
 import { FaCaretDown } from 'react-icons/fa';
 import CreatableSelect from 'react-select/creatable';
 
@@ -71,7 +71,8 @@ var COLORS = {
   darkBrandBlue: "#025675",
   darkBrandBlueHover: "#007a99",
   brandAccent: "#ffce09",
-  red: "#ce3636"
+  red: "#ce3636",
+  lightYellow: "#fff5ce"
 };
 
 var styleGlobal = {"signup_wrap":"_1KLz9","box-signin":"_2Jo1o","signin_title":"_3egBO","signup_link":"_1DoIT","google_button":"_34hK_","box-field":"_2e9xO","box-input":"_3zXRp","box-button-email":"_21FPk","box-signin-container":"_1QERu","box-signin-text":"_2-znH","box-signin-logo":"_1aB2m","box-right":"_3qndF","box-right-body":"_JzdCr","box-right-footer":"_19aCA","pr-30":"_2HB5r"};
@@ -1225,7 +1226,7 @@ var CoreSelect = function CoreSelect(props) {
     }
   }, label && React.createElement("span", {
     className: styles$3["label"]
-  }, label), React.createElement(Select, {
+  }, label), React.createElement(ReactSelect, {
     name: name,
     value: options.filter(function (i) {
       return value && (isMulti ? value.includes(i.value) : i.value === value);
@@ -1383,40 +1384,7 @@ var CoreRange = function CoreRange(props) {
   }));
 };
 
-var styles$8 = {"core-text-area":"_1b_C3"};
-
-var CoreTextArea = function CoreTextArea(props) {
-  var name = props.name,
-    _onChange = props.onChange,
-    value = props.value,
-    _props$cols = props.cols,
-    cols = _props$cols === void 0 ? 0 : _props$cols,
-    label = props.label,
-    _props$rows = props.rows,
-    rows = _props$rows === void 0 ? 2 : _props$rows,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
-    width = props.width;
-  return React.createElement("div", {
-    className: styles$8["core-text-area"],
-    style: {
-      width: width != null ? width : "100%"
-    }
-  }, label && React.createElement("label", null, label), React.createElement("textarea", {
-    style: {
-      whiteSpace: "pre-wrap"
-    },
-    placeholder: placeholder,
-    value: value,
-    cols: cols,
-    rows: rows,
-    onChange: function onChange(e) {
-      return _onChange(name, e.target.value);
-    }
-  }));
-};
-
-var styles$9 = {"core-search":"_wyI1K","input":"_9XW-D","clear":"_1nhXy"};
+var styles$8 = {"core-text-area":"_1b_C3","label":"_15n2K","optional":"_1fHZB","icon":"_38AfS"};
 
 var Search = function Search(props) {
   var _props$size = props.size,
@@ -1430,13 +1398,13 @@ var Search = function Search(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
+    fillRule: "evenodd",
+    clipRule: "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.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
+    fillRule: "evenodd",
+    clipRule: "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
   }));
@@ -1480,14 +1448,95 @@ var Close = function Close(props) {
   }))));
 };
 
+var Info = function Info() {
+  return React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.0002 2.1002C3.84628 2.1002 2.1002 3.84628 2.1002 6.0002C2.1002 8.15411 3.84628 9.9002 6.0002 9.9002C8.15411 9.9002 9.9002 8.15411 9.9002 6.0002C9.9002 3.84628 8.15411 2.1002 6.0002 2.1002ZM1.2002 6.0002C1.2002 3.34923 3.34923 1.2002 6.0002 1.2002C8.65116 1.2002 10.8002 3.34923 10.8002 6.0002C10.8002 8.65116 8.65116 10.8002 6.0002 10.8002C3.34923 10.8002 1.2002 8.65116 1.2002 6.0002Z",
+    fill: "#A6A6AD"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.9998 5.1001C6.24833 5.1001 6.4498 5.30157 6.4498 5.5501V8.2915C6.4498 8.54003 6.24833 8.7415 5.9998 8.7415C5.75128 8.7415 5.5498 8.54003 5.5498 8.2915V5.5501C5.5498 5.30157 5.75128 5.1001 5.9998 5.1001Z",
+    fill: "#A6A6AD"
+  }), React.createElement("path", {
+    d: "M5.9999 4.6502C5.6687 4.6502 5.3999 4.3808 5.3999 4.0502C5.3999 3.7196 5.6687 3.4502 5.9999 3.4502C6.3311 3.4502 6.5999 3.7196 6.5999 4.0502C6.5999 4.3808 6.3311 4.6502 5.9999 4.6502Z",
+    fill: "#A6A6AD"
+  }));
+};
+
+var CoreTextArea = function CoreTextArea(props) {
+  var name = props.name,
+    _onChange = props.onChange,
+    value = props.value,
+    _props$cols = props.cols,
+    cols = _props$cols === void 0 ? 0 : _props$cols,
+    label = props.label,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 2 : _props$rows,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
+    width = props.width,
+    _props$tooltip = props.tooltip,
+    tooltip = _props$tooltip === void 0 ? '' : _props$tooltip,
+    _props$isOptional = props.isOptional,
+    isOptional = _props$isOptional === void 0 ? false : _props$isOptional;
+  var _useState = useState(false),
+    isOpenTooltip = _useState[0],
+    setIsOpenTooltip = _useState[1];
+  var toggleTooltip = function toggleTooltip() {
+    return setIsOpenTooltip(!isOpenTooltip);
+  };
+  return React.createElement("div", {
+    className: styles$8["core-text-area"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React.createElement("div", {
+    className: styles$8['label']
+  }, React.createElement("div", {
+    className: styles$8['text']
+  }, label), isOptional && React.createElement("div", {
+    className: styles$8['optional']
+  }, "(optional)"), React.createElement("div", {
+    className: styles$8['icon'],
+    id: name
+  }, React.createElement(Info, null)), tooltip ? React.createElement(Tooltip, {
+    target: name,
+    isOpen: isOpenTooltip,
+    toggle: toggleTooltip
+  }, tooltip) : null), React.createElement("textarea", {
+    style: {
+      whiteSpace: "pre-wrap"
+    },
+    placeholder: placeholder,
+    value: value,
+    cols: cols,
+    rows: rows,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
+    }
+  }));
+};
+
+var styles$9 = {"core-search":"_wyI1K","input":"_9XW-D","clear":"_1nhXy"};
+
 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;
+    width = props.width,
+    onPressEnter = props.onPressEnter;
   var handleClear = function handleClear() {
     _onChange(name, "");
+    onPressEnter && onPressEnter();
   };
   return React.createElement("div", {
     className: styles$9["core-search"],
@@ -1503,13 +1552,270 @@ var CoreSearch = function CoreSearch(props) {
     onChange: function onChange(e) {
       return _onChange(name, e.target.value);
     },
-    placeholder: "Search..."
+    placeholder: "Search...",
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter") {
+        onPressEnter && onPressEnter();
+      }
+    }
   }), value.length ? React.createElement("div", {
     className: styles$9["clear"],
     onClick: handleClear
   }, React.createElement(Close, null)) : null);
 };
 
+var styles$a = {"core-select-compact":"_3ql5D","label":"_3fPQC"};
+
+var Option$1 = function Option(props) {
+  return React.createElement("div", null, React.createElement(components.Option, Object.assign({}, props), React.createElement(CoreInput$1, {
+    checked: props.isSelected,
+    onChange: function onChange() {
+      return null;
+    },
+    name: "",
+    label: props.label
+  })));
+};
+var CoreSelectCompact = function CoreSelectCompact(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    options = props.options,
+    value = props.value,
+    onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    width = props.width,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select" : _props$placeholder,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$isShowDropdown = props.isShowDropdown,
+    isShowDropdown = _props$isShowDropdown === void 0 ? false : _props$isShowDropdown,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error;
+  var handleChange = function handleChange(value) {
+    var newValue = isMulti ? value === null || value === void 0 ? void 0 : value.map(function (item) {
+      return item.value;
+    }) : value === null || value === void 0 ? void 0 : value.value;
+    onChange(name, newValue);
+  };
+  var controlStyle = function controlStyle(base, state) {
+    var styles = _extends({}, base, {
+      fontSize: "14px",
+      fontWeight: "400",
+      padding: "0",
+      backgroundColor: state.isDisabled ? "transparent" : error ? COLORS.lightYellow : COLORS.white,
+      border: "none",
+      height: isMulti ? undefined : "26px",
+      minHeight: "26px",
+      boxShadow: "none",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: COLORS.lightBlueHover
+      },
+      "&>div": {
+        padding: "0 2px"
+      }
+    });
+    return styles;
+  };
+  var inputStyles = function inputStyles(base) {
+    var styles = _extends({}, base, {
+      margin: "0",
+      padding: "0",
+      color: "inherit",
+      position: "relative",
+      top: "-2px"
+    });
+    return styles;
+  };
+  var placeholderStyles = function placeholderStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.lightGray
+    });
+    return styles;
+  };
+  var dropdownIndicatorStyles = function dropdownIndicatorStyles(base) {
+    var styles = _extends({}, base, {
+      position: "relative",
+      padding: "2px 0"
+    });
+    return styles;
+  };
+  var indicatorsContainerStyles = function indicatorsContainerStyles(base) {
+    var styles = _extends({}, base, {
+      display: isShowDropdown && !isMulti ? "block" : "none"
+    });
+    return styles;
+  };
+  var valueContainerStyles = function valueContainerStyles(base) {
+    var styles = _extends({}, base, {
+      height: isMulti ? undefined : "26px",
+      position: "relative"
+    });
+    return styles;
+  };
+  var singleValueStyles = function singleValueStyles(base) {
+    var styles = _extends({}, base);
+    return styles;
+  };
+  var optionStyles = function optionStyles(base, state) {
+    var styles = _extends({}, base, {
+      padding: "8px",
+      borderRadius: "8px",
+      cursor: "pointer",
+      fontSize: "14px",
+      fontWeight: 400,
+      color: COLORS.blackText,
+      backgroundColor: state.isSelected ? COLORS.lightBlueHover : "transparent",
+      "&:hover": {
+        backgroundColor: COLORS.lightBlueHover
+      }
+    });
+    return styles;
+  };
+  var multiValueStyles = function multiValueStyles(base) {
+    var styles = _extends({}, base, {
+      backgroundColor: COLORS.lightBlue,
+      borderRadius: "4px",
+      padding: "0 4px",
+      display: "flex",
+      alignItems: "center",
+      fontSize: "13px",
+      color: COLORS.blackText
+    });
+    return styles;
+  };
+  var multiValueRemoveStyles = function multiValueRemoveStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.lightGray,
+      cursor: "pointer"
+    });
+    return styles;
+  };
+  var multiValueLabelStyles = function multiValueLabelStyles(base) {
+    var styles = _extends({}, base, {
+      color: COLORS.blackText,
+      fontWeight: "400",
+      fontSize: "13px",
+      padding: 0
+    });
+    return styles;
+  };
+  return React.createElement("div", {
+    className: "" + styles$a["core-select-compact"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React.createElement("div", {
+    className: styles$a["label"]
+  }, React.createElement("label", null, label), React.createElement(Info, null)), React.createElement(ReactSelect, {
+    name: name,
+    value: options.filter(function (i) {
+      return value && (isMulti ? value.includes(i.value) : i.value === value);
+    }),
+    onChange: handleChange,
+    placeholder: placeholder,
+    isDisabled: disabled,
+    isMulti: isMulti,
+    closeMenuOnSelect: !isMulti,
+    hideSelectedOptions: false,
+    options: options,
+    components: isMulti ? {
+      Option: Option$1
+    } : undefined,
+    styles: {
+      control: controlStyle,
+      input: inputStyles,
+      placeholder: placeholderStyles,
+      dropdownIndicator: dropdownIndicatorStyles,
+      indicatorSeparator: function indicatorSeparator() {
+        return {
+          display: "none"
+        };
+      },
+      indicatorsContainer: indicatorsContainerStyles,
+      valueContainer: valueContainerStyles,
+      singleValue: singleValueStyles,
+      option: optionStyles,
+      multiValue: multiValueStyles,
+      multiValueRemove: multiValueRemoveStyles,
+      multiValueLabel: multiValueLabelStyles
+    }
+  }));
+};
+
+var styles$b = {"core-input-compact":"_1qmXW","label":"_1argp"};
+
+var CoreInputCompact = function CoreInputCompact(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    value = props.value,
+    _onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    width = props.width,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
+    error = props.error;
+  return React.createElement("div", {
+    className: "" + styles$b["core-input-compact"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React.createElement("div", {
+    className: styles$b["label"]
+  }, React.createElement("label", null, label), React.createElement(Info, null)), React.createElement("input", {
+    style: {
+      backgroundColor: error ? COLORS.lightYellow : "transparent"
+    },
+    name: name,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
+    },
+    disabled: disabled,
+    placeholder: placeholder
+  }));
+};
+
+var styles$c = {"core-label-input":"_2YqZu","size-h1":"_23-uu","size-h2":"_16lQL"};
+
+var CoreTitleInput = function CoreTitleInput(props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? "" : _props$name,
+    value = props.value,
+    _onChange = props.onChange,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    width = props.width,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Type here" : _props$placeholder,
+    error = props.error,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "h1" : _props$size;
+  return React.createElement("div", {
+    className: "" + styles$c["core-label-input"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, React.createElement("input", {
+    className: "" + styles$c["size-" + size],
+    style: {
+      backgroundColor: error ? COLORS.lightYellow : "transparent"
+    },
+    name: name,
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(name, e.target.value);
+    },
+    disabled: disabled,
+    placeholder: placeholder
+  }));
+};
+
 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;
@@ -1591,7 +1897,7 @@ var CustomSelect = function CustomSelect(_ref) {
   }) : options === null || options === void 0 ? void 0 : options.find(function (i) {
     return i.value == value;
   });
-  return React.createElement(Select, Object.assign({
+  return React.createElement(ReactSelect, Object.assign({
     isDisabled: isDisabled,
     options: options,
     value: !isDefault ? initialValues != null ? initialValues : null : undefined,
@@ -1626,7 +1932,7 @@ var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
   }) : options.find(function (i) {
     return i.value == value;
   });
-  return React.createElement(Select, Object.assign({
+  return React.createElement(ReactSelect, Object.assign({
     isDisabled: isDisabled,
     options: options,
     value: !isDefault ? initialValues : undefined,
@@ -1691,7 +1997,7 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
   var initialValues = defaultValue !== null && typeof defaultValue !== "undefined" ? options.find(function (option) {
     return option.value === defaultValue;
   }) || null : null;
-  return React.createElement(Select, Object.assign({
+  return React.createElement(ReactSelect, Object.assign({
     isDisabled: isDisabled,
     options: options,
     value: value,
@@ -1712,5 +2018,5 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
 
 var historyCore = createBrowserHistory();
 
-export { ACCESS_TOKEN, BASE_URL, CommonDialog, ConfirmDialog, CoreButton, CoreInput$1 as CoreCheckbox, CoreError, CoreInput, CoreModal, CoreRadio, CoreRange, CoreSearch, CoreSelect, CoreTextArea, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, CustomSelectOption, DATE_TIME_MIN_VALUE, LayoutContext, Loading, Login, NotFound, Role, api$1 as api, apiUpload$1 as apiUpload, getErrorMessage, historyCore, setAlert, setLoading, setMenuCollapse, setUser, store, useGoogleSignOut };
+export { ACCESS_TOKEN, BASE_URL, CommonDialog, ConfirmDialog, CoreButton, CoreInput$1 as CoreCheckbox, CoreError, CoreInput, CoreInputCompact, CoreModal, CoreRadio, CoreRange, CoreSearch, CoreSelect, CoreSelectCompact, CoreTextArea, CoreTitleInput, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, CustomSelectOption, DATE_TIME_MIN_VALUE, LayoutContext, Loading, Login, NotFound, Role, api$1 as api, apiUpload$1 as apiUpload, getErrorMessage, historyCore, setAlert, setLoading, setMenuCollapse, setUser, store, useGoogleSignOut };
 //# sourceMappingURL=index.modern.js.map