边框组件设计

本托核心侧边栏设计 :

• 所有点击事件使用本地状态
• 仅用于存储活动过滤器的全局redux
• 限制道具钻探的使用
• 本多核心侧边栏组件定义的核心布局
• 使用生成器函数来创建和配置组件( 由于本地状态问题, 生成器 funtion 不用于配置所有侧边栏组件)
• 实现侧边栏组件定制最大化的简单配置
• 在反应中应用 SOLID 原则( S)https://konstantinlebedev.com/solid-in-react/ (中文(简体) )(中文(简体) )

1 Redux 存储活性过滤器值和配置

生成和整合 reduux 调度动作

import { sideBarReducerGenerator } from 'bento-core';
const { statusReducer } = sideBarReducerGenerator();

const reducers = {  statusReducer, ..., otherReducers };
const loggerMiddleware = createLogger();
const store = createStore( 
  combineReducers(reducers), 
  composeWithDevTools (applyMiddleware(ReduxThunk, loggerMiddleware)),
);

检查所有活动过滤器的全局 redux 商店

// active filter json structure
statusReducer:
  filterState:
    pr_status:
     {
       Not Reported: true
     },
     rc_scores: {
       11-15: true,
       21-25: true
     }
     tumor_grades: {}
     tumor_sizes: {(1,2]: true} 

(注: Bento Core sideBar 提供了覆盖 redux 过滤事件/动作的方法. )

2 导入组件和配置

import FacetFilter from 'bento-core';

<FacetFilterThemeProvider>
  <OtherComponent />
  <FacetFilter
    data={searchData}
    facetSectionConfig={facetSectionVariables}
    facetsConfig={facetsConfig}
    CustomFacetSection={CustomFacetSection}
    CustomFacetView={CustomFacetView}
  />
</FacetFilterThemeProvider>

3 个数据板

搜索数据 传出DashBOARDQUERY数据

 <FacetFilter
    data={searchData}
    ...
 />

4 个面孔

import { InputTypes } from 'bento-core';

export const facetsConfig = [{ 
  section: CASES,
  label: 'Program', 
  apiForFiltering: 'filterSubjectCountByProgram', 
  datafield: 'programs', 
  field: GROUP, 
  type: InputTypes.CHECKBOX, 
  sort_type: sortType.ALPHABET,
  show: true, 
}, {
   section: CASES,
   label: 'Age',
    apiForFiltering: 'filterSubjectCountByAge',
    datafield: 'age_at_index',
    ApiLowerBoundName: 'lowerBound',    
    ApiUpperBoundName: 'upperBound',
    show: true,    
    slider: true,    
    type: InputTypes.SLIDER,
    sort_type: 'none',   
    minLowerBound: 0,  
    maxUpperBound: 100,   
    quantifier: 'Years',
].

1. 用于编辑 指从查询回复中检索名称和对象的对象密钥( DASHBOARDQUERY)
2. 数据字段 用于跟踪活动过滤项的全域再添加存储字段
3. 类型 表示输入类型(复选框或滑动器)
4. 排序( t) 本托核心侧边栏局部状态用于排序面值的属性
5. 节 指向表面区域的名称
6. 显示 属性必须是真实的,以便在 Bento 核心边框组件上显示正方形

根据复选框或滑动器等输入类型而不同的配置

(注 - SLIDER 需要额外的属性)

5个平面区域

export const facetSectionVariables = { 
Cases: { 
  isExpanded: true,
},  
Samples: {
  isExpanded: true,
},  
Files: {
  isExpanded: true,
}};

Facet 一节定义了将在 Bento 核心侧边栏组件上显示的节数. 已扩展 属性设置该部分的默认状态,即如果真实,那么如果假面部分崩溃,则正面部分会扩展.

6 自定义节

Bento Core侧边栏组件为一些组件提供视图定制功能,如Facet Spection和Face组件.

const CustomFacetSection = ({ section }) => { 
  return (
    <>
     <CustomExpansionPanelSummary>
       <div className={classes.sectionSummaryTextContainer}>
         {section.name} 
       </div>
      </CustomExpansionPanelSummary>
    </> );
}; 

// provide as props
<FacetFilter
  data={searchData}
  facetSectionConfig={facetSectionVariables}
  facetsConfig={facetsConfig}
  CustomFacetSection={CustomFacetSection}
  CustomFacetView={CustomFacetView}
/>

7 自定义视窗

const CustomFacetView = ({ facet, facetClasses }) => {   
   return (
     <>        
       <CustomExpansionPanelSummary>          
         <div 
           className={clsx(classes.sectionSummaryText, classes[facetClasses])}
          >            
           {facet.label}
         </div>        
       </CustomExpansionPanelSummary>      
    </>    
)};

// provide as props
<FacetFilter
  data={searchData}
  facetSectionConfig={facetSectionVariables}
  facetsConfig={facetsConfig}
  CustomFacetSection={CustomFacetSection}
  CustomFacetView={CustomFacetView}
/>

8 FacetFilter 主题提供器

Bento Core 侧边栏对其组件动态指定类 (穆伊部分) 根据该构成部分的当地状况, 面孔图形 财务报告和审定财务报表 平面区域。本托核心侧边栏广泛使用 Mui 组件 主题提供 可用于为 Bento Core Sidebar 中的每个组件覆盖样式。 这种方法类似于反应 内容防止道具钻孔.

const theme = {
overrides: {
 MuiListItem:
root: {        
  '&.casesCheckedEven': {
    //refer to class name table 
    ..//styles 
  }
  '&.casesCheckedOdd' :{
    //refer to class name table 
    ..//styles 
  },
  '&.samplesCheckedEven': { 
    //refer to class name table 
  ..//styles 
  }
  '&.samplesCheckedOdd' :{
  ..//styles 
  },
   MuiSvgIcon: {
  root: {
  '&.casesCheckedIcon': {
    //refer to class name table 
    ..//styles 
  }
  '&.samplesCheckedIcon': {
    ..//styles
  }
}

import FacetFilter from 'bento-core';
<ThemeProvider theme={computedTheme}>
   <FacetFilter />
</ThemeProvider>

注:这些都是实例类名称,它基于配置,因此对于不同的配置,该类可能不适用)

检查框组件 CLAS 名称表

随父至子的顺序
粗体 文本表示变量
活动 - 当检查输入类型时
[indexType] (英语) = “ Even” / “ Odd” , 以平面值索引为基础
{已检查一节} = 区名( 方块的属性) (类似案例、 样本、 文件)

滑动组件
{类型} -分或最大(滑动输入类型)

9. 造型自定义组件

本多核心侧边栏提供的类可以被应用于自定义元素.

className={clsx(classes.sectionSummaryText, classes[facetClasses])}

10 CLearallFilter 按钮组件

Bento Core提供 1. 清除所有活性过滤器的功能, 2. 禁用旗帜( 真实情况下没有活性过滤器) 。 客户端负责定义视图(Custom html).

import { generateClearAllFilterBtn } from 'bento-core';

const CustomClearAllFiltersBtn = ({ onClearAllFilters, disable }) => {
    //...custom component 1. bind onClearFilters fn
    // 2. disable flag to disable button
}

const ClearAllFiltersButton = () => generateClearAllFilterBtn(CustomClearAllFiltersBtn);