需要文件夹 - 不
这个 neeto-folders-nano 作为新纳米的真相来源
结构、配置、数据等.
目录
用主机应用程序开发
发动机
安装
-
将此行添加到您的应用程序的 Gemfile 中 :
source "NEETO_GEM_SERVER_URL" do # ..existing gems gem 'neeto-folders-engine' end -
然后执行:
bundle install -
在表格中添加所需的迁移
db/migrate文件夹。 运行以下 命令复制从引擎到主机应用程序的迁移.rails g neeto_folders_engine:install bundle exec rails db:migrate
使用量
-
扩展文件夹模式
NeetoFoldersEngine::Folder基础课。 下面是样本代码 定义一个RecordingFolder通过扩展NeetoFoldersEngine::Folder管理录音.class RecordingFolder < NeetoFoldersEngine::Folder has_many :recordings, -> { unscope(where: :deleted_at) }, foreign_key: :folder_id, dependent: :nullifyNeetoFoldersEngine也期望一个实例方法items将在 扩展的班级。 这样可以使NeetoFoldersEngine以跟踪 文件夹中的项目数。 下面是Neeto Record的样本代码.def items recordings end -
包含
NeetoFoldersEngine::Folderable应属于的模型中 到文件夹中。 排队很重要。 包含Folderable之后Deletable从 neto 普通后端允许Folderable以覆盖soft_delete方法.include NeetoFoldersEngine::Folderable -
NeetoFoldersEngine还暴露了控制器类NeetoFoldersEngine::FoldersController与index, (中文(简体) ),show, (中文(简体) ),create, (中文(简体) ),update, (中文(简体) ),destroy, (中文(简体) ),bulk_update, (中文(简体) ),bulk_destroy,以及reorder动作 管理文件夹 。 主机应用程序可以扩展此类以管理他们的 文件夹。 确保正确配置这些路线 行动.类似于
RecordingFolder < NeetoFoldersEngine::Folder,则NeetoFoldersEngine::FoldersController基础控制器期望afolders在扩展类中定义的方法允许控制器 属于特定类型的目标文件夹实例。 如下所述: neetoRecord 中提取记录文件夹的样本定义 由扩展控制器管理.class Api::V1::FoldersController < NeetoFoldersEngine::FoldersController private def folders @_folders ||= @organization.recording_folders.includes(:recordings) end end
前端软件包
安装
-
添加数据
neeto-folders-frontend软件包到package.jsonyarn add @bigbinary/neeto-folders-frontend
发展指示
检查 前端软件包开发指南 用于开发前端软件包的分步指令.
使用量
neeto-folders-frontend 导出一组组件、 钩子、 utils 和常数
将并入主机应用程序.
上述导出大多接受一定的配置对象
属性。 以下为默认结构 config 对象。 你们可以
将自己的配置对象作为参数或道具来自定义行为
适合主机产品。 在常数文件中定义此常数并自定义
某些属性,例如必要的参数.
{
type: "FOLDER", // A unique type key for query keys.
maxDepth: 2, // Maximum allowed depth for folder tree
folderPath: "/folders/:folderId", // Path for handling URL redirections and params matching.
invalidationKeys: [], // For invalidation purposes. Keys in this array will be invalidated along with folders.
reorderMode: "rearrange", // If reorder pane should mount in positional `reorder` mode or simple `rearrange` mode.
// Taxonomy
labels: {
folder: t("common.folder"),
folders: t("common.folders"),
items: t("common.items"),
items: t("common.items"),
}
params: {}, // Params to be passed to APIs along with other params. Can be used for sorting and similar.
api: { // Folder CRUD methods.
fetch: noop,
get: noop,
create: noop,
update: noop,
destroy: noop,
bulkUpdate: noop,
bulkDestroy: noop,
},
folderActions: { getMoreActions: (node) => [...], getAddActions: (node) => [...] },
itemActions: { getMoreActions: (node) => [...], getAddActions: (node) => [...] }
}
构成部分
import * as components from "@bigbinary/neeto-folders-frontend/components";
-
FoldersContext: 此组件使所有提示和窗体与 文件夹。 请确保此组件包含在您的部分 应用.道具 :
config: 自定义文件夹行为的配置对象 .
样本使用量 :
import { FoldersContext } from "@bigbinary/neeto-folders-frontend/components"; // .... <FoldersContext config={foldersConfig}> <ApplicationComponent> </FoldersContext> -
FoldersTree: 此组件使树上的文件夹成为树结构 .道具 :
config: 自定义文件夹行为的配置对象 .
样本使用量 :
import { FoldersTree } from "@bigbinary/neeto-folders-frontend/components"; // .... <FoldersTree config={foldersConfig} />; -
FoldersList: 组件生成文件夹列表。 如果没有文件夹是 选中/ 激活, 制作根文件夹列表 。 如果在选定的文件夹内, 制作子文件夹列表。 活动文件夹根据 匹配 URL 中的参数folderPath输入config对象.道具 :
-
config: 自定义文件夹行为的配置对象 . -
selection: 显示所选文件夹 ID 的文件夹 ID 数组 批量选择. -
onSelect: 为文件夹项选择复选框时触发的回调 用于批量选择.
样本使用量 :
import { FoldersList } from "@bigbinary/neeto-folders-frontend/components"; // .... <FoldersList config={foldersConfig} onSelect={onSelectFolder} selection={folderSelection} />; -
-
MoveToFolderPane: 此组件可用于主机应用程序以移动 选项。 组件将当前文件夹列表以 收音机按钮并引用回调来选择文件夹.道具 :
-
isOpen: 控制窗格能见度的布尔值. -
item: 要移动到文件夹中的项目对象. -
config: 自定义文件夹行为的配置对象 . -
submitButtonProps:平板"投降"按钮覆盖. -
cancelButtonProps:平板"取消"按钮覆盖. -
removeButtonProps: 句子"从文件夹中移除"按钮覆盖. 请注意: 按钮将被隐藏,除非onRemove提供道具. -
onSubmit(folderId): 以所选文件夹的 ID 引用回调 提交. -
onClose(): 关闭窗格时引用回调 . -
onRemove(): 删除文件夹按钮时引用回调 按键。 注意, 除非提供此道具, 按钮会被隐藏 . -
onSelect: 为文件夹项选择复选框时触发的回调 用于批量选择.
样本使用量 :
import { MoveToFolderPane } from "@bigbinary/neeto-folders-frontend/components"; // .... <MoveToFolderPane item={itemToMove} onSelect={onSelectFolder} selection={folderSelection} />; -
-
AddEditPane: 此组件可用于主机应用程序来添加或编辑文件夹.道具 :
-
config: 自定义文件夹行为的配置对象 . -
onClose(): 关闭窗格时引用回调 . -
folderSid: 这是可选的。 创建新文件夹的父文件夹的 SID 。 如果没有提供,请使用来自 URL 的激活文件夹 . -
setFocusField: Ref rec callback 设置在窗格打开时聚焦名称输入字段.
样本使用量 :
import { AddEditPane } from "@bigbinary/neeto-folders-frontend/components"; // .... <AddEditPane {...{ setFocusField, onClose }} config={foldersConfig} folderSid={selectedFolderSid} />; -
钩子
import * as hooks from "@bigbinary/neeto-folders-frontend/hooks";
-
useFolders(config): 返回树上所有文件夹数据的钩 结构.参数 :
config: 自定义文件夹行为的配置对象 .
回返情况:
-
isLoading数字 :true当数据被获取到活动文件夹时.false否则. -
folders: 树结构中所有指定类型文件夹的数据.
-
useFolder(config): 返回与当前活动相关的数据的钩 基于 URL 参数的文件夹.参数 :
config: 自定义文件夹行为的配置对象 .
回返情况:
-
isLoading数字 :true当数据被获取到活动文件夹时.false否则. -
folderId: 以 URL param 为基础的当前活动文件夹的SID. -
folder: 如果存在当前文件夹的数据.
-
useFolderActions(config): 钩子返回一组回调以触发 来自主机应用程序的动作.参数 :
config: 自定义文件夹行为的配置对象 .
回返情况:
-
isPending数字 :true当行动正在进行时.false否则. -
onAdd(): 启动文件夹创建动作 . -
onEdit(folder): 启动文件夹编辑动作。 接受folder数据 作为争论. -
onMove(folder): 启动文件夹编辑动作。 接受folder数据 作为争论. -
onDelete(folder): 启动文件夹删除动作。 接受folder数据作为参数. -
onReorder(): 启动重排文件夹动作 。 打开“ 重排 ” 窗关.
用户
import * as utils from "@bigbinary/neeto-folders-frontend/utils";
-
路径 :
参数 :
-
folders: 树状结构中的文件夹数据,由useFolders钩. -
folderId: 目标文件夹 id.
将一个平整的文件夹数组从根文件夹返回到当前文件夹 编号
folderId用于显示面包屑和类似物. -
常数
import * as constants from "@bigbinary/neeto-folders-frontend/constants";
-
QUERY_KEYS: 使用查询密钥以瞄准回放查询动作, 如 无效.-
[QUERY_KEYS.FOLDERS]: 瞄准每个与文件夹相关的查询. -
[QUERY_KEYS.FOLDERS, config.folderType]: 目标每个查询 特定类型的文件夹. -
[QUERY_KEYS.FOLDERS, config.folderType, QUERY_KEYS.LIST]目标文件夹 列表中选择一个选项. -
[QUERY_KEYS.FOLDERS, config.folderType, QUERY_KEYS.DETAILS, folderId]数字 : 带有 id 文件夹的目标文件夹细节folderId
-
出版指令
咨询 构建和释放软件包 关于如何出版的详细指南.