decap-cms-core/dist/esm/components/Collection/ViewStyleControl.js

Decap CMS core application, see decap-cms package for the main distribution.

import _styled from "@emotion/styled/base";
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
import { Icon, buttons, colors } from 'decap-cms-ui-default';
import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from '../../constants/collectionViews';
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
const ViewControlsSection = /*#__PURE__*/_styled("div", {
  target: "evv1i7c1",
  label: "ViewControlsSection"
})(process.env.NODE_ENV === "production" ? {
  name: "k6mob8",
  styles: "display:flex;align-items:center;justify-content:flex-end;max-width:500px"
} : {
  name: "k6mob8",
  styles: "display:flex;align-items:center;justify-content:flex-end;max-width:500px/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbGxlY3Rpb24vVmlld1N0eWxlQ29udHJvbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLc0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQ29sbGVjdGlvbi9WaWV3U3R5bGVDb250cm9sLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgSWNvbiwgYnV0dG9ucywgY29sb3JzIH0gZnJvbSAnZGVjYXAtY21zLXVpLWRlZmF1bHQnO1xuXG5pbXBvcnQgeyBWSUVXX1NUWUxFX0xJU1QsIFZJRVdfU1RZTEVfR1JJRCB9IGZyb20gJy4uLy4uL2NvbnN0YW50cy9jb2xsZWN0aW9uVmlld3MnO1xuXG5jb25zdCBWaWV3Q29udHJvbHNTZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbiAgbWF4LXdpZHRoOiA1MDBweDtcbmA7XG5cbmNvbnN0IFZpZXdDb250cm9sc0J1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gICR7YnV0dG9ucy5idXR0b259O1xuICBjb2xvcjogJHtwcm9wcyA9PiAocHJvcHMuaXNBY3RpdmUgPyBjb2xvcnMuYWN0aXZlIDogJyNiM2I5YzQnKX07XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwIDRweDtcblxuICAmOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1yaWdodDogMDtcbiAgfVxuXG4gICR7SWNvbn0ge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5gO1xuXG5mdW5jdGlvbiBWaWV3U3R5bGVDb250cm9sKHsgdmlld1N0eWxlLCBvbkNoYW5nZVZpZXdTdHlsZSwgdCB9KSB7XG4gIHJldHVybiAoXG4gICAgPFZpZXdDb250cm9sc1NlY3Rpb24+XG4gICAgICA8Vmlld0NvbnRyb2xzQnV0dG9uXG4gICAgICAgIGFyaWEtbGFiZWw9e3QoJ2NvbGxlY3Rpb24uY29sbGVjdGlvblRvcC52aWV3QXNMaXN0Jyl9XG4gICAgICAgIGlzQWN0aXZlPXt2aWV3U3R5bGUgPT09IFZJRVdfU1RZTEVfTElTVH1cbiAgICAgICAgb25DbGljaz17KCkgPT4gb25DaGFuZ2VWaWV3U3R5bGUoVklFV19TVFlMRV9MSVNUKX1cbiAgICAgID5cbiAgICAgICAgPEljb24gdHlwZT1cImxpc3RcIiAvPlxuICAgICAgPC9WaWV3Q29udHJvbHNCdXR0b24+XG4gICAgICA8Vmlld0NvbnRyb2xzQnV0dG9uXG4gICAgICAgIGFyaWEtbGFiZWw9e3QoJ2NvbGxlY3Rpb24uY29sbGVjdGlvblRvcC52aWV3QXNHcmlkJyl9XG4gICAgICAgIGlzQWN0aXZlPXt2aWV3U3R5bGUgPT09IFZJRVdfU1RZTEVfR1JJRH1cbiAgICAgICAgb25DbGljaz17KCkgPT4gb25DaGFuZ2VWaWV3U3R5bGUoVklFV19TVFlMRV9HUklEKX1cbiAgICAgID5cbiAgICAgICAgPEljb24gdHlwZT1cImdyaWRcIiAvPlxuICAgICAgPC9WaWV3Q29udHJvbHNCdXR0b24+XG4gICAgPC9WaWV3Q29udHJvbHNTZWN0aW9uPlxuICApO1xufVxuXG5leHBvcnQgZGVmYXVsdCBWaWV3U3R5bGVDb250cm9sO1xuIl19 */",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const ViewControlsButton = /*#__PURE__*/_styled("button", {
  target: "evv1i7c0",
  label: "ViewControlsButton"
})(buttons.button, ";color:", props => props.isActive ? colors.active : '#b3b9c4', ";background-color:transparent;display:block;padding:0;margin:0 4px;&:last-child{margin-right:0;}", Icon, "{display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbGxlY3Rpb24vVmlld1N0eWxlQ29udHJvbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZd0MiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQ29sbGVjdGlvbi9WaWV3U3R5bGVDb250cm9sLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgSWNvbiwgYnV0dG9ucywgY29sb3JzIH0gZnJvbSAnZGVjYXAtY21zLXVpLWRlZmF1bHQnO1xuXG5pbXBvcnQgeyBWSUVXX1NUWUxFX0xJU1QsIFZJRVdfU1RZTEVfR1JJRCB9IGZyb20gJy4uLy4uL2NvbnN0YW50cy9jb2xsZWN0aW9uVmlld3MnO1xuXG5jb25zdCBWaWV3Q29udHJvbHNTZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDtcbiAgbWF4LXdpZHRoOiA1MDBweDtcbmA7XG5cbmNvbnN0IFZpZXdDb250cm9sc0J1dHRvbiA9IHN0eWxlZC5idXR0b25gXG4gICR7YnV0dG9ucy5idXR0b259O1xuICBjb2xvcjogJHtwcm9wcyA9PiAocHJvcHMuaXNBY3RpdmUgPyBjb2xvcnMuYWN0aXZlIDogJyNiM2I5YzQnKX07XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBibG9jaztcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwIDRweDtcblxuICAmOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1yaWdodDogMDtcbiAgfVxuXG4gICR7SWNvbn0ge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5gO1xuXG5mdW5jdGlvbiBWaWV3U3R5bGVDb250cm9sKHsgdmlld1N0eWxlLCBvbkNoYW5nZVZpZXdTdHlsZSwgdCB9KSB7XG4gIHJldHVybiAoXG4gICAgPFZpZXdDb250cm9sc1NlY3Rpb24+XG4gICAgICA8Vmlld0NvbnRyb2xzQnV0dG9uXG4gICAgICAgIGFyaWEtbGFiZWw9e3QoJ2NvbGxlY3Rpb24uY29sbGVjdGlvblRvcC52aWV3QXNMaXN0Jyl9XG4gICAgICAgIGlzQWN0aXZlPXt2aWV3U3R5bGUgPT09IFZJRVdfU1RZTEVfTElTVH1cbiAgICAgICAgb25DbGljaz17KCkgPT4gb25DaGFuZ2VWaWV3U3R5bGUoVklFV19TVFlMRV9MSVNUKX1cbiAgICAgID5cbiAgICAgICAgPEljb24gdHlwZT1cImxpc3RcIiAvPlxuICAgICAgPC9WaWV3Q29udHJvbHNCdXR0b24+XG4gICAgICA8Vmlld0NvbnRyb2xzQnV0dG9uXG4gICAgICAgIGFyaWEtbGFiZWw9e3QoJ2NvbGxlY3Rpb24uY29sbGVjdGlvblRvcC52aWV3QXNHcmlkJyl9XG4gICAgICAgIGlzQWN0aXZlPXt2aWV3U3R5bGUgPT09IFZJRVdfU1RZTEVfR1JJRH1cbiAgICAgICAgb25DbGljaz17KCkgPT4gb25DaGFuZ2VWaWV3U3R5bGUoVklFV19TVFlMRV9HUklEKX1cbiAgICAgID5cbiAgICAgICAgPEljb24gdHlwZT1cImdyaWRcIiAvPlxuICAgICAgPC9WaWV3Q29udHJvbHNCdXR0b24+XG4gICAgPC9WaWV3Q29udHJvbHNTZWN0aW9uPlxuICApO1xufVxuXG5leHBvcnQgZGVmYXVsdCBWaWV3U3R5bGVDb250cm9sO1xuIl19 */"));
function ViewStyleControl({
  viewStyle,
  onChangeViewStyle,
  t
}) {
  return _jsxs(ViewControlsSection, {
    children: [_jsx(ViewControlsButton, {
      "aria-label": t('collection.collectionTop.viewAsList'),
      isActive: viewStyle === VIEW_STYLE_LIST,
      onClick: () => onChangeViewStyle(VIEW_STYLE_LIST),
      children: _jsx(Icon, {
        type: "list"
      })
    }), _jsx(ViewControlsButton, {
      "aria-label": t('collection.collectionTop.viewAsGrid'),
      isActive: viewStyle === VIEW_STYLE_GRID,
      onClick: () => onChangeViewStyle(VIEW_STYLE_GRID),
      children: _jsx(Icon, {
        type: "grid"
      })
    })]
  });
}
export default ViewStyleControl;