@ablogcms/media 3.2.28-beta.0

package/dist/components/media-admin/media-admin.mjs

@@ -0,0 +1,148 @@
+import {
+  MediaList,
+  MediaUploader
+} from "../../chunk-KQNVYJOK.mjs";
+import {
+  MediaModal,
+  actions_exports,
+  reducer_default,
+  rootSaga
+} from "../../chunk-JJTHI4QP.mjs";
+import {
+  getMediaFillStore
+} from "../../chunk-3SYVRD3N.mjs";
+import "../../chunk-J5LGTIGS.mjs";
+
+// src/components/media-admin/media-admin.tsx
+import { applyMiddleware, legacy_createStore as createStore } from "redux";
+import { Provider } from "react-redux";
+import createSagaMiddleware from "redux-saga";
+import { SlotFillProvider } from "@ablogcms/components/slot-fill";
+
+// src/containers/media-admin.tsx
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+
+// src/components/media-admin/media-admin-view.tsx
+import { Component, createRef } from "react";
+import { Tabs, TabPanel } from "@ablogcms/components/tabs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MediaAdminView = class extends Component {
+  uploaderRef;
+  constructor(props) {
+    super(props);
+    const params = new URLSearchParams(window.location.hash.replace("#", ""));
+    if (params.has("label")) {
+      props.actions.setLabel(params.get("label"));
+    }
+    this.state = {
+      isMediaModalOpen: false
+    };
+    this.uploaderRef = createRef();
+  }
+  defaultTabIndex() {
+    const params = new URLSearchParams(window.location.hash.replace("#", ""));
+    const { tab } = this.props;
+    if (params.get("upload") === "true") {
+      return 1;
+    }
+    if (tab === "upload") {
+      return 1;
+    }
+    return 0;
+  }
+  componentDidMount() {
+    this.props.actions.setFormToken(window.csrfToken);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.item !== this.props.item && this.props.item !== null) {
+      this.setState({ isMediaModalOpen: true });
+    }
+  }
+  handleMediaModalClose() {
+    this.setState({ isMediaModalOpen: false });
+  }
+  handleAfterMediaModalClose() {
+    this.props.actions.setItem(null);
+  }
+  handleTabChange() {
+    if (this.uploaderRef.current) {
+      this.uploaderRef.current.removeUploadedItems();
+    }
+  }
+  render() {
+    const { isMediaModalOpen } = this.state;
+    const {
+      items,
+      actions,
+      item,
+      largeSize,
+      formToken,
+      archives,
+      extensions,
+      mode,
+      lastPage,
+      config,
+      tags,
+      total,
+      selectedTags
+    } = this.props;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Tabs, { defaultIndex: this.defaultTabIndex(), onChange: this.handleTabChange.bind(this), children: [
+        /* @__PURE__ */ jsx(TabPanel, { label: ACMS.i18n("media.media_list"), id: "media-list", children: /* @__PURE__ */ jsx(
+          MediaList,
+          {
+            items,
+            actions,
+            mode,
+            lastPage,
+            config,
+            archives,
+            tags,
+            extensions,
+            total,
+            selectedTags
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TabPanel, { label: ACMS.i18n("media.upload"), id: "media-upload", children: /* @__PURE__ */ jsx(MediaUploader, { ref: this.uploaderRef, config, actions, largeSize, tags }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        MediaModal,
+        {
+          isOpen: isMediaModalOpen,
+          onClose: this.handleMediaModalClose.bind(this),
+          item,
+          actions,
+          formToken,
+          tags,
+          onAfterClose: this.handleAfterMediaModalClose.bind(this)
+        }
+      )
+    ] });
+  }
+};
+
+// src/containers/media-admin.tsx
+function mapStateToProps(state) {
+  return state;
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions_exports, dispatch)
+  };
+}
+var media_admin_default = connect(mapStateToProps, mapDispatchToProps)(MediaAdminView);
+
+// src/components/media-admin/media-admin.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var sagaMiddleware = createSagaMiddleware();
+var store = createStore(reducer_default, applyMiddleware(sagaMiddleware));
+sagaMiddleware.run(rootSaga);
+function MediaAdmin({ mode = "edit" }) {
+  return /* @__PURE__ */ jsx2(SlotFillProvider, { store: getMediaFillStore(), children: /* @__PURE__ */ jsx2(Provider, { store, children: /* @__PURE__ */ jsx2(media_admin_default, { mode }) }) });
+}
+var media_admin_default2 = MediaAdmin;
+export {
+  media_admin_default2 as default
+};
+//# sourceMappingURL=media-admin.mjs.map

package/dist/components/media-admin/media-admin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-admin/media-admin.tsx","../../../src/containers/media-admin.tsx","../../../src/components/media-admin/media-admin-view.tsx"],"sourcesContent":["import { applyMiddleware, legacy_createStore as createStore } from 'redux';\nimport { Provider } from 'react-redux';\nimport createSagaMiddleware from 'redux-saga';\nimport { SlotFillProvider } from '@ablogcms/components/slot-fill';\n\nimport MediaAdminContainer from '../../containers/media-admin';\nimport reducer from '../../stores/reducer';\nimport saga from '../../stores/saga';\nimport { getMediaFillStore } from '../../runtime';\n\nconst sagaMiddleware = createSagaMiddleware();\nconst store = createStore(reducer, applyMiddleware(sagaMiddleware));\n\nsagaMiddleware.run(saga);\n\ninterface MediaAdminProps {\n  mode?: React.ComponentProps<typeof MediaAdminContainer>['mode'];\n}\n\n// MediaAdmin は MediaModal（media.edit-modal.* Slot 群）を開く 8 経路の 1 つ。SlotFillProvider を\n// 巻いておかないと Slot が throw する。store は起動時注入（configureMediaRuntime）で、未注入時は\n// SlotFillProvider がローカルストアへフォールバックする。\nfunction MediaAdmin({ mode = 'edit' }: MediaAdminProps) {\n  return (\n    <SlotFillProvider store={getMediaFillStore()}>\n      <Provider store={store}>\n        <MediaAdminContainer mode={mode} />\n      </Provider>\n    </SlotFillProvider>\n  );\n}\n\nexport default MediaAdmin;\n","import { connect } from 'react-redux';\nimport { Dispatch, bindActionCreators } from 'redux';\nimport * as actions from '../stores/actions';\nimport MediaAdminView from '../components/media-admin/media-admin-view';\nimport { MediaStateProps } from '../types';\n\nfunction mapStateToProps(state: MediaStateProps) {\n  return state;\n}\n\nfunction mapDispatchToProps(dispatch: Dispatch) {\n  return {\n    actions: bindActionCreators(actions, dispatch),\n  };\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MediaAdminView);\n","import { Component, createRef } from 'react';\n\nimport { Tabs, TabPanel } from '@ablogcms/components/tabs';\nimport MediaList from '../media-list/media-list';\nimport MediaModal from '../media-modal/media-modal';\nimport MediaUploader from '../media-uploader/media-uploader';\nimport { MediaStateProps } from '../../types';\n\ninterface MediaAdminViewProps extends MediaStateProps {\n  mode: 'edit' | 'insert';\n  tab?: 'upload' | 'select';\n}\n\ninterface MediaAdminViewState {\n  isMediaModalOpen: boolean;\n}\n\nexport default class MediaAdminView extends Component<MediaAdminViewProps, MediaAdminViewState> {\n  uploaderRef: React.RefObject<InstanceType<typeof MediaUploader> | null>;\n\n  constructor(props: MediaAdminViewProps) {\n    super(props);\n    const params = new URLSearchParams(window.location.hash.replace('#', ''));\n    // e.g http://acms.org/bid/1/admin/media_index/#label=aaa,bbb&upload=true\n    if (params.has('label')) {\n      props.actions.setLabel(params.get('label') as string);\n    }\n    this.state = {\n      isMediaModalOpen: false,\n    };\n    this.uploaderRef = createRef<InstanceType<typeof MediaUploader>>();\n  }\n\n  defaultTabIndex() {\n    const params = new URLSearchParams(window.location.hash.replace('#', ''));\n    const { tab } = this.props;\n    if (params.get('upload') === 'true') {\n      return 1;\n    }\n\n    if (tab === 'upload') {\n      return 1;\n    }\n    return 0;\n  }\n\n  componentDidMount() {\n    this.props.actions.setFormToken(window.csrfToken);\n  }\n\n  componentDidUpdate(prevProps: MediaAdminViewProps) {\n    if (prevProps.item !== this.props.item && this.props.item !== null) {\n      this.setState({ isMediaModalOpen: true });\n    }\n  }\n\n  handleMediaModalClose() {\n    this.setState({ isMediaModalOpen: false });\n  }\n\n  handleAfterMediaModalClose() {\n    this.props.actions.setItem(null);\n  }\n\n  handleTabChange() {\n    if (this.uploaderRef.current) {\n      // タブ切り替え時にアップロード済みアイテムを削除\n      this.uploaderRef.current.removeUploadedItems();\n    }\n  }\n\n  render() {\n    const { isMediaModalOpen } = this.state;\n    const {\n      items,\n      actions,\n      item,\n      largeSize,\n      formToken,\n      archives,\n      extensions,\n      mode,\n      lastPage,\n      config,\n      tags,\n      total,\n      selectedTags,\n    } = this.props;\n\n    return (\n      <div>\n        <Tabs defaultIndex={this.defaultTabIndex()} onChange={this.handleTabChange.bind(this)}>\n          <TabPanel label={ACMS.i18n('media.media_list')} id=\"media-list\">\n            <MediaList\n              items={items}\n              actions={actions}\n              mode={mode}\n              lastPage={lastPage}\n              config={config}\n              archives={archives}\n              tags={tags}\n              extensions={extensions}\n              total={total}\n              selectedTags={selectedTags}\n            />\n          </TabPanel>\n          <TabPanel label={ACMS.i18n('media.upload')} id=\"media-upload\">\n            <MediaUploader ref={this.uploaderRef} config={config} actions={actions} largeSize={largeSize} tags={tags} />\n          </TabPanel>\n        </Tabs>\n        <MediaModal\n          isOpen={isMediaModalOpen}\n          onClose={this.handleMediaModalClose.bind(this)}\n          item={item}\n          actions={actions}\n          formToken={formToken}\n          tags={tags}\n          onAfterClose={this.handleAfterMediaModalClose.bind(this)}\n        />\n      </div>\n    );\n  }\n}\n"],"mappings":"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","names":["jsx","media_admin_default"]}

package/dist/components/media-droparea/media-droparea.d.ts

@@ -0,0 +1,63 @@
+import { Component } from 'react';
+import type { ExtendedFile } from '@ablogcms/lib/read-files';
+import { MediaItem, MediaType } from '../../types/index.js';
+type AcceptMediaType = Extract<MediaType, 'image' | 'file'> | 'all';
+type MediaDropAreaProps = {
+    /**
+     * メディアID
+     */
+    mid?: number;
+    /**
+     * サムネイル画像のパス
+     */
+    thumbnail: string;
+    /**
+     * キャプション
+     */
+    caption: string;
+    /**
+     * 幅
+     */
+    width: React.CSSProperties['width'];
+    /**
+     * 高さ
+     */
+    height: React.CSSProperties['height'];
+    /**
+     * メディアタイプ
+     */
+    mediaType?: MediaType;
+    /**
+     * 受け付けるメディアタイプ
+     */
+    accept?: AcceptMediaType;
+    /**
+     * メディアの変更時のコールバック
+     */
+    onChange: (media: MediaItem | null) => void;
+    /**
+     * エラー時のコールバック
+     */
+    onError: () => void;
+};
+interface MediaDropAreaState {
+    isInsertModalOpen: boolean;
+    isUpdateModalOpen: boolean;
+    files: File[];
+}
+export default class MediaDropArea extends Component<MediaDropAreaProps, MediaDropAreaState> {
+    static defaultProps: {
+        accept: string;
+    };
+    constructor(props: MediaDropAreaProps);
+    onComplete: (files: ExtendedFile[]) => void;
+    uploadFile: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onInsert: (items: MediaItem[]) => void;
+    onClose: () => void;
+    onUpdateModalClose: () => void;
+    onUpdateModalUpdate: (item: MediaItem) => void;
+    handleRemove: () => void;
+    openEditModal: () => void;
+    render(): import("react").JSX.Element;
+}
+export {};

package/dist/components/media-droparea/media-droparea.mjs

@@ -0,0 +1,152 @@
+import {
+  media_update_default
+} from "../../chunk-5P6HFS6L.mjs";
+import {
+  media_insert_default
+} from "../../chunk-LAZAMWG6.mjs";
+import "../../chunk-KQNVYJOK.mjs";
+import "../../chunk-JJTHI4QP.mjs";
+import "../../chunk-3SYVRD3N.mjs";
+import "../../chunk-J5LGTIGS.mjs";
+
+// src/components/media-droparea/media-droparea.tsx
+import { Component } from "react";
+import { DropZone, DropZoneFileSelector, DropZoneText } from "@ablogcms/components/drop-zone";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MediaDropArea = class extends Component {
+  static defaultProps = {
+    accept: "image"
+  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      isInsertModalOpen: false,
+      isUpdateModalOpen: false,
+      files: []
+    };
+  }
+  onComplete = (files) => {
+    this.setState({
+      files: files.map((item) => item.file),
+      isInsertModalOpen: true
+    });
+  };
+  uploadFile = (e) => {
+    if (e.target.files instanceof FileList) {
+      this.setState({
+        files: Array.from(e.target.files),
+        isInsertModalOpen: true
+      });
+    }
+  };
+  onInsert = (items) => {
+    const { accept = "image" } = this.props;
+    const [item] = items;
+    const fileOrImage = item.media_type === "image" || item.media_type === "svg" ? "image" : "file";
+    if (accept !== "all" && accept !== fileOrImage) {
+      this.props.onError();
+      this.setState({
+        isInsertModalOpen: false
+      });
+      return;
+    }
+    this.setState({
+      isInsertModalOpen: false
+    });
+    this.props.onChange(item);
+  };
+  onClose = () => {
+    this.setState({
+      isInsertModalOpen: false
+    });
+  };
+  onUpdateModalClose = () => {
+    this.setState({
+      isUpdateModalOpen: false
+    });
+  };
+  onUpdateModalUpdate = (item) => {
+    this.setState({
+      isUpdateModalOpen: false
+    });
+    this.props.onChange(item);
+  };
+  handleRemove = () => {
+    this.props.onChange(null);
+  };
+  openEditModal = () => {
+    this.setState({
+      isUpdateModalOpen: true
+    });
+  };
+  render() {
+    const { isInsertModalOpen, isUpdateModalOpen, files } = this.state;
+    const { mediaType, accept = "image", caption, width, height, mid, thumbnail } = this.props;
+    const style = {};
+    if (width) {
+      style.width = width;
+    }
+    if (height) {
+      style.height = height;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DropZone, { onComplete: this.onComplete, children: /* @__PURE__ */ jsxs("div", { children: [
+        mid === void 0 && /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-unit-droparea", style, children: [
+          /* @__PURE__ */ jsx(DropZoneText, { children: ACMS.i18n("media.add_new_media") }),
+          /* @__PURE__ */ jsx(DropZoneFileSelector, { onChange: this.uploadFile, disabled: isInsertModalOpen }),
+          /* @__PURE__ */ jsx(DropZoneText, { children: ACMS.i18n("media.drop_file") })
+        ] }),
+        mid != null && mid > 0 && /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-unit-preview-wrap", children: [
+          /* @__PURE__ */ jsx("div", { className: "acms-admin-media-unit-preview-overlay" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "acms-admin-media-unit-preview-remove-btn",
+              onClick: this.handleRemove,
+              "aria-label": ACMS.i18n("media.clear_button_label")
+            }
+          ),
+          (mediaType === "image" || mediaType === "svg") && /* @__PURE__ */ jsx("img", { className: "acms-admin-media-field-preview", src: `${thumbnail}`, alt: "" }),
+          mediaType === "file" && /* @__PURE__ */ jsxs("div", { className: "acms-admin-media-unit-file-icon-wrap", children: [
+            /* @__PURE__ */ jsx("img", { className: "acms-admin-media-unit-file-icon", src: `${thumbnail}`, alt: "" }),
+            /* @__PURE__ */ jsx("p", { className: "acms-admin-media-unit-file-caption", children: caption })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "acms-admin-media-edit-btn acms-admin-media-unit-preview-edit-btn",
+              onClick: () => this.openEditModal(),
+              children: ACMS.i18n("media.edit")
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        media_insert_default,
+        {
+          isOpen: isInsertModalOpen,
+          onInsert: this.onInsert,
+          files,
+          onClose: this.onClose,
+          tab: "upload",
+          filetype: accept
+        }
+      ),
+      mid != null && mid > 0 && /* @__PURE__ */ jsx(
+        media_update_default,
+        {
+          isOpen: isUpdateModalOpen,
+          mid,
+          onClose: this.onUpdateModalClose,
+          onUpdate: this.onUpdateModalUpdate
+        }
+      )
+    ] });
+  }
+};
+export {
+  MediaDropArea as default
+};
+//# sourceMappingURL=media-droparea.mjs.map

package/dist/components/media-droparea/media-droparea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-droparea/media-droparea.tsx"],"sourcesContent":["import { CSSProperties, Component } from 'react';\nimport type { ExtendedFile } from '@ablogcms/lib/read-files';\nimport { DropZone, DropZoneFileSelector, DropZoneText } from '@ablogcms/components/drop-zone';\nimport MediaInsert from '../media-insert/media-insert';\nimport MediaUpdate from '../media-update/media-update';\nimport { MediaItem, MediaType } from '../../types';\n\ntype AcceptMediaType = Extract<MediaType, 'image' | 'file'> | 'all';\ntype MediaDropAreaProps = {\n  /**\n   * メディアID\n   */\n  mid?: number;\n\n  /**\n   * サムネイル画像のパス\n   */\n  thumbnail: string;\n\n  /**\n   * キャプション\n   */\n  caption: string;\n\n  /**\n   * 幅\n   */\n  width: React.CSSProperties['width'];\n\n  /**\n   * 高さ\n   */\n  height: React.CSSProperties['height'];\n\n  /**\n   * メディアタイプ\n   */\n  mediaType?: MediaType;\n\n  /**\n   * 受け付けるメディアタイプ\n   */\n  accept?: AcceptMediaType;\n\n  /**\n   * メディアの変更時のコールバック\n   */\n  onChange: (media: MediaItem | null) => void;\n\n  /**\n   * エラー時のコールバック\n   */\n  onError: () => void;\n};\n\ninterface MediaDropAreaState {\n  isInsertModalOpen: boolean;\n  isUpdateModalOpen: boolean;\n  files: File[];\n}\n\nexport default class MediaDropArea extends Component<MediaDropAreaProps, MediaDropAreaState> {\n  static defaultProps = {\n    accept: 'image',\n  };\n\n  constructor(props: MediaDropAreaProps) {\n    super(props);\n    this.state = {\n      isInsertModalOpen: false,\n      isUpdateModalOpen: false,\n      files: [],\n    };\n  }\n\n  onComplete = (files: ExtendedFile[]) => {\n    this.setState({\n      files: files.map((item) => item.file),\n      isInsertModalOpen: true,\n    });\n  };\n\n  uploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files instanceof FileList) {\n      this.setState({\n        files: Array.from(e.target.files),\n        isInsertModalOpen: true,\n      });\n    }\n  };\n\n  onInsert = (items: MediaItem[]) => {\n    const { accept = 'image' } = this.props;\n    const [item] = items;\n    const fileOrImage = item.media_type === 'image' || item.media_type === 'svg' ? 'image' : 'file';\n    if (accept !== 'all' && accept !== fileOrImage) {\n      this.props.onError();\n      this.setState({\n        isInsertModalOpen: false,\n      });\n      return;\n    }\n    this.setState({\n      isInsertModalOpen: false,\n    });\n    this.props.onChange(item);\n  };\n\n  onClose = () => {\n    this.setState({\n      isInsertModalOpen: false,\n    });\n  };\n\n  onUpdateModalClose = () => {\n    this.setState({\n      isUpdateModalOpen: false,\n    });\n  };\n\n  onUpdateModalUpdate = (item: MediaItem) => {\n    this.setState({\n      isUpdateModalOpen: false,\n    });\n    this.props.onChange(item);\n  };\n\n  handleRemove = () => {\n    this.props.onChange(null);\n  };\n\n  openEditModal = () => {\n    this.setState({\n      isUpdateModalOpen: true,\n    });\n  };\n\n  render() {\n    const { isInsertModalOpen, isUpdateModalOpen, files } = this.state;\n    const { mediaType, accept = 'image', caption, width, height, mid, thumbnail } = this.props;\n\n    const style: CSSProperties = {};\n\n    if (width) {\n      style.width = width;\n    }\n    if (height) {\n      style.height = height;\n    }\n\n    return (\n      <>\n        <DropZone onComplete={this.onComplete}>\n          <div>\n            {mid === undefined && (\n              <div className=\"acms-admin-media-unit-droparea\" style={style}>\n                <DropZoneText>{ACMS.i18n('media.add_new_media')}</DropZoneText>\n                <DropZoneFileSelector onChange={this.uploadFile} disabled={isInsertModalOpen} />\n                <DropZoneText>{ACMS.i18n('media.drop_file')}</DropZoneText>\n              </div>\n            )}\n            {mid != null && mid > 0 && (\n              <div className=\"acms-admin-media-unit-preview-wrap\">\n                <div className=\"acms-admin-media-unit-preview-overlay\" />\n                <button\n                  type=\"button\"\n                  className=\"acms-admin-media-unit-preview-remove-btn\"\n                  onClick={this.handleRemove}\n                  aria-label={ACMS.i18n('media.clear_button_label')}\n                />\n                {(mediaType === 'image' || mediaType === 'svg') && (\n                  <img className=\"acms-admin-media-field-preview\" src={`${thumbnail}`} alt=\"\" />\n                )}\n                {mediaType === 'file' && (\n                  <div className=\"acms-admin-media-unit-file-icon-wrap\">\n                    <img className=\"acms-admin-media-unit-file-icon\" src={`${thumbnail}`} alt=\"\" />\n                    <p className=\"acms-admin-media-unit-file-caption\">{caption}</p>\n                  </div>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"acms-admin-media-edit-btn acms-admin-media-unit-preview-edit-btn\"\n                  onClick={() => this.openEditModal()}\n                >\n                  {ACMS.i18n('media.edit')}\n                </button>\n              </div>\n            )}\n          </div>\n        </DropZone>\n        <MediaInsert\n          isOpen={isInsertModalOpen}\n          onInsert={this.onInsert}\n          files={files}\n          onClose={this.onClose}\n          tab=\"upload\"\n          filetype={accept}\n        />\n        {mid != null && mid > 0 && (\n          <MediaUpdate\n            isOpen={isUpdateModalOpen}\n            mid={mid}\n            onClose={this.onUpdateModalClose}\n            onUpdate={this.onUpdateModalUpdate}\n          />\n        )}\n      </>\n    );\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/components/media-edit-modal/media-edit-modal.d.ts

@@ -0,0 +1,58 @@
+import { Component } from 'react';
+import { DragEndEvent, Modifier } from '@dnd-kit/core';
+import { Transform } from '@dnd-kit/utilities';
+import Cropper from 'cropperjs';
+import { ExtendedFile } from '@ablogcms/lib/read-files';
+
+import { FocalPoint } from '../../types/index.js';
+interface MediaEditModalProps {
+    onClose: () => void;
+    onCrop: (blob: Blob | null, focalPoint: FocalPoint) => void;
+    isOpen: boolean;
+    src: string;
+    focalPoint: FocalPoint;
+    mediaCropSizes: [number, number][];
+    title?: string;
+    width: number;
+    height: number;
+    original?: string;
+    container?: HTMLElement;
+}
+interface MediaEditModalState {
+    upload: boolean;
+    blob?: Blob | null;
+    cropWidth: number;
+    cropHeight: number;
+    useFocalPoint: boolean;
+    focalPoint: FocalPoint;
+    zoom: number;
+    ratio: number;
+    src: string;
+    timeout: ReturnType<typeof setTimeout> | null;
+    isCropListOpen: boolean;
+}
+export default class MediaEditModal extends Component<MediaEditModalProps, MediaEditModalState> {
+    image: HTMLImageElement | null;
+    cropper: Cropper | null;
+    constructor(props: MediaEditModalProps);
+    componentWillUnmount(): void;
+    setImageRef(node: HTMLImageElement | null): void;
+    handleAfterOpen(): void;
+    handleAfterClose(): void;
+    onCancel(): void;
+    onCrop(): void;
+    onUploadImg(files: ExtendedFile[]): void;
+    useOriginalImg(): void;
+    changeAspectRatio(ratioProp: number): void;
+    rotate(rotate: number): void;
+    toggleFocalPoint(): void;
+    handleFocalDragEnd: (event: DragEndEvent) => void;
+    focalPointToTransform: (focalPoint: FocalPoint) => Transform;
+    hoverOnCropList: () => void;
+    leaveFromCropList: () => void;
+    toggleCropList: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    restrictToCanvas: Modifier;
+    getImgWidth(width: number, height: number): string;
+    render(): import("react").JSX.Element;
+}
+export {};

package/dist/components/media-insert/media-insert-modal.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'react';
+import Modal from '@ablogcms/components/modal';
+import MediaUploader from '../media-uploader/media-uploader.js';
+import { MediaStateProps, MediaItem, MediaViewFileType } from '../../types/index.js';
+interface MediaInsertModalProps extends MediaStateProps, Pick<React.ComponentProps<typeof Modal>, 'onClose' | 'isOpen' | 'container'> {
+    tab?: 'upload' | 'select';
+    mode?: 'edit' | 'insert';
+    radioMode?: boolean;
+    filetype?: MediaViewFileType;
+    files?: File[];
+    onInsert: (items: MediaItem[]) => void;
+}
+interface MediaInsertModalState {
+    tabIndex: number;
+    isMediaModalOpen: boolean;
+}
+export default class MediaInsertModal extends Component<MediaInsertModalProps, MediaInsertModalState> {
+    uploaderRef: React.RefObject<InstanceType<typeof MediaUploader> | null>;
+    constructor(props: MediaInsertModalProps);
+    defaultTabIndex(): 0 | 1;
+    handleAfterOpen(): void;
+    componentDidUpdate(prevProps: MediaInsertModalProps): void;
+    handleMediaModalClose(): void;
+    handleAfterMediaModalClose(): void;
+    insertMedia(): void;
+    upsert(): void;
+    handleTabChange(tabIndex: number): void;
+    render(): import("react").JSX.Element;
+}
+export {};

package/dist/components/media-insert/media-insert.d.ts

@@ -0,0 +1,5 @@
+import MediaInsertContainer from '../../containers/media-insert.js';
+interface MediaInsertProps extends React.ComponentProps<typeof MediaInsertContainer> {
+}
+declare function MediaInsert({ mode, tab, radioMode, filetype, files, onInsert, onClose, isOpen, container, }: MediaInsertProps): import("react").JSX.Element;
+export default MediaInsert;

package/dist/components/media-insert/media-insert.mjs

@@ -0,0 +1,11 @@
+import {
+  media_insert_default
+} from "../../chunk-LAZAMWG6.mjs";
+import "../../chunk-KQNVYJOK.mjs";
+import "../../chunk-JJTHI4QP.mjs";
+import "../../chunk-3SYVRD3N.mjs";
+import "../../chunk-J5LGTIGS.mjs";
+export {
+  media_insert_default as default
+};
+//# sourceMappingURL=media-insert.mjs.map

package/dist/components/media-insert/media-insert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/media-list/media-list.d.ts

@@ -0,0 +1,125 @@
+
+import { Component } from 'react';
+import { Menu } from '@ablogcms/components/dropdown-menu';
+import * as actions from '../../stores/actions.js';
+import { MediaItem, MediaAjaxConfig, MediaViewFileType, MediaTag } from '../../types/index.js';
+/** Slot `media.list.bulk-actions`（HOOKS.md 参照）の fillProps */
+export interface MediaListBulkActionsFillProps {
+    selectedItems: MediaItem[];
+}
+interface MediaListProps {
+    actions: typeof actions;
+    items: MediaItem[];
+    archives: string[];
+    tags: string[];
+    extensions?: string[];
+    selectedTags: string[];
+    config: Required<MediaAjaxConfig>;
+    lastPage: number;
+    mode: string;
+    total: number;
+    filetype?: 'all' | 'image' | 'file';
+    radioMode?: boolean;
+}
+interface Menu {
+    image: boolean;
+    id: boolean;
+    filename: boolean;
+    tag: boolean;
+    last_modified: boolean;
+    upload_datetime: boolean;
+    imagesize: boolean;
+    filesize: boolean;
+    blogname: boolean;
+}
+type SortDirection = 'asc' | 'desc';
+interface OrderActive {
+    media_title: SortDirection;
+    media_last_modified: SortDirection;
+    media_datetime?: SortDirection;
+    media_path: SortDirection;
+    media_size: SortDirection;
+    media_filesize: SortDirection;
+}
+type DisplayStyle = 'table' | 'list';
+interface MediaListState {
+    order: OrderActive;
+    menu: Menu;
+    scale: number;
+    filterMenuOpened: boolean;
+    editMode: string;
+    year: string;
+    month: string;
+    toggleAll: boolean;
+    orderActive: keyof OrderActive;
+    search: string;
+    labels: MediaTag[];
+    selectedLabels: MediaTag[];
+    style: DisplayStyle;
+    oldItemId: MediaItem['media_id'] | null;
+    items: MediaItem[];
+    limit: number;
+    displayPage: number;
+    filteredOptions: MediaTag[];
+    fileext: string;
+    owner: boolean;
+    blogAxis: boolean;
+    filetype: MediaViewFileType;
+}
+export default class MediaList extends Component<MediaListProps, MediaListState> {
+    listRef: React.RefObject<HTMLFormElement | null>;
+    static defaultProps: {
+        radioMode: boolean;
+        filetype: string;
+        extensions: never[];
+    };
+    constructor(props: MediaListProps);
+    getOrderSelectBtnLabel(): string;
+    setItem(item: MediaItem): boolean;
+    toggleCheck(item: MediaItem): void;
+    toggleCheckFrom(fromItemId: MediaItem['media_id'], toItem: MediaItem): void;
+    toggleAllCheck(): void;
+    removeImgs(): Promise<void>;
+    setOrder(target: keyof OrderActive): void;
+    checkOrder(orderActive: keyof OrderActive): void;
+    checkAscDesc(ascdesc: 'asc' | 'desc'): void;
+    getOrder(): string;
+    fetchMediaList(config?: MediaAjaxConfig): void;
+    getIsSorted(th: keyof OrderActive): false | SortDirection;
+    getNextSortDirection(th: keyof OrderActive): SortDirection;
+    changeStyle(style: DisplayStyle): void;
+    getCheckedItemsLength(): number;
+    /**
+     * チェック済みかつ「実際にチェックボックスが描画される」アイテムのみを返す。
+     * `mode === 'edit'` のとき `!media_editable` の行はチェックボックス自体が描画されない
+     * （テーブル行の描画条件 `mode !== 'edit' || item.media_editable` と同じ判定）が、
+     * `toggleAllCheck()`（全選択）は編集可否を見ずに `checked` を立てるため、`props.items` の
+     * `checked` だけを見ると実際にフォーム送信される対象より多く数えてしまう。
+     * `media.delete.before`/`.success` の `mediaIds` と Slot `media.list.bulk-actions` の
+     * `selectedItems` は、実削除対象（フォームのチェックボックス）と一致させるためこちらを使う。
+     */
+    getSelectedItems(): MediaItem[];
+    onLabelChange(labels: readonly MediaTag[]): void;
+    getFilteredOptions(tags: string[]): void;
+    onChangeDisplayNumber(e: React.ChangeEvent<HTMLSelectElement>): void;
+    onKeywordInput(e: React.FormEvent<HTMLInputElement>): void;
+    getArchives(archives: string[]): {
+        years: string[];
+        months: string[];
+    };
+    onDateChange(value: string, type: 'year' | 'month'): void;
+    onAddedLabelsChange(labels: readonly MediaTag[]): void;
+    addLabelToItems(): Promise<void>;
+    getFileStyle: (item: MediaItem) => React.CSSProperties;
+    getImageStyle: (item: MediaItem) => React.CSSProperties;
+    rowClick(e: React.MouseEvent<HTMLTableRowElement>, item: MediaItem): void;
+    componentDidUpdate(prevProps: MediaListProps): void;
+    componentDidMount(): void;
+    loadImg(url: string): Promise<HTMLImageElement>;
+    setItems(items: MediaItem[]): void;
+    scaleChanged: (scale: number | number[]) => void;
+    getOptions: () => MediaTag[];
+    toggleMenu(menuItem: keyof Menu): void;
+    render(): import("react").JSX.Element;
+}
+export {};