export default()

in src/setter/style-setter/pro/layout/index.tsx [27:116]
80 lines of code
3 McCabe index (conditional complexity)

export default (props: layoutProps) => {
  const { onStyleChange, styleData, layoutPropsConfig, unit } = props;

  // 配置合并
  const propsConfig = { ...defaultLayoutPropsConfig, ...layoutPropsConfig };

  // 传入配置
  const { showDisPlayList, isShowWidthHeight } = propsConfig;
  // 静态配置
  const { display, flexDirection, justifyContent, alignItems, flexWrap } = layoutConfig;

  const displayDataList = display.dataList.filter(
    (item) => showDisPlayList.indexOf(item.value) >= 0,
  );

  return (
    <Collapse defaultExpandedKeys={['0']}>
      <Panel title={layoutConfig.title} className="layout-style-container">
        <Row title={display.title} dataList={displayDataList} styleKey="display" {...props} longTitle={true}></Row>

        {styleData['display'] === 'flex' && (
          <>
            <Row
              title={flexDirection.title}
              dataList={flexDirection.dataList}
              styleKey="flexDirection"
              longTitle={true}
              {...props}
            />
            <Row
              title={justifyContent.title}
              dataList={justifyContent.dataList}
              styleKey="justifyContent"
              longTitle={true}
              {...props}
            />
            <Row
              title={alignItems.title}
              dataList={alignItems.dataList}
              styleKey="alignItems"
              longTitle={true}
              {...props}
            />
            <Row
              title={flexWrap.title}
              dataList={flexWrap.dataList}
              styleKey="flexWrap"
              longTitle={true}
              {...props}
            />
          </>
        )}

        <LayoutBox
          styleData={styleData}
          onStyleChange={onStyleChange}
          layoutPropsConfig={propsConfig}
          unit={unit}
        />

        {isShowWidthHeight && (
          <div className="inner-row-contaienr">
            <div className="row-item">
              <span className="row-item-title">{layoutConfig.width}</span>
              <Number
                style={{ marginRight: '10px', width: '100%' }}
                min={0}
                styleKey="width"
                {...props}
                unit = {['px','%']}
                useComputedStyle={true}
              />
            </div>
            <div className="row-item">
              <span className="row-item-title">{layoutConfig.height}</span>
              <Number
                styleKey="height"
                min={0}
                {...props}
                style={{ width: '100%' }}
                unit = {['px','%']}
                useComputedStyle={true}
              />
            </div>
          </div>
        )}
      </Panel>
    </Collapse>
  );
};