@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.3

package/Instructions-42d2bc58.js

@@ -1,264 +0,0 @@
-'use strict';
-
-var defaultTheme = require('./defaultTheme-fcd45bd0.js');
-var lodash = require('lodash');
-var index = require('./index-39bc450c.js');
-var React = require('react');
-var warningCircle = require('./warning-circle-24522402.js');
-var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-72d523e3.js');
-var TextArea = require('./TextArea-76231a3b.js');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var Instructions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ", ";\n"])), function (props) {
-  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
-});
-var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n  ", ";\n\n  ", ";\n"])), function (props) {
-  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
-}, function (props) {
-  return props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
-});
-var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  margin: 0 2px;\n"])));
-var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  margin: 2px 2px -2px 2px;\n"])));
-
-var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
-  var clickToAdd = _ref.clickToAdd,
-      customAddMessage = _ref.customAddMessage,
-      selectedOption = _ref.selectedOption,
-      loadOptions = _ref.loadOptions,
-      readOnly = _ref.readOnly,
-      disabled = _ref.disabled,
-      hidden = _ref.hidden,
-      name = _ref.name,
-      lightBackground = _ref.lightBackground,
-      autoSelect = _ref.autoSelect,
-      subscribeCurrentValueProp = _ref.subscribeCurrentValue,
-      onChangeProp = _ref.onChange,
-      onFocusProp = _ref.onFocus,
-      onBlurProp = _ref.onBlur,
-      onUpdateCallback = _ref.onUpdateCallback,
-      availableOptions = _ref.availableOptions,
-      loadingMessageFunc = _ref.loadingMessageFunc,
-      placeholder = _ref.placeholder,
-      type = _ref.type,
-      selectType = _ref.selectType,
-      edit = _ref.edit,
-      rows = _ref.rows,
-      showMore = _ref.showMore,
-      showMoreText = _ref.showMoreText,
-      showLessText = _ref.showLessText,
-      isExpanded = _ref.isExpanded,
-      loadingIcon = _ref.loadingIcon,
-      successIcon = _ref.successIcon,
-      padding = _ref.padding,
-      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "selectType", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"]);
-
-  var _useState = React.useState(false),
-      _useState2 = defaultTheme._slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-
-  var _useState3 = React.useState({}),
-      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      selected = _useState4[0],
-      setSelected = _useState4[1];
-
-  var _useState5 = React.useState(clickToAdd),
-      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-      addInstructions = _useState6[0],
-      setAddInstructions = _useState6[1];
-
-  var _useState7 = React.useState(customAddMessage),
-      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
-      customMessage = _useState8[0],
-      setCustomMessage = _useState8[1];
-
-  var _useState9 = React.useState(lightBackground),
-      _useState10 = defaultTheme._slicedToArray(_useState9, 2),
-      background = _useState10[0],
-      setBackground = _useState10[1];
-
-  var _useState11 = React.useState(true),
-      _useState12 = defaultTheme._slicedToArray(_useState11, 2),
-      initialHover = _useState12[0],
-      setInitialHover = _useState12[1];
-
-  var _useState13 = React.useState(),
-      _useState14 = defaultTheme._slicedToArray(_useState13, 2),
-      currentValue = _useState14[0],
-      setCurrentValue = _useState14[1];
-
-  React.useEffect(function () {
-    if (lodash.isFunction(subscribeCurrentValueProp)) {
-      subscribeCurrentValueProp(currentValue);
-    }
-  }, [currentValue]);
-  React.useEffect(function () {
-    handleChange(selected);
-  }, [selected]);
-  React.useEffect(function () {
-    if (selectedOption) {
-      setCurrentValue(selectedOption.value);
-    }
-  }, [selectedOption]);
-  React.useEffect(function () {
-    if (addInstructions) {
-      setCurrentValue(customMessage);
-      setInitialHover(true);
-    }
-  }, [addInstructions, handleOnFocus]);
-  var onChange = React.useCallback(function (event) {
-    setCurrentValue(event.target.value);
-
-    if (lodash.isFunction(onChangeProp)) {
-      onChangeProp(event);
-    }
-  }, [onChangeProp]);
-  var onFocus = React.useCallback(function (event) {
-    if (autoSelect) {
-      event.target.select();
-    }
-
-    if (lodash.isFunction(onFocusProp)) {
-      onFocusProp(event);
-    }
-
-    if (event.target.value === customMessage) {
-      setCurrentValue('');
-    }
-  }, [autoSelect, readOnly, onFocusProp]);
-  var onBlur = React.useCallback(function (event) {
-    if (lodash.isFunction(onBlurProp)) {
-      onBlurProp(event);
-    }
-  }, [onBlurProp]);
-
-  var handleMouseOver = function handleMouseOver() {
-    setIsHovered(true);
-  };
-
-  var handleMouseLeave = function handleMouseLeave() {
-    setIsHovered(false);
-  };
-
-  var handleOnFocus = function handleOnFocus() {
-    if (customMessage === currentValue) {
-      setCurrentValue('');
-    }
-  };
-
-  var handleChange = function handleChange(selected) {
-    if (selected === null) {
-      setSelected({});
-      setAddInstructions(true);
-      setBackground(true);
-      setInitialHover(true);
-      setCustomMessage(customAddMessage);
-    } else {
-      setSelected(selected);
-      setCurrentValue(selected.value);
-      setAddInstructions(false);
-      setBackground(false);
-      setInitialHover(false);
-      onUpdateCallback(selected);
-    }
-  };
-
-  var sharedSelectProps = {
-    options: loadOptions ? undefined : availableOptions,
-    loadOptions: loadOptions,
-    loadingMessage: loadingMessageFunc,
-    placeholder: placeholder
-  };
-  if (hidden) return null;
-  return React__default['default'].createElement(Instructions$1, defaultTheme._extends({
-    ref: forwardedRef,
-    initialHover: initialHover,
-    onMouseDown: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, props), !readOnly && !disabled && React__default['default'].createElement(TopBarContainer, {
-    initialHover: initialHover,
-    className: isHovered && !readOnly && !disabled && 'slide-in'
-  }, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(CompactAutocompleteSelect.CompactAutocompleteSelect, defaultTheme._extends({
-    type: selectType,
-    value: selectedOption,
-    creatable: false,
-    onChange: handleChange
-  }, sharedSelectProps)))), React__default['default'].createElement(InstructionsArea, {
-    type: type
-  }, React__default['default'].createElement(TextArea.TextArea, {
-    noBorder: true,
-    instructionsTextArea: true,
-    type: type,
-    lightBackground: background,
-    readOnly: readOnly,
-    disabled: disabled,
-    name: name,
-    isExpanded: isExpanded,
-    edit: edit,
-    value: currentValue === null ? '' : currentValue,
-    onFocus: onFocus,
-    onChange: onChange,
-    onBlur: onBlur,
-    rows: rows,
-    showMore: showMore,
-    showMoreText: showMoreText,
-    showLessText: showLessText,
-    icon: React__default['default'].createElement(warningCircle.SvgWarningCircle, null),
-    loadingIcon: loadingIcon,
-    successIcon: successIcon,
-    padding: padding
-  })));
-});
-Instructions.defaultProps = {
-  clickToAdd: false,
-  lightBackground: false,
-  autoSelect: true,
-  hidden: false,
-  edit: false,
-  disabled: false,
-  readOnly: false,
-  type: '',
-  selectType: '',
-  padding: 'medium',
-  onUpdateCallback: function onUpdateCallback() {}
-};
-Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
-  name: index.PropTypes.string,
-  placeholder: index.PropTypes.string,
-  rows: index.PropTypes.oneOfType([index.PropTypes.number, index.PropTypes.string]),
-  selectedOption: index.PropTypes.any,
-  loadOptions: index.PropTypes.func,
-  loadingMessageFunc: index.PropTypes.func,
-  clickToAdd: index.PropTypes.bool,
-  customAddMessage: index.PropTypes.string,
-  autoSelect: index.PropTypes.bool,
-  readOnly: index.PropTypes.bool,
-  disabled: index.PropTypes.bool,
-  hidden: index.PropTypes.bool,
-  showMore: index.PropTypes.bool,
-  showMoreText: index.PropTypes.string,
-  showLessText: index.PropTypes.string,
-  availableOptions: index.PropTypes.arrayOf(index.PropTypes.object),
-  lightBackground: index.PropTypes.bool,
-  edit: index.PropTypes.bool,
-  options: index.PropTypes.array,
-  subscribeCurrentValue: index.PropTypes.func,
-  onChange: index.PropTypes.func,
-  onFocus: index.PropTypes.func,
-  onBlur: index.PropTypes.func,
-  onUpdateCallback: index.PropTypes.func,
-  type: index.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
-  selectType: index.PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
-  isExpanded: index.PropTypes.func,
-  loadingIcon: index.PropTypes.element,
-  successIcon: index.PropTypes.element,
-  padding: index.PropTypes.oneOf(['', 'small', 'medium', 'large'])
-} : {};
-
-exports.Instructions = Instructions;