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

package/cjs/components/widgets/AssetAction/AssetAction.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var AssetAction_styled = require('./AssetAction.styled.js');
+var lodash = require('lodash');
+var react = require('@floating-ui/react');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["action", "asset", "itemKey"];
+const AssetAction = index["default"].forwardRef(function AssetAction(_ref, forwardedRef) {
+  let {
+      action,
+      asset,
+      itemKey
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const ARROW_WIDTH = 10;
+  const ARROW_HEIGHT = 5;
+  const GAP = 3;
+  const arrowRef = index$1.react.exports.useRef(null);
+  const [isOpen, setIsOpen] = index$1.react.exports.useState(false);
+  const [placement] = index$1.react.exports.useState('bottom');
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = react.useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: react.autoUpdate,
+    middleware: [react.offset(ARROW_HEIGHT + GAP), react.flip({
+      padding: 5
+    }), react.shift({
+      padding: 5
+    }), react.arrow({
+      element: arrowRef
+    })]
+  });
+  const {
+    isMounted,
+    styles
+  } = react.useTransitionStyles(context, {
+    initial: {
+      transform: 'translateY(-8px)',
+      opacity: 0
+    },
+    duration: {
+      open: 200,
+      close: 100
+    }
+  });
+  const hover = react.useHover(context);
+  const dismiss = react.useDismiss(context, {
+    referencePress: true
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = react.useInteractions([dismiss, hover]);
+  const onActionClick = index$1.react.exports.useCallback((e, action) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (lodash.isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
+      action.onClick(asset);
+    }
+  }, [action]);
+  return index["default"].createElement(AssetAction_styled.AssetAction, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef
+  }, props), index["default"].createElement(AssetAction_styled.AssetActionButton, _rollupPluginBabelHelpers["extends"]({
+    key: itemKey,
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    onClick: e => onActionClick(e, action.onClick(asset), itemKey),
+    actionWidthHeight: action.actionWidthHeight
+  }), action.icon), isOpen && isMounted && index["default"].createElement(AssetAction_styled.Floating, _rollupPluginBabelHelpers["extends"]({
+    className: "floating",
+    ref: refs.setFloating,
+    style: floatingStyles
+  }, getFloatingProps()), index["default"].createElement(AssetAction_styled.ActionTitle, {
+    style: styles
+  }, action.title), index["default"].createElement(AssetAction_styled.StyledFloatingArrow, {
+    ref: arrowRef,
+    context: context,
+    width: ARROW_WIDTH,
+    height: ARROW_HEIGHT
+  })));
+});
+AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
+  action: index$2["default"].shape({
+    icon: index$2["default"].node,
+    onClick: index$2["default"].func,
+    actionWidthHeight: index$2["default"].arrayOf(index$2["default"].number),
+    title: index$2["default"].string
+  }),
+  asset: index$2["default"].object,
+  itemKey: index$2["default"].string
+} : {};
+AssetAction.defaultProps = {};
+var AssetAction$1 = AssetAction;
+
+exports["default"] = AssetAction$1;

package/cjs/components/widgets/AssetAction/AssetAction.styled.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+var react = require('@floating-ui/react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5;
+const AssetAction = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+`), props => props.theme.primaryFontFamily);
+const AssetActionButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  border-radius: 50%;
+  width: ${0};
+  height: ${0};
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  ${0};
+  svg {
+    pointer-events: none;
+    width: ${0};
+    height: ${0};
+    ${0};
+  }
+`), props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto', props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto', props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto', props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto', props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white')));
+const ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 8px 12px;
+  white-space: nowrap;
+  color: white;
+  background: ${0};
+`), props => props.theme.getColor('gray-700'));
+const StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  fill: ${0};
+`), props => props.theme.getColor('gray-700'));
+const Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+  pointer-events: none;
+`));
+
+exports.ActionTitle = ActionTitle;
+exports.AssetAction = AssetAction;
+exports.AssetActionButton = AssetActionButton;
+exports.Floating = Floating;
+exports.StyledFloatingArrow = StyledFloatingArrow;

package/cjs/components/widgets/AssetActionsBase/AssetActionsBase.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$1 = require('../../../node_modules/prop-types/index.js');
+var AssetActionsBase_styled = require('./AssetActionsBase.styled.js');
+var AssetAction = require('../AssetAction/AssetAction.js');
+
+const _excluded = ["actions", "asset"];
+const AssetActionsBase = index["default"].forwardRef(function AssetActionsBase(_ref, forwardedRef) {
+  let {
+      actions,
+      asset
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const assetActions = actions.map((action, index$1) => index["default"].createElement(AssetAction["default"], _rollupPluginBabelHelpers["extends"]({
+    key: `index_${action.title}`,
+    ref: forwardedRef
+  }, props, {
+    action: action,
+    asset: asset,
+    itemKey: `${index$1}-${action.title}`
+  })));
+  return index["default"].createElement(AssetActionsBase_styled.AssetActions, null, assetActions);
+});
+AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  actions: index$1["default"].arrayOf(index$1["default"].object),
+  asset: index$1["default"].object
+} : {};
+AssetActionsBase.defaultProps = {};
+var AssetActionsBase$1 = AssetActionsBase;
+
+exports["default"] = AssetActionsBase$1;

package/cjs/components/widgets/AssetActionsBase/AssetActionsBase.styled.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t;
+const AssetActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  gap: 8px;
+`), props => props.theme.primaryFontFamily);
+
+exports.AssetActions = AssetActions;

package/cjs/components/widgets/AssetGallery/AssetGallery.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var lodash = require('lodash');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var index = require('../../../node_modules/react/index.js');
+var asset_propType = require('./asset.propType.js');
+var AssetGalleryBase = require('./AssetGalleryBase/AssetGalleryBase.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "displayIcon"];
+const AssetGallery = index["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
+  let {
+      assets,
+      activeSummaryCard,
+      viewMode,
+      thumbnailMaxHeight,
+      selectable,
+      selectedAssetKeys,
+      onSelectedChanged,
+      softSelectable,
+      scrollElement,
+      onSoftSelectedChanged,
+      component,
+      displayIcon
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = index$1.react.exports.useState(selectedAssetKeys || []);
+  const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = index$1.react.exports.useState(null);
+  index$1.react.exports.useEffect(() => {
+    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
+  }, [selectedAssetKeys]);
+  index$1.react.exports.useEffect(() => {
+    setSelectedAssetKeysInternalState(current => {
+      return current.filter(c => assets.some(a => a.key === c));
+    });
+  }, [assets.length]);
+  index$1.react.exports.useEffect(() => {
+    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
+    if (lodash.isFunction(onSelectedChanged)) {
+      onSelectedChanged(selectedAssetKeysInternalState);
+    }
+  }, [selectedAssetKeysInternalState]);
+  index$1.react.exports.useEffect(() => {
+    if (lodash.isFunction(onSoftSelectedChanged)) {
+      onSoftSelectedChanged(softSelectedAssetKeyInternalState);
+    }
+  }, [softSelectedAssetKeyInternalState]);
+  const onSelected = index$1.react.exports.useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);
+  }, []);
+  const onUnselected = index$1.react.exports.useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey));
+  }, []);
+  const onAssetSoftSelectedChanged = index$1.react.exports.useCallback((assetKey = null) => {
+    setSoftSelectedAssetKeyInternalState(assetKey);
+  }, []);
+  return index["default"].createElement(AssetGalleryBase["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    assets: assets,
+    activeSummaryCard: activeSummaryCard,
+    displayIcon: displayIcon,
+    thumbnailMaxHeight: thumbnailMaxHeight,
+    selectable: selectable,
+    selectedAssetKeys: selectedAssetKeysInternalState,
+    onAssetSelected: onSelected,
+    onAssetUnselected: onUnselected,
+    softSelectable: softSelectable,
+    softSelectedAssetKey: softSelectedAssetKeyInternalState,
+    scrollElement: scrollElement,
+    onAssetSoftSelectedChanged: onAssetSoftSelectedChanged,
+    component: component,
+    viewMode: viewMode
+  }, props));
+});
+AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
+  assets: index$2["default"].arrayOf(index$2["default"].shape(asset_propType.assetShape)),
+  displayIcon: index$2["default"].string,
+  activeSummaryCard: index$2["default"].bool,
+  viewMode: index$2["default"].oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: index$2["default"].number,
+  selectable: index$2["default"].bool,
+  selectedAssetKeys: index$2["default"].oneOfType([index$2["default"].arrayOf(index$2["default"].string), index$2["default"].arrayOf(index$2["default"].number)]),
+  onSelectedChanged: index$2["default"].func,
+  softSelectable: index$2["default"].bool,
+  scrollElement: index$2["default"].instanceOf(Element),
+  onSoftSelectedChanged: index$2["default"].func,
+  component: index$2["default"].func
+} : {};
+AssetGallery.defaultProps = {
+  assets: [],
+  viewMode: 'compact',
+  thumbnailMaxHeight: 300,
+  selectedAssetKeys: [],
+  activeSummaryCard: false,
+  displayIcon: ''
+};
+var AssetGallery$1 = AssetGallery;
+
+exports["default"] = AssetGallery$1;