ecomlab-components-next 0.1.19 → 0.1.21

package/dist/components/Inputs/DropDownSelector/DownSelector.stories.js

@@ -0,0 +1,279 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SelectorWithFetchCallback = exports.SelectorWithDefaultValueAll = exports.SelectorWithDefaultValue = exports.SelectorSetInputChange = exports.Selector = exports.DropTest = exports.Default = void 0;
+var _DownSelector = _interopRequireDefault(require("./DownSelector"));
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports["default"] = {
+  title: 'DropdownSelector',
+  component: _DownSelector["default"],
+  args: {
+    defaultValue: {
+      label: 'value 1',
+      value: 1
+    },
+    setState: function setState() {},
+    options: [{
+      label: 'value 1 dddddddd dddddd',
+      value: 1
+    }, {
+      label: 'value 2',
+      value: 2
+    }, {
+      label: 'value 3',
+      value: 3
+    }, {
+      label: 'value 4',
+      value: 4
+    }, {
+      label: 'value 5',
+      value: 5
+    }, {
+      label: 'value 6 очень дллиииииииииииииинныыыыыыыыыыыыыыыыыыыыыыыыыыыыыыыый teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext',
+      value: 6
+    }, {
+      label: 'value 1',
+      value: 1
+    }, {
+      label: 'value 2',
+      value: 2
+    }, {
+      label: 'value 3',
+      value: 3
+    }, {
+      label: 'value 4',
+      value: 4
+    }, {
+      label: 'value 5',
+      value: 5
+    }, {
+      label: 'value 1',
+      value: 1
+    }, {
+      label: 'value 2',
+      value: 2
+    }, {
+      label: 'value 3',
+      value: 3
+    }, {
+      label: 'value 4',
+      value: 4
+    }, {
+      label: 'value 5',
+      value: 5
+    }]
+  }
+};
+var Default = exports.Default = {
+  render: function render(args) {
+    return /*#__PURE__*/React.createElement(_DownSelector["default"], _extends({}, args, {
+      state: {
+        label: 'asd',
+        value: 'asdasd'
+      }
+    }));
+  }
+};
+var Selector = exports.Selector = {
+  args: {
+    id: 1,
+    defaultValue: {
+      label: 'value 1',
+      value: 1
+    },
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'Бренд',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    showIndicator: true,
+    icon: false,
+    iconPlaceholder: false,
+    size: 'l'
+  }
+};
+var SelectorWithDefaultValue = exports.SelectorWithDefaultValue = {
+  args: _defineProperty(_defineProperty({
+    id: 2,
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'placeholder',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    defaultValue: {
+      label: 'value 1',
+      value: 1
+    },
+    showIndicator: true,
+    icon: false,
+    iconPlaceholder: false
+  }, "disabled", true), "tooltip", 'Подсказка')
+};
+var SelectorWithDefaultValueAll = exports.SelectorWithDefaultValueAll = {
+  args: _defineProperty(_defineProperty(_defineProperty({
+    id: 2,
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'placeholder',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    defaultValue: {
+      label: 'value 1',
+      value: 1
+    },
+    showIndicator: true,
+    icon: false,
+    iconPlaceholder: false
+  }, "disabled", true), "tooltip", 'Подсказка'), "al", false)
+};
+var SelectorSetInputChange = exports.SelectorSetInputChange = {
+  args: {
+    id: 3,
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'placeholder',
+    style: {},
+    multi: false,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    showIndicator: true,
+    icon: false,
+    iconPlaceholder: false,
+    setInputChange: function setInputChange(args) {
+      return console.log("setInputChange called with ".concat(args));
+    },
+    size: 'l'
+  }
+};
+var SelectorWithFetchCallback = exports.SelectorWithFetchCallback = {
+  args: {
+    id: 4,
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'placeholder',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    showIndicator: true,
+    state: [{
+      label: 'value',
+      value: 'value'
+    }, {
+      label: 'value2',
+      value: 'value2'
+    }],
+    icon: false,
+    iconPlaceholder: false,
+    fetchCallback: function fetchCallback(e) {
+      return e;
+    },
+    size: 'l'
+  }
+};
+var DropTest = exports.DropTest = function DropTest() {
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    _setState = _useState2[1];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: '60px',
+      background: '#F6F9FC',
+      height: '800px'
+    }
+  }, /*#__PURE__*/React.createElement(_DownSelector["default"], {
+    options_prop: [{
+      label: 'valuefffffffffffffffffffffffffffffff 1 value 1 value 1 value 1 value 1 value 1 value 1 value 1',
+      value: 1
+    }, {
+      label: 'value 2',
+      value: 2
+    }, {
+      label: 'value 3',
+      value: 3
+    }, {
+      label: 'value 4',
+      value: 4
+    }, {
+      label: 'value 5',
+      value: 5
+    }, {
+      label: 'value 6',
+      value: 6
+    }, {
+      label: 'value 7',
+      value: 7
+    }, {
+      label: 'value 8',
+      value: 8
+    }, {
+      label: 'value 9',
+      value: 9
+    }, {
+      label: 'value 11',
+      value: 11
+    }, {
+      label: 'value 12',
+      value: 12
+    }, {
+      label: 'value 13',
+      value: 13
+    }, {
+      label: 'value 14',
+      value: 14
+    }, {
+      label: 'value 15',
+      value: 15
+    }, {
+      label: 'value 16',
+      value: 16
+    }, {
+      label: 'value 17',
+      value: 17
+    }, {
+      label: 'value 18',
+      value: 18
+    }, {
+      label: 'value 19',
+      value: 19
+    }],
+    defaultValue: [{
+      label: 'All',
+      value: 'all'
+    }],
+    placeholder: "placeholder",
+    multi: true,
+    state: state,
+    all: false,
+    setState: function setState(e) {
+      return _setState(e);
+    },
+    lang: "en"
+  }));
+};

package/dist/components/Inputs/DropDownSelector/DropdownSelector.scss

@@ -0,0 +1,391 @@
+
+.selector_wrapper {
+    * {
+        font-family: 'Golos text';
+    }
+}
+
+.react-select-container {
+    background-color: #57CC6A !important;
+    border: 1px solid black !important;
+}
+
+.react-select {
+    &__drop-container {
+        display: flex;
+    }
+
+    &__col {
+        display: flex;
+        flex-direction: column;
+        width: 50%;
+
+        &:nth-child(1) {
+            border-right: 2px solid #EDEFED;
+        }
+    }
+
+    &__btn-close {
+        border: none;
+        background-color: inherit;
+        cursor: pointer;
+    }
+
+    &__label {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 20px;
+        gap: 8px;
+        color: #020617;
+        font-family: "Golos Text";
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 16px;
+        border-bottom: 1px solid #EDEFED;
+        position: sticky;
+        top: 0;
+        background-color: #fff;
+        cursor: pointer;
+
+        .checkbox-container {
+            pointer-events: none;
+        }
+    }
+
+    &__item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 40px;
+        border-bottom: 1px solid #E0E7F2;
+        padding: 12px 20px;
+
+        &:hover,
+        &:active {
+            background-color: #F5F5FB;
+            border-radius: 0px;
+            cursor: default;
+        }
+
+        &:last-child {
+            border: none;
+        }
+
+        .text {
+            color: #020617;
+            font-family: "Golos Text";
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 14px;
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            font-size: 11px;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            word-wrap: break-word;
+        }
+    }
+
+    &__count {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-radius: 0px;
+        color: #020617;
+        font-size: 12px;
+        padding: 3px;
+        padding-left: 0px;
+        box-sizing: border-box;
+        background: #fff;
+        border: none;
+        font-family: "Golos Text";
+        margin: 0px;
+    }
+
+    &__no-options {
+        color: #020617;
+        font-family: "Golos Text";
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 12px;
+        padding: 4px;
+        padding: 12px 20px;
+    }
+}
+
+
+
+
+.selector_wrapper_size-l,
+.selector_wrapper_value-top_size-l,
+.selector_wrapper,
+.selector_wrapper_value-top,
+.selector_wrapper_disabled {
+    display: flex;
+    padding: 0;
+    height: auto;
+    padding: 0;
+    width: 100%;
+    min-height: 40px;
+    min-width: 210px;
+    max-width: 210px;
+    height: auto;
+    border-radius: 8px;
+    position: relative;
+
+    &__text_tooltip {
+        padding-left: 8px;
+        color: #94A3B8;
+        height: 16px;
+        font-family: "Golos Text";
+        font-size: 11px;
+        height: auto;
+        margin-top: 4px;
+    }
+
+    //динамический placeholder
+    .placeholder-dinamyc,
+    .placeholder-dinamyc_min,
+    .placeholder-dinamyc_min-blue {
+        width: 100%;
+        position: absolute;
+        top: calc(50% - 8px);
+        left: 14px;
+        pointer-events: none;
+
+        label {
+            position: absolute;
+            color: #64748B;
+            font-family: "Golos Text";
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 16px;
+            z-index: 1;
+            transition: 0.3s;
+        }
+
+        &_min,
+        &_min-blue {
+            display: inline-block;
+            top: -5px;
+            z-index: 1;
+            left: 8px;
+
+            label {
+                position: absolute;
+                z-index: 0;
+                color: #53616E;
+                font-family: "Golos Text";
+                font-size: 11px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 10px;
+                transition: 0.3s;
+                padding-left: 6px;
+                padding-right: 6px;
+
+                &:after {
+                    content: '';
+                    display: inline-block;
+                    position: absolute;
+                    margin-top: 5px;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 6px;
+                    background-color: white;
+                    z-index: -1;
+                }
+            }
+        }
+
+        &_min-blue {
+            label {
+                color: #0B110B;
+            }
+        }
+    }
+
+    &_disabled {
+
+        .placeholder-dinamyc,
+        .placeholder-dinamyc_min,
+        .placeholder-dinamyc_min-blue {
+            label {
+                color: #D3DEE7;
+            }
+
+            &_min,
+            &_min-blue {
+                label {
+                    color: #D3DEE7;
+                }
+            }
+
+            &_min-blue {
+                label {
+                    color: #D3DEE7;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        outline: none;
+    }
+
+    .dropdown_selector {
+
+        width: 100%;
+        border-radius: 8px;
+        position: relative;
+        border: 1px solid #E0E7F2;
+        min-height: 36px;
+
+        &:hover {
+            border: 1px solid #64748B;
+        }
+
+        &:active,
+        &:focus-within {
+            border: 1px solid #57CC6A;
+            border-radius: 8px;
+
+            .css-t3ipsp-control {
+                &:focus-within {
+                    border: none;
+                }
+            }
+        }
+
+        .css-13cymwt-control,
+        .css-t3ipsp-control {
+            min-height: 36px;
+            height: 100%;
+            outline: none;
+            box-shadow: none;
+        }
+    }
+
+    .css-16xfy0z-control {
+        background-color: white;
+    }
+
+    .dropdown_selector__err {
+        border: 1px solid red;
+    }
+
+    .dropdown_selector>div {
+        border-radius: 8px;
+        // height: 100%;
+        // min-height: 100%;
+        outline: none;
+        border: none;
+    }
+
+    // options выпадающего списка
+    .option-item {
+        border-radius: 0px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        min-height: 40px;
+        border-bottom: 1px solid var(--stroke-primary-primary, #E0E7F2);
+        background-color: white;
+        gap: 8px;
+
+
+        &:last-child {
+            border: none;
+        }
+
+        &:hover,
+        &:active {
+            background-color: #F5F5FB;
+            border-radius: 0px;
+            cursor: default;
+        }
+
+        .text {
+            color: #020617;
+            font-family: "Golos Text";
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 14px;
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            font-size: 11px;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            word-wrap: break-word;
+        }
+    }
+
+    .no-options {
+        color: #020617;
+        font-family: "Golos Text";
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 12px;
+        padding: 4px;
+    }
+
+    .option-task {
+        border-radius: 0px;
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        min-height: 40px;
+        border-bottom: 1px solid #E0E7F2;
+
+        .text {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            font-size: 13px;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+
+        &:last-child {
+            border: none;
+        }
+
+        &:hover,
+        &:active {
+            background-color: #E6F7FF;
+            border-radius: 0px;
+            cursor: default;
+        }
+
+        .text_min {
+            font-size: 11px;
+
+            span {
+                color: #8F99A3;
+            }
+        }
+    }
+
+    &_size-l {
+
+        .dropdown_selector {
+            min-height: 56px;
+
+            &:disabled {
+                min-height: 56px;
+            }
+        }
+    }
+}

package/dist/components/Inputs/DropDownSelector/img/close_icon.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Basic icons ">
+<path id="Vector" d="M11 3L3 11" stroke="#475569" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M3 3L11 11" stroke="#475569" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/components/Inputs/DropDownSelector/img/close_icon_disabled.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Basic icons ">
+<path id="Vector" d="M11 3L3 11" stroke="#D3DEE7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M3 3L11 11" stroke="#D3DEE7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>