@jetbrains/ring-ui 4.2.1 → 4.2.2

package/components/select/select.examples.js

@@ -5,6 +5,8 @@ import warningIcon from '@jetbrains/icons/warning';
 import reactDecorator from '../../.storybook/react-decorator';
 import hubConfig from '../../.storybook/hub-config';
 
+import Text from '../text/text';
+
 import Link from '@jetbrains/ring-ui/components/link/link';
 import Popup from '@jetbrains/ring-ui/components/popup/popup';
 import List from '@jetbrains/ring-ui/components/list/list';
@@ -961,6 +963,31 @@ export const multipleWithSelectAllAndDisabledItem = args => <Select {...args}/>;
 multipleWithSelectAllAndDisabledItem.storyName = 'multiple with select all and disabled item';
 multipleWithSelectAllAndDisabledItem.parameters = {hermione: {skip: true}};
 
+export const multipleWithSelectAllAndCustomLabels = args => <Select {...args}/>;
+{
+  const data = [
+    {label: 'One long label', key: '1'},
+    {label: 'Two long label', key: '2'},
+    {label: 'Three long label', key: '3'}
+  ];
+
+  const multipleConfig = {
+    selectAll: true,
+    selectAllLabel: 'All Items',
+    deselectAllLabel: 'None Items',
+    renderSelectedItemsDescription: selected => <Text info>{`${selected.length} items selected`}</Text>
+  };
+
+  multipleWithSelectAllAndCustomLabels.args = {
+    filter: true,
+    multiple: multipleConfig,
+    selected: [data[1]],
+    data
+  };
+}
+
+multipleWithSelectAllAndCustomLabels.storyName = 'multiple with select all and custom labels';
+multipleWithSelectAllAndCustomLabels.parameters = {hermione: {skip: true}};
 
 export const multipleWithLimit = args => <Select {...args}/>;
 {

package/components/select/select__popup.js

@@ -63,7 +63,10 @@ export default class SelectPopup extends PureComponent {
     multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
       label: PropTypes.string,
       limit: PropTypes.number,
-      selectAll: PropTypes.bool
+      selectAll: PropTypes.bool,
+      selectAllLabel: PropTypes.string,
+      deselectAllLabel: PropTypes.string,
+      renderSelectedItemsDescription: PropTypes.func
     })]),
     left: PropTypes.bool,
     loading: PropTypes.bool,
@@ -406,12 +409,15 @@ export default class SelectPopup extends PureComponent {
                 onClick={this.handleSelectAll}
               >
                 {activeFilters.length !== this.props.selected.length
-                  ? 'Select all'
-                  : 'Deselect all'}
+                  ? this.props.multiple.selectAllLabel || 'Select all'
+                  : this.props.multiple.deselectAllLabel || 'Deselect all'}
               </Button>
             )
         }
-        <Text info>{`${this.props.selected.length} selected`}</Text>
+        {this.props.multiple.renderSelectedItemsDescription
+          ?.(this.props.selected, activeFilters.length) || (
+          <Text info>{`${this.props.selected.length} selected`}</Text>
+        )}
       </div>
     );
   };

package/dist/select/select__popup.js

@@ -158,6 +158,8 @@ class SelectPopup extends PureComponent {
     _defineProperty(this, "handleSelectAll", () => this.props.onSelectAll(this.props.data.filter(item => !item.disabled).length !== this.props.selected.length));
 
     _defineProperty(this, "getSelectAll", () => {
+      var _this$props$multiple$, _this$props$multiple;
+
       const activeFilters = this.props.data.filter(item => !item.disabled);
       return /*#__PURE__*/React.createElement("div", {
         className: modules_b607bec2.selectAll
@@ -165,7 +167,7 @@ class SelectPopup extends PureComponent {
         text: true,
         inline: true,
         onClick: this.handleSelectAll
-      }, activeFilters.length !== this.props.selected.length ? 'Select all' : 'Deselect all'), /*#__PURE__*/React.createElement(Text, {
+      }, activeFilters.length !== this.props.selected.length ? this.props.multiple.selectAllLabel || 'Select all' : this.props.multiple.deselectAllLabel || 'Deselect all'), ((_this$props$multiple$ = (_this$props$multiple = this.props.multiple).renderSelectedItemsDescription) === null || _this$props$multiple$ === void 0 ? void 0 : _this$props$multiple$.call(_this$props$multiple, this.props.selected, activeFilters.length)) || /*#__PURE__*/React.createElement(Text, {
         info: true
       }, "".concat(this.props.selected.length, " selected")));
     });
@@ -502,7 +504,10 @@ _defineProperty(SelectPopup, "propTypes", {
   multiple: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     label: PropTypes.string,
     limit: PropTypes.number,
-    selectAll: PropTypes.bool
+    selectAll: PropTypes.bool,
+    selectAllLabel: PropTypes.string,
+    deselectAllLabel: PropTypes.string,
+    renderSelectedItemsDescription: PropTypes.func
   })]),
   left: PropTypes.bool,
   loading: PropTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -221,5 +221,5 @@
     "node": ">=7.4",
     "npm": ">=6.0.0"
   },
-  "gitHead": "d2354ec4b296cfa3cae3e988197efbc1f49eedd2"
+  "gitHead": "e83463856025904b6b4d8409f1460b9b1b9ceaec"
 }