@zohodesk/components 1.0.0-temp-220.11 → 1.0.0-temp-230

package/lib/ColorSelect/ColorSingleSelect.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Select = _interopRequireDefault(require("../Select/Select"));
+
+var _propTypes = require("./props/propTypes");
+
+var _defaultProps = require("./props/defaultProps");
+
+var _helpers = require("./common/helpers");
+
+var _Box = _interopRequireDefault(require("../Layout/Box"));
+
+var _Container = _interopRequireDefault(require("../Layout/Container"));
+
+var _ArrowIcon = _interopRequireDefault(require("../Select/ArrowIcon/ArrowIcon"));
+
+var _ArrowIconModule = _interopRequireDefault(require("../Select/ArrowIcon/ArrowIcon.module.css"));
+
+var _excluded = ["options", "renderCustomColorIndicator", "renderCustomSelectedValue", "customClass", "customProps"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ColorSingleSelect(props) {
+  var options = props.options,
+      renderCustomColorIndicator = props.renderCustomColorIndicator,
+      renderCustomSelectedValue = props.renderCustomSelectedValue,
+      customClass = props.customClass,
+      customProps = props.customProps,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var renderSelectedValue = function renderSelectedValue(data) {
+    var isPopupOpen = data.isPopupOpen;
+    return /*#__PURE__*/_react["default"].createElement(_Container["default"], {
+      alignBox: "row",
+      align: "between"
+    }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+      shrink: true
+    }, renderCustomSelectedValue ? renderCustomSelectedValue(data) : (0, _helpers.renderColoredTag)(data)), /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isRotated: isPopupOpen
+    }));
+  };
+
+  var colorIndicator = renderCustomColorIndicator || _helpers.renderColorIndicator;
+  return /*#__PURE__*/_react["default"].createElement(_Select["default"], _extends({}, rest, {
+    className: "".concat(_ArrowIconModule["default"].arrowIconContainer, " ").concat(customClass),
+    options: options,
+    renderCustomSelectedValue: renderSelectedValue,
+    customProps: _objectSpread(_objectSpread({}, customProps), {}, {
+      SuggestionsProps: _objectSpread(_objectSpread({}, customProps.SuggestionsProps), {}, {
+        renderBeforeChildren: colorIndicator
+      })
+    })
+  }));
+}
+
+ColorSingleSelect.propTypes = _propTypes.ColorSingleSelect_propTypes;
+ColorSingleSelect.defaultProps = _defaultProps.ColorSingleSelect_defaultProps;
+var _default = ColorSingleSelect;
+exports["default"] = _default;

package/lib/ColorSelect/__tests__/ColorMultiSelect.spec.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ColorMultiSelect = _interopRequireDefault(require("../ColorMultiSelect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var options = [{
+  id: 1,
+  text: 'Red',
+  colorCode: '#ff6e6e'
+}, {
+  id: 2,
+  text: 'Green',
+  colorCode: '#77d779'
+}, {
+  id: 3,
+  text: 'Blue',
+  colorCode: '#649cff'
+}];
+describe('ColorMultiSelect', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the default selected value', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
+      options: options
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the selected value', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
+      options: options,
+      selectedOptions: [1, 2]
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomColorIndicator', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
+      options: options,
+      renderCustomColorIndicator: function renderCustomColorIndicator() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, " custom color indicator");
+      }
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomSelectedValue', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorMultiSelect["default"], {
+      options: options,
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "custom selected value");
+      }
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/ColorSelect/__tests__/ColorSingleSelect.spec.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ColorSingleSelect = _interopRequireDefault(require("../ColorSingleSelect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var options = [{
+  id: 1,
+  text: 'Red',
+  colorCode: '#ff6e6e'
+}, {
+  id: 2,
+  text: 'Green',
+  colorCode: '#77d779'
+}, {
+  id: 3,
+  text: 'Blue',
+  colorCode: '#649cff'
+}];
+describe('ColorSingleSelect', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the default selected value', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
+      options: options
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should render the selected value', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
+      options: options,
+      selectedValue: "green"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomColorIndicator', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
+      options: options,
+      renderCustomColorIndicator: function renderCustomColorIndicator() {
+        return /*#__PURE__*/_react["default"].createElement("div", null, " custom color indicator");
+      }
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('renders with renderCustomSelectedValue', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorSingleSelect["default"], {
+      options: options,
+      renderCustomSelectedValue: function renderCustomSelectedValue() {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "custom selected value");
+      }
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});