acsi-core 0.1.9 → 0.1.10

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,
@@ -1480,6 +1448,85 @@ 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", {
+    "fill-rule": "evenodd",
+    "clip-rule": "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", {
+    "fill-rule": "evenodd",
+    "clip-rule": "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,
@@ -1510,6 +1557,258 @@ var CoreSearch = function CoreSearch(props) {
   }, 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 +1890,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 +1925,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 +1990,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 +2011,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