@jetbrains/ring-ui 4.1.0-beta.9 → 4.1.1

package/components/avatar/fallback-avatar.js

@@ -0,0 +1,136 @@
+import React, {useMemo} from 'react';
+import PropTypes from 'prop-types';
+
+import getUID from '../global/get-uid';
+
+const colorPairs = [
+  ['#60A800', '#D5CA00'],
+  ['#21D370', '#03E9E1'],
+  ['#3BA1FF', '#36E97D'],
+  ['#00C243', '#00FFFF'],
+  ['#4BE098', '#627FFF'],
+  ['#168BFA', '#26F7C7'],
+  ['#9D4CFF', '#39D3C3'],
+  ['#0A81F6', '#0ACFF6'],
+  ['#765AF8', '#5A91F8'],
+  ['#9E54FF', '#0ACFF6'],
+  ['#B345F1', '#669DFF'],
+  ['#765AF8', '#C059EE'],
+  ['#9039D0', '#C239D0'],
+  ['#9F2AFF', '#FD56FD'],
+  ['#AB3AF2', '#E40568'],
+  ['#9F2AFF', '#E9A80B'],
+  ['#D50F6B', '#E73AE8'],
+  ['#ED5502', '#E73AE8'],
+  ['#ED358C', '#DBED18'],
+  ['#ED358C', '#F9902E'],
+  ['#FF7500', '#FFCA00']
+];
+
+const Sizes = {
+  18: {
+    radius: 2,
+    text: {x: 9, y: 13},
+    fontSize: '11px',
+    textAnchor: 'middle'
+  },
+  24: {
+    radius: 3,
+    text: {x: 2, y: 13},
+    fontSize: '11px',
+    underscore: {x: 3, y: 17}
+  },
+  32: {
+    radius: 3,
+    text: {x: 3, y: 17},
+    fontSize: '13px',
+    letterSpacing: 1,
+    underscore: {x: 4, y: 22}
+  },
+  40: {
+    radius: 3,
+    text: {x: 5, y: 19},
+    fontSize: '15px',
+    letterSpacing: 1,
+    underscore: {x: 6, y: 28}
+  }
+};
+
+const sizeKeys = Object.keys(Sizes).map(Number);
+
+function extractLetters(name) {
+  const names = name.split(/[\s._]+/).filter(Boolean);
+  if (names.length >= 2) {
+    return names[0][0].toUpperCase() + names[1][0].toUpperCase();
+  } else if (names.length === 1) {
+    if (names[0].length >= 2) {
+      return names[0].slice(0, 2).toUpperCase();
+    } else {
+      return `${names[0][0].toUpperCase()}X`;
+    }
+  } else {
+    return 'XX';
+  }
+}
+
+// https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0#gistcomment-2775538
+const BASE = 32;
+function hashCode(s) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = Math.imul(BASE - 1, h) + s.charCodeAt(i) | 0;
+  }
+
+  return h;
+}
+
+export default function FallbackAvatar({username, size, round}) {
+  const hash = Math.abs(hashCode(username.toLowerCase()));
+  const [fromColor, toColor] = colorPairs[hash % colorPairs.length];
+  const possibleSizeKeys = sizeKeys.filter(key => key >= size);
+  const sizeKey = possibleSizeKeys.length > 0
+    ? Math.min(...possibleSizeKeys)
+    : Math.max(...sizeKeys);
+  const sizes = Sizes[sizeKey];
+  const radius = round ? '50%' : sizes.radius;
+  const gradientId = useMemo(() => getUID('gradient-'), []);
+  return (
+    <svg viewBox={`0 0 ${sizeKey} ${sizeKey}`} xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop stopColor={fromColor} offset="0"/>
+          <stop stopColor={toColor} offset="1"/>
+        </linearGradient>
+      </defs>
+      <g>
+        <rect
+          fill={`url(#${gradientId})`}
+          x="0"
+          y="0"
+          width={sizeKey}
+          height={sizeKey}
+          rx={radius}
+          ry={radius}
+        />
+        <text
+          x={sizes.text.x}
+          y={sizes.text.y}
+          fontFamily="Arial, Helvetica, sans-serif"
+          fontSize={sizes.fontSize}
+          letterSpacing={sizes.letterSpacing}
+          fill="#FFFFFF"
+          textAnchor={sizes.textAnchor}
+        >
+          <tspan>{extractLetters(username)}</tspan>
+          {sizes.underscore && <tspan x={sizes.underscore.x} y={sizes.underscore.y}>{'_'}</tspan>}
+        </text>
+      </g>
+    </svg>
+  );
+}
+
+FallbackAvatar.propTypes = {
+  username: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  round: PropTypes.bool
+};

package/components/avatar-editor-ng/avatar-editor-ng.css

@@ -19,7 +19,7 @@
     width: 0;
     height: calc(unit * 5);
 
-    content: '';
+    content: "";
     vertical-align: middle;
   }
 }
@@ -49,7 +49,7 @@
     width: 100%;
     height: 100%;
 
-    content: '';
+    content: "";
 
     background-color: rgba(0, 0, 0, 0.8);
   }

package/components/avatar-editor-ng/avatar-editor-ng.js

@@ -6,6 +6,7 @@ import messageBundleNg from '../message-bundle-ng/message-bundle-ng';
 import alertService from '../alert-service/alert-service';
 import IconNG from '../icon-ng/icon-ng';
 
+import template from './avatar-editor-ng__template';
 import './avatar-editor-ng.css';
 
 const angularModule = angular.module('Ring.avatar-editor', [messageBundleNg, IconNG]);
@@ -26,7 +27,7 @@ function rgAvatarEditor() {
       deleteLabel: '@',
       addMessage: '@'
     },
-    template: require('./avatar-editor-ng.html'),
+    template,
     transclude: true,
     controller: [
       '$scope', '$attrs', 'RingMessageBundle',

package/components/avatar-editor-ng/{avatar-editor-ng.html → avatar-editor-ng__template.js}

@@ -1,4 +1,4 @@
-<div>
+export default `<div>
   <div ng-click="!ngDisabled && controls.select()" class="ring-avatar-editor__frame" ng-class="{
         'ring-avatar-editor_controlled': controlled,
         'ring-avatar-editor': !ngDisabled
@@ -25,4 +25,4 @@
   >
     <span translate>{{ getDeleteLabel() }}</span>
   </rg-button>
-</div>
+</div>`;

package/components/button/button.css

@@ -451,7 +451,7 @@
     width: calc(100% + loaderWidth);
     height: 100%;
 
-    content: '';
+    content: "";
     animation: progress 1s linear infinite;
 
     background-repeat: repeat;
@@ -460,7 +460,7 @@
 }
 
 .delayed .content::after {
-  content: '…';
+  content: "…";
 }
 
 .short {

package/components/button/button.js

@@ -1,5 +1,5 @@
 import 'focus-visible';
-import React, {PureComponent} from 'react';
+import React, {createRef, PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import chevronDown from '@jetbrains/icons/chevron-10px';
@@ -47,6 +47,8 @@ class Button extends PureComponent {
   static IconSize = Size;
   static Theme = Theme;
 
+  buttonRef = createRef();
+
   render() {
     const {
       // Modifiers
@@ -102,6 +104,7 @@ class Button extends PureComponent {
     const Tag = isLink ? ClickableLink : 'button';
     return (
       <Tag
+        ref={this.buttonRef}
         tabIndex={loader ? -1 : 0}
         type={isLink ? null : 'button'}
         {...props}

package/components/button-group/button-group.js

@@ -12,7 +12,7 @@ export default class ButtonGroup extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string
-  }
+  };
 
   render() {
     const {className} = this.props;

package/components/button-group/caption.js

@@ -7,7 +7,7 @@ import styles from './button-group.css';
 export default class Caption extends PureComponent {
   static propTypes = {
     className: PropTypes.node
-  }
+  };
 
   render() {
     const {className} = this.props;

package/components/button-ng/button-ng.js

@@ -166,7 +166,7 @@ class ButtonController extends RingAngularComponent {
     }
 
     $compile(icon)($scope);
-  }
+  };
 }
 
 function changeTheme(element, data) {

package/components/button-set-ng/button-set-ng.js

@@ -3,6 +3,8 @@
  */
 import angular from 'angular';
 
+import buttonSetStyles from '../button-set/button-set.css';
+
 const angularModule = angular.module('Ring.button-set', []);
 
 function rgButtonSet() {
@@ -11,7 +13,7 @@ function rgButtonSet() {
     replace: true,
     scope: false,
     transclude: true,
-    template: require('./button-set-ng.html')
+    template: `<div class="${buttonSetStyles.buttonSet}" ng-transclude></div>`
   };
 }
 

package/components/checkbox/checkbox.css

@@ -89,7 +89,7 @@
   /* stylelint-disable-next-line selector-max-specificity */
   &:checked + .cell,
   &:indeterminate[checked] + .cell,
-  &:indeterminate[data-checked=true] + .cell {
+  &:indeterminate[data-checked="true"] + .cell {
     border-color: var(--ring-border-hover-color);
     background-color: var(--ring-selected-background-color);
   }

package/components/code/code.js

@@ -14,7 +14,7 @@ function noop() {}
 
 const registerLanguage = memoize(async language => {
   const languageExports = await import(
-    /* webpackChunkName: "highlight-[request]", webpackPrefetch: true */
+    /* webpackChunkName: "highlight-[request]" */
     `highlight.js/lib/languages/${language}`
   );
   highlight.registerLanguage(language, languageExports.default);

package/components/confirm/confirm.js

@@ -64,6 +64,7 @@ export default class Confirm extends PureComponent {
 
     return (
       <Dialog
+        label={text || description}
         className={className}
         onEscPress={this.onEscPress}
         show={show}

package/components/confirm-service/confirm-service.js

@@ -38,20 +38,20 @@ export default function confirm({
           renderConfirm({...props, inProgress: true});
           return Promise.resolve(onBeforeConfirm()).
             then(() => {
-              renderConfirm({show: false});
+              renderConfirm({...props, show: false});
               resolve();
             }).
             catch(err => {
-              renderConfirm({show: false});
+              renderConfirm({...props, show: false});
               reject(err);
             });
         }
-        renderConfirm({show: false});
+        renderConfirm({...props, show: false});
         return resolve();
       },
 
       onReject: () => {
-        renderConfirm({show: false});
+        renderConfirm({...props, show: false});
         reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
       }
     };
@@ -61,5 +61,5 @@ export default function confirm({
 }
 
 export function hideConfirm() {
-  renderConfirm({show: false});
+  renderConfirm({text: '', show: false});
 }

package/components/content-layout/content-layout.css

@@ -1,6 +1,6 @@
 @import "../global/variables.css";
 
-@value unit, extra-small-screen-media, small-screen-media from '../global/global.css';
+@value unit, extra-small-screen-media, small-screen-media from "../global/global.css";
 @value sidebarWidth: calc(unit * 30);
 
 .contentLayout {

package/components/data-list/data-list.css

@@ -1,7 +1,7 @@
 @import "../global/variables.css";
 
 @value unit from "../global/global.css";
-@value height, compensate from '../table/table.css';
+@value height, compensate from "../table/table.css";
 
 .dataListWrapper {
   position: relative;

package/components/date-picker/date-input.js

@@ -25,7 +25,8 @@ export default class DateInput extends React.PureComponent {
     onInput: PropTypes.func,
     onActivate: PropTypes.func,
     onConfirm: PropTypes.func,
-    onClear: PropTypes.func
+    onClear: PropTypes.func,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -78,16 +79,16 @@ export default class DateInput extends React.PureComponent {
       time, name, hoverDate,
       date, displayFormat, translations,
       onActivate, onClear,
-      fromPlaceholder, toPlaceholder, timePlaceholder
+      fromPlaceholder, toPlaceholder, timePlaceholder, locale
     } = this.props;
 
     let displayText = '';
     if (active && hoverDate) {
-      displayText = displayFormat(hoverDate);
+      displayText = displayFormat(hoverDate, locale);
     } else if (active && text != null) {
       displayText = text;
     } else if (date) {
-      displayText = displayFormat(date);
+      displayText = displayFormat(date, locale);
     } else if (name === 'time') {
       displayText = time || '';
     }

package/components/date-picker/date-picker.css

@@ -96,7 +96,7 @@
     position: absolute;
     right: unit;
 
-    content: '—';
+    content: "—";
 
     line-height: calc(4 * unit - 2px);
   }
@@ -123,7 +123,7 @@
     position: absolute;
     left: calc(-1 * unit);
 
-    content: ',';
+    content: ",";
 
     line-height: calc(4 * unit - 3px);
   }
@@ -136,7 +136,7 @@
   color: var(--ring-secondary-color);
 }
 
-.weekday {
+.weekday.weekday {
   display: inline-block;
 
   width: cellSize;
@@ -145,7 +145,7 @@
   text-transform: capitalize;
 }
 
-.weekend {
+.weekend.weekend {
   color: var(--ring-error-color);
 }
 
@@ -160,7 +160,7 @@
   box-shadow: 0 -1px var(--ring-line-color);
 }
 
-.months {
+.months.months {
   position: absolute;
   top: 0;
   right: yearWidth;
@@ -173,7 +173,7 @@
   left: 0;
 }
 
-.month {
+.month.month {
   display: flex;
   flex-wrap: wrap;
 
@@ -181,7 +181,7 @@
   margin: calc(unit * 2);
 }
 
-.month > * {
+.month.month > * {
   flex-shrink: 0;
 
   height: cellSize;
@@ -198,6 +198,8 @@
 
   text-align: left;
 
+  text-transform: capitalize;
+
   font-weight: bold;
 
   @supports (flex-basis: 1px) {
@@ -209,7 +211,9 @@
 
 .day {
   composes: resetButton;
+}
 
+.day.day {
   position: relative;
 
   flex-basis: cellSize;
@@ -226,25 +230,25 @@
   }
 }
 
-.between {
+.between.between {
   transition: none;
 
   background-color: var(--ring-selected-background-color);
 }
 
-.activeBetween {
+.activeBetween.activeBetween {
   transition: none;
 
   background-color: var(--ring-date-picker-hover-color);
 }
 
-.current {
+.current.current {
   color: var(--ring-dark-text-color);
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-main-color);
 }
 
-.active {
+.active.active {
   transition: none;
 
   color: var(--ring-link-hover-color);
@@ -252,17 +256,17 @@
   background-color: var(--ring-date-picker-hover-color);
 }
 
-.disabled {
+.disabled.disabled {
   cursor: not-allowed;
 
   color: var(--ring-disabled-color);
 }
 
-.from {
+.from.from {
   border-radius: var(--ring-border-radius) 0 0 var(--ring-border-radius);
 }
 
-.to {
+.to.to {
   border-radius: 0 var(--ring-border-radius) var(--ring-border-radius) 0;
 }
 
@@ -280,7 +284,7 @@
     width: calc(unit * 2);
     height: 100%;
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -323,7 +327,7 @@
     width: calc(unit * 23);
     height: calc(unit * 8);
 
-    content: '';
+    content: "";
     transition: background-color var(--ring-ease);
   }
 
@@ -355,7 +359,7 @@
       width: calc(unit * 2);
       height: 100%;
 
-      content: '';
+      content: "";
       transition: background-color var(--ring-ease);
     }
   }
@@ -390,13 +394,13 @@
   }
 }
 
-.empty {
+.empty.empty {
   pointer-events: none;
 
   opacity: 0;
 }
 
-.today {
+.today.today {
   position: relative;
 
   font-weight: bold;
@@ -407,7 +411,7 @@
   top: 0;
   left: calc(unit * 0.5);
 
-  content: '•';
+  content: "•";
 
   font-size: var(--ring-font-size-smaller);
 }
@@ -441,7 +445,9 @@
 .monthName {
   composes: hoverable;
   composes: resetButton;
+}
 
+.monthName.monthName {
   position: relative;
 
   width: 100%;
@@ -449,12 +455,16 @@
   height: cellSize;
   padding-left: calc(unit * 1.5);
 
+  text-transform: capitalize;
+
   line-height: cellSize;
 }
 
 .monthSlider {
   composes: resetButton;
+}
 
+.monthSlider.monthSlider {
   position: absolute;
   z-index: var(--ring-fixed-z-index);
   right: 0;
@@ -474,7 +484,7 @@
   opacity: 0.3;
 }
 
-.dragging.dragging {
+.dragging {
   cursor: grabbing;
 
   opacity: 0.35;
@@ -505,7 +515,9 @@
 .year {
   composes: hoverable;
   composes: resetButton;
+}
 
+.year.year {
   position: relative;
 
   width: 100%;
@@ -519,7 +531,7 @@
   line-height: yearHeight;
 }
 
-.currentYear {
+.currentYear.currentYear {
   cursor: auto;
   transition: none;
 

package/components/date-picker/date-picker.js

@@ -90,7 +90,8 @@ export default class DatePicker extends PureComponent {
     disabled: PropTypes.bool,
     minDate: dateType,
     maxDate: dateType,
-    translations: PropTypes.object
+    translations: PropTypes.object,
+    locale: PropTypes.object
   };
 
   static defaultProps = {
@@ -101,10 +102,10 @@ export default class DatePicker extends PureComponent {
     from: null,
     to: null,
     clear: false,
-    displayFormat: date => (date ? formatDate(date, 'd MMM yyyy') : ''),
-    displayMonthFormat: date => (date ? formatDate(date, 'd MMM') : ''),
-    displayDayFormat: date => (date ? formatDate(date, 'd') : ''),
-    displayTimeFormat: date => (date ? formatDate(date, 'HH:mm') : ''),
+    displayFormat: (date, locale) => (date ? formatDate(date, 'd MMM yyyy', {locale}) : ''),
+    displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', {locale}) : ''),
+    displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', {locale}) : ''),
+    displayTimeFormat: (date, locale) => (date ? formatDate(date, 'HH:mm', {locale}) : ''),
     datePlaceholder: 'Set a date',
     dateTimePlaceholder: 'Set date and time',
     rangePlaceholder: 'Set a period',
@@ -194,7 +195,8 @@ export default class DatePicker extends PureComponent {
       displayFormat,
       displayMonthFormat,
       displayDayFormat,
-      translations
+      translations,
+      locale
     } = this.props;
 
     const date = this.parse(this.props.date);
@@ -204,27 +206,27 @@ export default class DatePicker extends PureComponent {
 
     let text;
     if (!range && !withTime) {
-      text = date ? displayFormat(date) : datePlaceholder || translations.setDate;
+      text = date ? displayFormat(date, locale) : datePlaceholder || translations.setDate;
     } else if (!range && withTime) {
       if (!date && !time) {
         text = dateTimePlaceholder || translations.setDateTime;
       } else {
-        text = `${date && displayFormat(date) || '—'}, ${time || '—'}`;
+        text = `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
       }
     } else if (!from && !to) {
       text = rangePlaceholder || translations.setPeriod;
     } else if (!to) {
-      text = `${displayFormat(from)} —`;
+      text = `${displayFormat(from, locale)} —`;
     } else if (!from) {
-      text = `— ${displayFormat(to)}`;
+      text = `— ${displayFormat(to, locale)}`;
     } else if (!isSameYear(from, to)) {
-      text = `${displayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameMonth(from, to)) {
-      text = `${displayMonthFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else if (!isSameDay(from, to)) {
-      text = `${displayDayFormat(from)} — ${displayFormat(to)}`;
+      text = `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
     } else {
-      text = `${displayFormat(to)}`;
+      text = `${displayFormat(to, locale)}`;
     }
 
     return text;