@lyra/form-builder/lib/inputs/ImageInput/SelectAsset.js

Lyra form builder

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _get2 = require('lodash/get');

var _get3 = _interopRequireDefault(_get2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _client = require('part:@lyra/base/client');

var _client2 = _interopRequireDefault(_client);

var _default = require('part:@lyra/components/buttons/default');

var _default2 = _interopRequireDefault(_default);

var _SelectAsset = require('./styles/SelectAsset.css');

var _SelectAsset2 = _interopRequireDefault(_SelectAsset);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const PER_PAGE = 200;

/*:: type Asset = {
  _id: string,
  url: string
}*/
/*:: type State = {
  assets: Array<Asset>,
  isLastPage: boolean
}*/
/*:: type Props = {
  onSelect: Asset => void
}*/


function createQuery(start = 0, end = PER_PAGE) {
  return `*[_type == "lyra.imageAsset"] | order(_updatedAt desc) [${start}...${end}] {_id,url,metadata {dimensions}}`;
}

class SelectAsset extends _react2.default.Component /*:: <Props, State>*/ {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      assets: [],
      isLastPage: false
    }, this.pageNo = 0, this.handleItemClick = (event /*: SyntheticEvent<*>*/) => {
      event.preventDefault();
      this.select(event.currentTarget.getAttribute('data-id'));
    }, this.handleItemKeyPress = (event /*: SyntheticEvent<*>*/) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        this.select(event.currentTarget.getAttribute('data-id'));
      }
    }, this.handleFetchNextPage = () => {
      this.fetchPage(++this.pageNo);
    }, _temp;
  }

  fetchPage(pageNo /*: number*/) {
    const start = pageNo * PER_PAGE;
    const end = start + PER_PAGE;
    return _client2.default.fetch(createQuery(start, end)).then(result => {
      this.setState(prevState => ({
        isLastPage: result.length === 0,
        assets: prevState.assets.concat(result)
      }));
    });
  }

  componentDidMount() {
    this.fetchPage(this.pageNo);
  }

  select(id) {
    const selected = this.state.assets.find(doc => doc._id === id);
    if (selected) {
      this.props.onSelect(selected);
    }
  }

  render() {
    var _state = this.state;
    const assets = _state.assets,
          isLastPage = _state.isLastPage;

    return _react2.default.createElement(
      'div',
      { className: _SelectAsset2.default.root },
      _react2.default.createElement(
        'div',
        { className: _SelectAsset2.default.imageList },
        assets.map(asset => {
          const size = 75;
          const width = (0, _get3.default)(asset, 'metadata.dimensions.width') || 100;
          const height = (0, _get3.default)(asset, 'metadata.dimensions.height') || 100;
          return _react2.default.createElement(
            'a',
            {
              key: asset._id,
              className: _SelectAsset2.default.item,
              'data-id': asset._id,
              onClick: this.handleItemClick,
              onKeyPress: this.handleItemKeyPress,
              tabIndex: 0,
              style: {
                width: `${width * size / height}px`,
                flexGrow: `${width * size / height}`
              }
            },
            _react2.default.createElement('i', {
              className: _SelectAsset2.default.padder,
              style: { paddingBottom: `${height / width * 100}%` }
            }),
            _react2.default.createElement('img', { src: `${asset.url}?h=100`, className: _SelectAsset2.default.image })
          );
        })
      ),
      _react2.default.createElement(
        'div',
        { className: _SelectAsset2.default.loadMore },
        isLastPage ? _react2.default.createElement(
          'span',
          null,
          'Nothing more to load\u2026'
        ) : _react2.default.createElement(
          _default2.default,
          { onClick: this.handleFetchNextPage },
          'Load more\u2026'
        )
      )
    );
  }
}
exports.default = SelectAsset;