acsi-core 0.1.9 → 0.1.11

package/dist/index.js

@@ -14,8 +14,8 @@ var reactRedux = require('react-redux');
 var gapiScript = require('gapi-script');
 var material = require('@mui/material');
 var reactToastify = require('react-toastify');
-var Select = require('react-select');
-var Select__default = _interopDefault(Select);
+var ReactSelect = require('react-select');
+var ReactSelect__default = _interopDefault(ReactSelect);
 var fa = require('react-icons/fa');
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
 
@@ -76,7 +76,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"};
@@ -1073,7 +1074,7 @@ function _objectWithoutPropertiesLoose(r, e) {
 var styles$3 = {"core-select":"_2sg12","label":"_1-XBo"};
 
 var Option = function Option(props) {
-  return React__default.createElement("div", null, React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement(CoreInput$1, {
+  return React__default.createElement("div", null, React__default.createElement(ReactSelect.components.Option, Object.assign({}, props), React__default.createElement(CoreInput$1, {
     checked: props.isSelected,
     onChange: function onChange() {
       return null;
@@ -1228,7 +1229,7 @@ var CoreSelect = function CoreSelect(props) {
     }
   }, label && React__default.createElement("span", {
     className: styles$3["label"]
-  }, label), React__default.createElement(Select__default, {
+  }, label), React__default.createElement(ReactSelect__default, {
     name: name,
     value: options.filter(function (i) {
       return value && (isMulti ? value.includes(i.value) : i.value === value);
@@ -1386,40 +1387,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__default.createElement("div", {
-    className: styles$8["core-text-area"],
-    style: {
-      width: width != null ? width : "100%"
-    }
-  }, label && React__default.createElement("label", null, label), React__default.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,
@@ -1433,13 +1401,13 @@ var Search = function Search(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, React__default.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__default.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
   }));
@@ -1483,14 +1451,95 @@ var Close = function Close(props) {
   }))));
 };
 
+var Info = function Info() {
+  return React__default.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.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__default.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__default.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 = React.useState(false),
+    isOpenTooltip = _useState[0],
+    setIsOpenTooltip = _useState[1];
+  var toggleTooltip = function toggleTooltip() {
+    return setIsOpenTooltip(!isOpenTooltip);
+  };
+  return React__default.createElement("div", {
+    className: styles$8["core-text-area"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React__default.createElement("div", {
+    className: styles$8['label']
+  }, React__default.createElement("div", {
+    className: styles$8['text']
+  }, label), isOptional && React__default.createElement("div", {
+    className: styles$8['optional']
+  }, "(optional)"), React__default.createElement("div", {
+    className: styles$8['icon'],
+    id: name
+  }, React__default.createElement(Info, null)), tooltip ? React__default.createElement(reactstrap.Tooltip, {
+    target: name,
+    isOpen: isOpenTooltip,
+    toggle: toggleTooltip
+  }, tooltip) : null), React__default.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__default.createElement("div", {
     className: styles$9["core-search"],
@@ -1506,13 +1555,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__default.createElement("div", {
     className: styles$9["clear"],
     onClick: handleClear
   }, React__default.createElement(Close, null)) : null);
 };
 
+var styles$a = {"core-select-compact":"_3ql5D","label":"_3fPQC"};
+
+var Option$1 = function Option(props) {
+  return React__default.createElement("div", null, React__default.createElement(ReactSelect.components.Option, Object.assign({}, props), React__default.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__default.createElement("div", {
+    className: "" + styles$a["core-select-compact"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React__default.createElement("div", {
+    className: styles$a["label"]
+  }, React__default.createElement("label", null, label), React__default.createElement(Info, null)), React__default.createElement(ReactSelect__default, {
+    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__default.createElement("div", {
+    className: "" + styles$b["core-input-compact"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, label && React__default.createElement("div", {
+    className: styles$b["label"]
+  }, React__default.createElement("label", null, label), React__default.createElement(Info, null)), React__default.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__default.createElement("div", {
+    className: "" + styles$c["core-label-input"],
+    style: {
+      width: width != null ? width : "100%"
+    }
+  }, React__default.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;
@@ -1564,13 +1870,13 @@ var customStyles = {
 };
 
 var DropdownIndicator = function DropdownIndicator(props) {
-  return React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), React__default.createElement(fa.FaCaretDown, {
+  return React__default.createElement(ReactSelect.components.DropdownIndicator, Object.assign({}, props), React__default.createElement(fa.FaCaretDown, {
     size: 20,
     color: styleGlobal.darker
   }));
 };
 var CustomOption = function CustomOption(props) {
-  return React__default.createElement(Select.components.Option, Object.assign({}, props), React__default.createElement("div", {
+  return React__default.createElement(ReactSelect.components.Option, Object.assign({}, props), React__default.createElement("div", {
     style: {
       fontSize: "14px",
       fontWeight: 500
@@ -1594,7 +1900,7 @@ var CustomSelect = function CustomSelect(_ref) {
   }) : options === null || options === void 0 ? void 0 : options.find(function (i) {
     return i.value == value;
   });
-  return React__default.createElement(Select__default, Object.assign({
+  return React__default.createElement(ReactSelect__default, Object.assign({
     isDisabled: isDisabled,
     options: options,
     value: !isDefault ? initialValues != null ? initialValues : null : undefined,
@@ -1629,7 +1935,7 @@ var CustomAsyncSelect = function CustomAsyncSelect(_ref) {
   }) : options.find(function (i) {
     return i.value == value;
   });
-  return React__default.createElement(Select__default, Object.assign({
+  return React__default.createElement(ReactSelect__default, Object.assign({
     isDisabled: isDisabled,
     options: options,
     value: !isDefault ? initialValues : undefined,
@@ -1694,7 +2000,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__default.createElement(Select__default, Object.assign({
+  return React__default.createElement(ReactSelect__default, Object.assign({
     isDisabled: isDisabled,
     options: options,
     value: value,
@@ -1735,12 +2041,15 @@ exports.CoreButton = CoreButton;
 exports.CoreCheckbox = CoreInput$1;
 exports.CoreError = CoreError;
 exports.CoreInput = CoreInput;
+exports.CoreInputCompact = CoreInputCompact;
 exports.CoreModal = CoreModal;
 exports.CoreRadio = CoreRadio;
 exports.CoreRange = CoreRange;
 exports.CoreSearch = CoreSearch;
 exports.CoreSelect = CoreSelect;
+exports.CoreSelectCompact = CoreSelectCompact;
 exports.CoreTextArea = CoreTextArea;
+exports.CoreTitleInput = CoreTitleInput;
 exports.CustomAsyncSelect = CustomAsyncSelect;
 exports.CustomCreatable = CustomCreatable;
 exports.CustomPagination = CustomPagination;