npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sinoform/helper-permission

v1.18.11

Published

权限辅助工具。

Downloads

50

Readme

@sinoform/helper-permission

权限辅助工具。

使用方法:

import type { Permission } from '@sinoform/types';
import { usePermissionHelper } from '@sinoform/helper-permission';

const { formData, formState, hooks } = useDetailPage();
const permissionHelper = usePermissionHelper(
  formData,
  formState,
  hooks.permission,
);

// 判断字段 `field_1` 的编辑权限
permissionHelper.isReadOnly('field_1');
// 判断字段 `field_1` 的可见性(注意:第二个参数须为 `false`,表示默认的`hidden` 是 `false`,而不是`permission.hidden`)
permissionHelper.isHidden('field_1', false);
// 判断按钮 `save-button` 的可见性
permissionHelper.isHidden('save-button');

获取表单项权限的帮助类

需要处理以下特性对表单项可见性的影响:

  • 选项关联

使用方式

import { useFieldsPermission } from '@sinoform/helper-get-fields-permission';

function useDetailPageData() {
  /**
   * 获取表单项的权限
   */
  const fieldsPermission = useFieldsPermission(
    formDesignSetting,
    formState,
    basePermissions,
  );

  const formDataContext = {
    asyncPermission: fieldsPermission,
  };

  return {
    formDataContext,
  };
}

选项关联

带有选项的表单项是可以通过选项关联来控制表单项的可见性的。规则:

单选按钮组(表单项0)有 A、B、C 三个选项,其中 A 选项关联显示 表单项1,B 选项关联显示 表单项2,C 选项关联显示 表单项3,表单上还有其他的表单项 表单项4表单项5,如果单选按钮组选中的选项是 表单项1,那么应该出现以下表单项:

  • 表单项 0
  • 表单项 1
  • 表单项 4
  • 表单项 5

支持的表单项

以下内置的表单项均支持:

  • 单选按钮组
  • 复选按钮组
  • 下拉选择框(单选、多选)

其他表单项只要具有以下两个重要特性,也会被认为是支持选项关联的表单项:

  • 特性一:表单项配置有 fieldsMapConfig 字段
  • 特性二:能够从 formValues 中自动获取到选项值
特性一

特性一很好满足,在表单设计器的字段属性面板中添加上 设置选项关联 按钮就可以了。采用 @sinoform/comp-fields-map-config 模块导出的 FieldsMapConfigButton 组件即可,例如:

import FieldsMapConfigButton from '@sinoform/comp-fields-map-config';

<ConfigPanel>
  <FieldsMapConfigButton />
</ConfigPanel>;
特性二

表单项的值需要包含选中的选项值,并且符合下面几种数据格式中的一种即可:

  1. 数据格式 1:选中的选项值直接作为表单项的值

    {
      "field_name": "option1"
    }
  2. 数据格式 2:选中的选项标题直接作为表单项的值

    {
      "field_name": "选项一"
    }
  3. 数据格式 3:多个选中的选项值数组作为表单项的值

    {
      "field_name": ["option1", "option2"]
    }
  4. 数据格式 4:多个选中的选项标题数组作为表单项的值

    {
      "field_name": ["选项一", "选项二"]
    }
  5. 数据格式 5:带有 selectedId 字段的对象作为表单项值(单选按钮组采用此数据格式)

    {
      "field_name": {
        "selectedId": "option1"
      }
    }
  6. 数据格式 6:带有 selectedIds 字段的对象作为表单项值(复选按钮组采用此数据格式)

    {
      "field_name": {
        "selectedIds": ["option1", "option2"]
      }
    }

级联的选项关联规则

例如 表单项A 控制 表单项B表单项C表单项B 控制 表单项D表单项C 控制 表单项E表单项F。如果 表单项A 是不可见的,那么以下表单项均不可见:

  • 表单项 B
  • 表单项 C
  • 表单项 D
  • 表单项 E
  • 表单项 F

非关联的表单项

此权限计算不会处理非关联的表单项,即使是带有关联选项表单项之后的表单项。