@ntbjs/react-components 0.0.1-beta.29 → 0.0.1-beta.32

package/{AssetGallery-591cb40a.js → AssetGallery-7b7c9ce2.js}

@@ -8,6 +8,7 @@ var ActionButton = require('./ActionButton-10a681b9.js');
 require('./Button-89056918.js');
 require('./Checkbox-791a409f.js');
 require('./Radio-9271a4b6.js');
+require('./TextArea-70a74014.js');
 require('./TextInput-72ce7e10.js');
 require('./Popover-0ff13419.js');
 var Tooltip = require('./Tooltip-85e7d561.js');
@@ -296,7 +297,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       extendedSelectMode = props.extendedSelectMode,
       onAssetSelected = props.onAssetSelected,
       onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
+      component = props.component,
+      scrollPosition = props.scrollPosition;
 
   function onClick(event) {
     if (extendedSelectMode) {
@@ -410,7 +412,9 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     extendedSelectMode: extendedSelectMode,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, null, React__default['default'].createElement("video", {
+  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+    scrollPosition: scrollPosition
+  }, React__default['default'].createElement("video", {
     ref: videoPlayerRef,
     loop: true,
     muted: true
@@ -425,7 +429,8 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     height: "100%",
     width: "100%",
     effect: "opacity",
-    threshold: 700
+    threshold: 1000,
+    scrollPosition: scrollPosition
   }))), React__default['default'].createElement(Overlay, {
     ref: cardRef
   }, React__default['default'].createElement(OverlayBackdrop, null), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
@@ -465,15 +470,16 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
   extendedSelectMode: defaultTheme.PropTypes.bool,
   onAssetSelected: defaultTheme.PropTypes.func.isRequired,
   onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
-  component: defaultTheme.PropTypes.func
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryCompactCard.defaultProps = {};
-var AssetGalleryCompactCard$1 = React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
+var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
-});
+}));
 
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  height: 100%;\n  margin: 0;\n  ", "\n  border: 1px solid;\n  ", ";\n  ", "\n  box-sizing: border-box;\n  text-decoration: none;\n"])), function (props) {
@@ -569,7 +575,8 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       extendedSelectMode = props.extendedSelectMode,
       onAssetSelected = props.onAssetSelected,
       onAssetUnselected = props.onAssetUnselected,
-      component = props.component;
+      component = props.component,
+      scrollPosition = props.scrollPosition;
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
 
@@ -659,7 +666,9 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     title: asset.note.title
   }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
     "data-id": "ss"
-  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, null, React__default['default'].createElement("video", {
+  }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
+    scrollPosition: scrollPosition
+  }, React__default['default'].createElement("video", {
     ref: videoPlayerRef,
     loop: true,
     muted: true
@@ -672,7 +681,8 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     height: "100%",
     width: "100%",
     effect: "opacity",
-    threshold: 700
+    threshold: 1000,
+    scrollPosition: scrollPosition
   })))), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
     style: {
       display: 'flex'
@@ -714,15 +724,16 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
   extendedSelectMode: defaultTheme.PropTypes.bool,
   onAssetSelected: defaultTheme.PropTypes.func.isRequired,
   onAssetUnselected: defaultTheme.PropTypes.func.isRequired,
-  component: defaultTheme.PropTypes.func
+  component: defaultTheme.PropTypes.func,
+  scrollPosition: defaultTheme.PropTypes.number
 } : {};
 AssetGalleryGridCard.defaultProps = {};
-var AssetGalleryGridCard$1 = React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
+var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
   var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
   return reactiveProps.every(function (propKey) {
     return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
   });
-});
+}));
 
 var _templateObject, _templateObject2, _templateObject3;
 var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
@@ -760,8 +771,8 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   }, [viewMode, thumbnailMaxHeight]);
   var SPACE_BETWEEN_ASSETS = 8;
   var SPACE_UNDER_ASSETS = 8;
-  var PRIMARY_SCROLL_BUFFER_HEIGHT = 700;
-  var SECONDARY_SCROLL_BUFFER_HEIGHT = 300;
+  var PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
+  var SECONDARY_SCROLL_BUFFER_HEIGHT = 500;
   var GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
   var GRID_VIEW_MODE_ASSET_HEIGHT = 403;
   var MISSING_WIDTH_PLACEHOLDER = 1920;
@@ -1006,7 +1017,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
       }
     }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
       asset: asset,
-      selectable: "selectable" in asset ? asset.selectable : selectable,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
       selected: selectedAssetKeys.includes(asset.key),
       extendedSelectMode: Boolean(selectedAssetKeys.length),
       onAssetSelected: onAssetSelected,
@@ -1015,7 +1026,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
       asset: asset,
       hasHeightAndWidth: asset.layout.hasHeightAndWidth,
-      selectable: "selectable" in asset ? asset.selectable : selectable,
+      selectable: 'selectable' in asset ? asset.selectable : selectable,
       selected: selectedAssetKeys.includes(asset.key),
       extendedSelectMode: Boolean(selectedAssetKeys.length),
       onAssetSelected: onAssetSelected,

package/TextArea-70a74014.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-18d7c1ee.js');
+var React = require('react');
+var nanoid = require('nanoid');
+var lodash = require('lodash');
+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, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  ", "\n  top: -7px;\n  left: 7px;\n  opacity: 1;\n"])), function (props) {
+  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
+});
+var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  color: inherit;\n  opacity: 0.7;\n"])));
+var TextAreaLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n  ", "\n\n  ", "\n"])), placeholderBaseStyle, function (props) {
+  var _props$inputValue;
+
+  return (props.placeholderVisible || ((_props$inputValue = props.inputValue) === null || _props$inputValue === void 0 ? void 0 : _props$inputValue.length)) && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), activeLabel);
+});
+var TextArea$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n  margin-top: 8px;\n\n  &:focus-within {\n    ", " {\n      ", "\n    }\n  }\n\n  ", "\n"])), TextAreaLabel, activeLabel, function (props) {
+  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
+});
+var TextAreaField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 12px 10px;\n  margin: 0 0 1.07143rem;\n  color: inherit;\n  resize: vertical;\n  overflow: auto;\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n\n  ", "\n\n  &::placeholder {\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
+}, function (props) {
+  return props.error && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+}, placeholderBaseStyle, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
+});
+
+var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
+  var value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      name = _ref.name,
+      label = _ref.label,
+      rows = _ref.rows,
+      placeholder = _ref.placeholder,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur;
+
+  var _useState = React.useState(nanoid.nanoid()),
+      _useState2 = defaultTheme._slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var _useState3 = React.useState(value || defaultValue || ''),
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      controlledValue = _useState4[0],
+      setControlledValue = _useState4[1];
+
+  React.useEffect(function () {
+    if (value !== undefined) {
+      setControlledValue(value);
+    }
+  }, [value]);
+
+  var onInputChange = function onInputChange(event) {
+    if (lodash.isFunction(onChange)) {
+      onChange(event);
+    }
+
+    setControlledValue(event.target.value);
+  };
+
+  return React__default['default'].createElement(TextArea$1, {
+    disabled: disabled
+  }, label && React__default['default'].createElement(TextAreaLabel, {
+    htmlFor: "text-area-".concat(uniqueId),
+    placeholderVisible: Boolean(placeholder),
+    inputValue: controlledValue
+  }, label, required && ' *'), React__default['default'].createElement(TextAreaField, {
+    rows: rows,
+    ref: forwardedRef,
+    value: controlledValue,
+    name: name,
+    placeholder: placeholder,
+    required: required,
+    disabled: disabled,
+    error: error,
+    id: "text-area-".concat(uniqueId),
+    onChange: onInputChange,
+    onBlur: onBlur
+  }));
+});
+TextArea.defaultProps = {
+  rows: 4
+};
+TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
+  value: defaultTheme.PropTypes.string,
+  defaultValue: defaultTheme.PropTypes.string,
+  name: defaultTheme.PropTypes.string,
+  label: defaultTheme.PropTypes.string,
+  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
+  placeholder: defaultTheme.PropTypes.string,
+  required: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  error: defaultTheme.PropTypes.bool,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func
+} : {};
+
+exports.TextArea = TextArea;

package/inputs/TextArea/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var TextArea = require('../../TextArea-70a74014.js');
+require('../../defaultTheme-18d7c1ee.js');
+require('styled-components');
+require('react');
+require('nanoid');
+require('lodash');
+
+
+
+module.exports = TextArea.TextArea;

package/inputs/index.js

@@ -6,6 +6,7 @@ var ActionButton = require('../ActionButton-10a681b9.js');
 var Button = require('../Button-89056918.js');
 var Checkbox = require('../Checkbox-791a409f.js');
 var Radio = require('../Radio-9271a4b6.js');
+var TextArea = require('../TextArea-70a74014.js');
 var TextInput = require('../TextInput-72ce7e10.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
@@ -20,4 +21,5 @@ exports.ActionButton = ActionButton.ActionButton;
 exports.Button = Button.Button;
 exports.Checkbox = Checkbox.Checkbox;
 exports.Radio = Radio.Radio;
+exports.TextArea = TextArea.TextArea;
 exports.TextInput = TextInput.TextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "0.0.1-beta.29",
+  "version": "0.0.1-beta.32",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-591cb40a.js');
+var AssetGallery = require('../../AssetGallery-7b7c9ce2.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
@@ -12,6 +12,7 @@ require('../../Checkbox-791a409f.js');
 require('nanoid');
 require('../../Radio-9271a4b6.js');
 require('polished');
+require('../../TextArea-70a74014.js');
 require('../../TextInput-72ce7e10.js');
 require('../../Popover-0ff13419.js');
 require('@tippyjs/react');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-591cb40a.js');
+var AssetGallery = require('../AssetGallery-7b7c9ce2.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
@@ -14,6 +14,7 @@ require('../Checkbox-791a409f.js');
 require('nanoid');
 require('../Radio-9271a4b6.js');
 require('polished');
+require('../TextArea-70a74014.js');
 require('../TextInput-72ce7e10.js');
 require('../Popover-0ff13419.js');
 require('@tippyjs/react');