@atlaskit/status 0.11.3

package/dist/cjs/i18n/zh_TW.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by i18n-tools.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+// undefined
+var _default = {
+  'fabric.status.color.blue': '藍色',
+  'fabric.status.color.green': '綠色',
+  'fabric.status.color.grey': '灰色',
+  'fabric.status.color.purple': '紫色',
+  'fabric.status.color.red': '紅色',
+  'fabric.status.color.yellow': '黃色'
+};
+exports.default = _default;

package/dist/cjs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Status", {
+  enumerable: true,
+  get: function get() {
+    return _Status.Status;
+  }
+});
+Object.defineProperty(exports, "StatusPicker", {
+  enumerable: true,
+  get: function get() {
+    return _StatusPicker.StatusPicker;
+  }
+});
+
+var _Status = require("./components/Status");
+
+var _StatusPicker = require("./components/StatusPicker");

package/dist/cjs/picker.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StatusPicker", {
+  enumerable: true,
+  get: function get() {
+    return _StatusPicker.StatusPicker;
+  }
+});
+
+var _StatusPicker = require("./components/StatusPicker");

package/dist/cjs/version.json

@@ -0,0 +1,4 @@
+{
+	"name": "@atlaskit/status",
+	"version": "0.11.3"
+}

package/dist/es2019/components/Status.js

@@ -0,0 +1,106 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { PureComponent } from 'react';
+import Lozenge from '@atlaskit/lozenge';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createStatusAnalyticsAndFire } from './analytics';
+import { ANALYTICS_HOVER_DELAY } from './constants';
+const colorToLozengeAppearanceMap = {
+  neutral: 'default',
+  purple: 'new',
+  blue: 'inprogress',
+  red: 'removed',
+  yellow: 'moved',
+  green: 'success'
+};
+const DEFAULT_APPEARANCE = 'default';
+const MAX_WIDTH = 200;
+
+class StatusInternal extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "hoverStartTime", 0);
+
+    _defineProperty(this, "handleMouseEnter", _e => {
+      this.hoverStartTime = Date.now();
+    });
+
+    _defineProperty(this, "handleMouseLeave", _e => {
+      const {
+        onHover
+      } = this.props;
+      const delay = Date.now() - this.hoverStartTime;
+
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover();
+      }
+
+      this.hoverStartTime = 0;
+    });
+  }
+
+  componentWillUnmount() {
+    this.hoverStartTime = 0;
+  }
+
+  render() {
+    const {
+      text,
+      color,
+      style,
+      onClick
+    } = this.props;
+
+    if (text.trim().length === 0) {
+      return null;
+    }
+
+    const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: "status-lozenge-span" // Using title here as `@atlaskit/tooltip` adds too much overhead
+      ,
+      title: text,
+      onClick: onClick,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave,
+      "data-node-type": "status",
+      "data-color": color,
+      "data-style": style
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: appearance,
+      maxWidth: MAX_WIDTH
+    }, text));
+  }
+
+}
+
+_defineProperty(StatusInternal, "displayName", 'StatusInternal');
+
+export const Status = withAnalyticsEvents({
+  onClick: (createEvent, props) => {
+    const {
+      localId
+    } = props;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'clicked',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId
+      }
+    });
+  },
+  onHover: (createEvent, props) => {
+    const {
+      localId
+    } = props;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'hovered',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId
+      }
+    });
+  }
+})(StatusInternal);

package/dist/es2019/components/StatusPicker.js

@@ -0,0 +1,71 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import TextField from '@atlaskit/textfield';
+import { gridSize } from '@atlaskit/theme/constants';
+import React from 'react';
+import { PureComponent } from 'react';
+import styled from 'styled-components';
+import ColorPalette from './internal/color-palette';
+const FieldTextWrapper = styled.div`
+  margin: 0 ${gridSize()}px;
+`;
+export class StatusPicker extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "fieldTextWrapperKey", Math.random().toString());
+
+    _defineProperty(this, "colorPaletteKey", Math.random().toString());
+
+    _defineProperty(this, "onChange", evt => {
+      // @ts-ignore
+      this.props.onTextChanged(evt.target.value);
+    });
+
+    _defineProperty(this, "onKeyPress", event => {
+      if (event.key === 'Enter') {
+        this.props.onEnter();
+      }
+    });
+
+    _defineProperty(this, "handleInputRef", ref => {
+      if (ref && this.props.autoFocus) {
+        // Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
+        setTimeout(() => {
+          ref.focus();
+        });
+      }
+    });
+  }
+
+  render() {
+    const {
+      text,
+      selectedColor,
+      onColorClick,
+      onColorHover
+    } = this.props; // Using <React.Fragment> instead of [] to workaround Enzyme
+    // (https://github.com/airbnb/enzyme/issues/1149)
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldTextWrapper, {
+      key: this.fieldTextWrapperKey
+    }, /*#__PURE__*/React.createElement(TextField, {
+      value: text,
+      isCompact: true,
+      ref: this.handleInputRef,
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      spellCheck: false,
+      autoComplete: "off"
+    })), /*#__PURE__*/React.createElement(ColorPalette, {
+      key: this.colorPaletteKey,
+      onClick: onColorClick,
+      onHover: onColorHover,
+      selectedColor: selectedColor
+    }));
+  }
+
+}
+
+_defineProperty(StatusPicker, "defaultProps", {
+  autoFocus: true
+});

package/dist/es2019/components/analytics.js

@@ -0,0 +1,18 @@
+import { name as packageName, version as packageVersion } from '../version.json';
+export const ELEMENTS_CHANNEL = 'fabric-elements';
+export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
+  const statusPayload = { ...payload,
+    eventType: 'ui'
+  };
+
+  if (!statusPayload.attributes) {
+    statusPayload.attributes = {};
+  }
+
+  statusPayload.attributes.packageName = packageName;
+  statusPayload.attributes.packageVersion = packageVersion;
+  statusPayload.attributes.componentName = 'status';
+  const event = createAnalyticsEvent(statusPayload);
+  event.fire(ELEMENTS_CHANNEL);
+  return event;
+};

package/dist/es2019/components/constants.js

@@ -0,0 +1 @@
+export const ANALYTICS_HOVER_DELAY = 1000;

package/dist/es2019/components/i18n.js

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl';
+export const messages = defineMessages({
+  neutralColor: {
+    id: 'fabric.status.color.grey',
+    defaultMessage: 'Grey',
+    description: 'Tooltip for the grey color in color palette'
+  },
+  purpleColor: {
+    id: 'fabric.status.color.purple',
+    defaultMessage: 'Purple',
+    description: 'Tooltip for the purple color in color palette'
+  },
+  blueColor: {
+    id: 'fabric.status.color.blue',
+    defaultMessage: 'Blue',
+    description: 'Tooltip for the blue color in color palette'
+  },
+  redColor: {
+    id: 'fabric.status.color.red',
+    defaultMessage: 'Red',
+    description: 'Tooltip for the red color in color palette'
+  },
+  yellowColor: {
+    id: 'fabric.status.color.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Tooltip for the yellow color in color palette'
+  },
+  greenColor: {
+    id: 'fabric.status.color.green',
+    defaultMessage: 'Green',
+    description: 'Tooltip for the green color in color palette'
+  }
+});

package/dist/es2019/components/internal/color-palette.js

@@ -0,0 +1,33 @@
+import { gridSize } from '@atlaskit/theme/constants';
+import * as colors from '@atlaskit/theme/colors';
+import React from 'react';
+import styled from 'styled-components';
+import Color from './color'; // color value, label, background, borderColor
+
+const palette = [['neutral', colors.N40, colors.N400], ['purple', colors.P50, colors.P400], ['blue', colors.B50, colors.B400], ['red', colors.R50, colors.R400], ['yellow', colors.Y75, colors.Y400], ['green', colors.G50, colors.G400]];
+const ColorPaletteWrapper = styled.div`
+  margin: ${gridSize()}px ${gridSize()}px 0 ${gridSize()}px;
+  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
+  display: flex;
+  flex-wrap: wrap;
+`;
+export default (({
+  cols = 7,
+  onClick,
+  selectedColor,
+  className,
+  onHover
+}) => /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
+  className: className,
+  style: {
+    maxWidth: cols * 32
+  }
+}, palette.map(([colorValue, backgroundColor, borderColor]) => /*#__PURE__*/React.createElement(Color, {
+  key: colorValue,
+  value: colorValue,
+  backgroundColor: backgroundColor,
+  borderColor: borderColor,
+  onClick: onClick,
+  onHover: onHover,
+  isSelected: colorValue === selectedColor
+}))));

package/dist/es2019/components/internal/color.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import { N900, N0, N50 } from '@atlaskit/theme/colors';
+import React from 'react';
+import { PureComponent } from 'react';
+import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+import { ANALYTICS_HOVER_DELAY } from '../constants';
+import { messages } from '../i18n';
+const Button = styled.button`
+  height: 24px;
+  width: 24px;
+  background: ${N900};
+  padding: 0;
+  border-radius: 4px;
+  border: 1px solid ${N0};
+  cursor: pointer;
+  display: block;
+  box-sizing: border-box;
+  overflow: hidden;
+`;
+const ButtonWrapper = styled.span`
+  border: 1px solid transparent;
+  margin: 0 2px;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  padding: 1px;
+  border-radius: 6px;
+  &:hover {
+    border: 1px solid ${N50};
+  }
+`;
+export default class Color extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "hoverStartTime", 0);
+
+    _defineProperty(this, "onMouseEnter", () => {
+      this.hoverStartTime = Date.now();
+    });
+
+    _defineProperty(this, "onMouseLeave", () => {
+      const {
+        onHover
+      } = this.props;
+      const delay = Date.now() - this.hoverStartTime;
+
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover(this.props.value);
+      }
+
+      this.hoverStartTime = 0;
+    });
+
+    _defineProperty(this, "onMouseDown", e => {
+      e.preventDefault();
+    });
+
+    _defineProperty(this, "onClick", e => {
+      const {
+        onClick,
+        value
+      } = this.props;
+      e.preventDefault();
+      onClick(value);
+    });
+  }
+
+  render() {
+    const {
+      tabIndex,
+      backgroundColor,
+      isSelected,
+      borderColor,
+      value
+    } = this.props;
+    const borderStyle = `1px solid ${borderColor}`;
+    return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], label => /*#__PURE__*/React.createElement(Button, {
+      onClick: this.onClick,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      onMouseDown: this.onMouseDown,
+      tabIndex: tabIndex,
+      className: `${isSelected ? 'selected' : ''}`,
+      title: label,
+      style: {
+        backgroundColor: backgroundColor || 'transparent',
+        border: borderStyle
+      }
+    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      primaryColor: borderColor,
+      label: label
+    }))));
+  }
+
+  componentWillUnmount() {
+    this.hoverStartTime = 0;
+  }
+
+}

package/dist/es2019/element.js

@@ -0,0 +1 @@
+export { Status } from './components/Status';