antd#Slider TypeScript Examples

SlideController: React.FC<SelectControllerProps> = memo(
  ({ onChange, value, minValue, maxValue, step, showMarks }) => {
    const [val, setVal] = useState<any>();
    const _onChange = _val => {
      setVal(_val);
    };
    const _onChangeEnter = value => {
      onChange(value);
    };
    useEffect(() => {
      setVal(value);
    }, [value]);
    const marks = {
      [minValue]: minValue,
      [maxValue]: maxValue,
      [val]: val,
    };
    return (
      <StyledWrap>
        <Slider
          value={val}
          onChange={_onChange}
          onAfterChange={_onChangeEnter}
          min={minValue}
          max={maxValue}
          step={step}
          {...(showMarks && { marks: marks })}
        />
      </StyledWrap>
    );
  },
)

UrgentSlider: React.FC = () => {
	const { t } = useTranslation();
	const [{ value }, { touched, error }, { setValue }] = useField('urgency');
	const errorMessage = touched && error;
	const status = errorMessage ? 'error' : '';

	const urgentOptions = getUrgentOptions(t);
	const marks = urgentOptions.reduce<{ [key: number]: ReactNode | undefined }>((acc, curr, i) => {
		acc[i] = value === i ? <label>{curr.label}</label> : undefined;
		return acc;
	}, {});

	const activeUrgentOption = urgentOptions.find((option) => option.value === value);

	return (
		<StyledFormItem validateStatus={status} help={errorMessage}>
			<StyledLabel>{t('Urgency')}</StyledLabel>
			<StyledSliderWrapper color={activeUrgentOption?.color}>
				<Slider
					min={0}
					max={4}
					marks={marks}
					value={value}
					onChange={setValue}
					tooltipVisible={false}
				></Slider>
			</StyledSliderWrapper>
		</StyledFormItem>
	);
}

BasicSlider: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
  ({ ancestors, translate: t = title => title, data: row, onChange }) => {
    const { comType, options, ...rest } = row;

    return (
      <BW label={t(row.label, true)}>
        <Slider
          {...rest}
          {...options}
          min={!isUndefined(options?.min) ? Number(options?.min) : 1}
          max={!isUndefined(options?.max) ? Number(options?.max) : 10}
          step={!isUndefined(options?.step) ? Number(options?.step) : 1}
          dots={isUndefined(options?.dots) ? true : options?.dots}
          defaultValue={rest?.default}
          onChange={value => onChange?.(ancestors, value)}
        />
      </BW>
    );
  },
  itemLayoutComparer,
)

SizeAction: FC<{
  config: ChartDataSectionField;
  onConfigChange: (
    config: ChartDataSectionField,
    needRefresh?: boolean,
  ) => void;
}> = ({ config, onConfigChange }) => {
  const actionNeedNewRequest = true;
  const [size, setSize] = useState(config?.size);

  const handleChange = selectedValue => {
    const newConfig = updateBy(config, draft => {
      draft.size = selectedValue;
    });
    setSize(selectedValue);
    onConfigChange?.(newConfig, actionNeedNewRequest);
  };

  return (
    <Slider
      dots
      tooltipVisible
      value={size}
      onChange={handleChange}
      min={1}
      max={10}
      step={1}
    />
  );
}

SliderSet: React.FC<SliderSetProps> = memo(
  ({ onChange, value, maxValue, minValue, step, showMarks }) => {
    const [val, setVal] = useState<any>();
    const _onChange = _val => {
      onChange?.([_val]);
    };
    const marks = {
      [minValue]: minValue,
      [maxValue]: maxValue,
      [val]: val,
    };
    useEffect(() => {
      setVal(value?.[0]);
    }, [value]);
    return (
      <Slider
        max={maxValue}
        min={minValue}
        step={step}
        value={val}
        {...(showMarks && { marks: marks })}
        onChange={_onChange}
      />
    );
  },
)

export function GeneralSlider(props: GeneralSliderProps): React.ReactElement {
  const {
    value,
    disabled,
    dots,
    max,
    min,
    range,
    marks,
    step,
    included,
    onlyShowMode,
    size,
    onChange,
    onAfterChange,
  } = props;

  return (
    <Slider
      className={classNames({
        [style.onlyShowMode]: onlyShowMode,
        [style.bigMode]: size === "large",
      })}
      value={value}
      disabled={disabled || onlyShowMode}
      dots={dots}
      max={max}
      min={min}
      range={range}
      marks={marks}
      step={step}
      included={included}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  );
}

describe("GeneralSlider", () => {
  it("should work", () => {
    const changeMock = jest.fn();
    const props = {
      value: 30,
      onChange: changeMock,
    };
    const wrapper = shallow(<GeneralSlider {...props} />);
    wrapper.find(Slider).invoke("onChange")(3);
    expect(changeMock).toHaveBeenCalledWith(3);
  });
});

describe("GeneralSlide", () => {
  it("should work", () => {
    const changeMock = jest.fn();
    const props = {
      value: 30,
      onChange: changeMock,
    };
    const wrapper = shallow(<GeneralSlide {...props} />);
    wrapper.find(Slider).invoke("onChange")(3);
    expect(changeMock).toHaveBeenCalledWith(3);
    wrapper.setProps({ uiType: "dashboard" });
    expect(wrapper.find(".dashboardSlider").length).toBe(1);
  });
});

RangeSliderSet: React.FC<SliderSetProps> = memo(
  ({ onChange, value }) => {
    const [val, setVal] = useState<any>();
    const _onChange = _val => {
      onChange?.(_val);
    };
    useEffect(() => {
      setVal([value?.[0], value?.[1]]);
    }, [value]);
    return <Slider range value={val} onChange={_onChange} />;
  },
)

getItem = ({ attr, type, inputNode }: {
  attr?: Partial<ItemChildAttr<any, any>>;
  type?: ItemChildType;
  inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
  let renderItem = undefined;
  if (type === 'Input') {
    const inputAttr = attr as InputProps;
    renderItem = <Input {...inputAttr} />;
  } else if (type === 'TextArea') {
    const inputAttr = attr as TextAreaProps;
    renderItem = <Input.TextArea {...inputAttr} />;
  } else if (type === 'InputNumber') {
    const inputAttr = attr as InputNumberProps;
    renderItem = <InputNumber {...inputAttr} />;
  } else if (type === 'AutoComplete') {
    const inputAttr = attr as AutoCompleteProps;
    renderItem = <AutoComplete {...inputAttr} />;
  } else if (type === 'Cascader') {
    const inputAttr = attr as CascaderProps;
    renderItem = <Cascader {...inputAttr} />;
  } else if (type === 'DatePicker') {
    const inputAttr = attr as DatePickerProps;
    renderItem = <DatePicker {...inputAttr} />;
  } else if (type === 'Rate') {
    const inputAttr = attr as RateProps;
    renderItem = <Rate {...inputAttr} />;
  } else if (type === 'Slider') {
    const inputAttr = attr as SliderSingleProps;
    renderItem = <Slider {...inputAttr} />;
  } else if (type === 'TreeSelect') {
    const inputAttr = attr as TreeSelectProps<any>;
    renderItem = <TreeSelect {...inputAttr} />;
  } else if (type === 'Select') {
    const inputAttr = attr as SelectProps<any>;
    renderItem = <Select {...inputAttr} />;
  } else if (type === 'Checkbox') {
    const inputAttr = attr as CheckboxGroupProps;
    renderItem = <Checkbox.Group {...inputAttr} />;
  } else if (type === 'Mentions') {
    const inputAttr = attr as MentionProps;
    renderItem = <Mentions {...inputAttr} />;
  } else if (type === 'Radio') {
    const inputAttr = attr as RadioProps;
    renderItem = <Radio.Group {...inputAttr} />;
  } else if (type === 'Switch') {
    const inputAttr = attr as SwitchProps;
    renderItem = <Switch {...inputAttr} />;
  } else if (type === 'TimePicker') {
    const inputAttr = attr as TimePickerProps;
    renderItem = <TimePicker {...inputAttr} />;
  } else if (type === 'Upload') {
    const inputAttr = attr as UploadProps;
    renderItem = <Upload {...inputAttr} />;
  } else if (type === 'RangePicker') {
    const inputAttr = attr as RangePickerProps;
    renderItem = <RangePicker {...inputAttr} />;
  } else if (type === 'Custom') {
    renderItem = inputNode;
  }
  return renderItem;
}

SliderFilter: FC<PresentControllerFilterProps> = memo(
  ({ condition, options, onConditionChange }) => {
    const [valueRange, setValueRange] = useState(() => {
      if (Array.isArray(condition?.value)) {
        return condition?.value as [number, number];
      }
    });

    const handleValueChange = (values: [number, number]) => {
      const newCondition = updateBy(condition!, draft => {
        draft.value = values;
      });
      onConditionChange(newCondition);
      setValueRange(newCondition.value as [number, number]);
    };

    return (
      <Slider
        range
        value={valueRange}
        onChange={handleValueChange}
        min={options?.min}
        max={options?.max}
      />
    );
  },
)

export function SliderField({
  entityName,
  propertyName,
  formItemProps,
  value,
  onChange,
  ...rest
}: SliderFieldProps) {
  return (
    <JmixFormFieldWrapper
      entityName={entityName}
      propertyName={propertyName}
      formItemProps={formItemProps}
      renderField={isReadOnly => (
        <Slider
          value={value}
          onChange={onChange}
          disabled={isReadOnly}
          {...rest}
        />
      )}
    />
  );
}

BoxShadow: FC<FormProps<valueType>> = memo(({ value, onChange }) => {
  const [val, setVal] = useSetState<valueType>({
    h: 0,
    v: 0,
    bs: 0,
    ss: 0,
    c: undefined,
  });
  const marks = {
    '-100': '-100',
    0: '0',
    100: '100',
  };

  const triggerChange = (changedValue: Partial<valueType>) => {
    onChange && onChange({ ...value, ...val, ...changedValue });
  };
  useEffect(() => {
    if (value) {
      setVal(value);
    }
  }, [value]);

  return (
    <>
      <Input
        type={'color'}
        title="阴影的颜色"
        value={val.c}
        onChange={(val) => triggerChange({ c: val.target.value })}
      ></Input>
      <Slider
        marks={marks}
        range={false}
        defaultValue={0}
        min={-100}
        max={100}
        value={val.h}
        onChange={(val) => triggerChange({ h: val })}
        tipFormatter={(val) => <span>水平阴影的位置&nbsp;&nbsp;{val}%</span>}
      />
      <Slider
        marks={marks}
        range={false}
        defaultValue={0}
        min={-100}
        max={100}
        value={val.v}
        onChange={(val) => triggerChange({ v: val })}
        tipFormatter={(val) => <span>垂直阴影的位置&nbsp;&nbsp;{val}%</span>}
      />
      <Slider
        tipFormatter={(val) => <span>模糊的距离&nbsp;&nbsp;{val}%</span>}
        value={val.bs}
        onChange={(val) => triggerChange({ bs: val })}
        marks={{
          0: '0',
          100: '100',
        }}
      />
      <Slider
        tipFormatter={(val) => <span>阴影的大小&nbsp;&nbsp;{val}%</span>}
        value={val.ss}
        onChange={(val) => triggerChange({ ss: val })}
        marks={{
          0: '0',
          100: '100',
        }}
      />
    </>
  );
})

export default function GraphStyles() {
  const namePrefix = ['custom'];

  return (
    <Panel header='图表样式'>
      <>
        <Form.Item label='绘制模式' name={[...namePrefix, 'drawStyle']}>
          <Radio.Group buttonStyle='solid'>
            <Radio.Button value='lines'>lines</Radio.Button>
            <Radio.Button value='bars'>bars</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item noStyle shouldUpdate={(prevValues, curValues) => _.get(prevValues, [...namePrefix, 'drawStyle']) !== _.get(curValues, [...namePrefix, 'drawStyle'])}>
          {({ getFieldValue }) => {
            const drawStyle = getFieldValue([...namePrefix, 'drawStyle']);
            if (drawStyle === 'lines' || drawStyle === 'bars') {
              return (
                <>
                  {drawStyle === 'lines' ? (
                    <Form.Item label='线插值' name={[...namePrefix, 'lineInterpolation']}>
                      <Radio.Group buttonStyle='solid'>
                        <Radio.Button value='linear'>linear</Radio.Button>
                        <Radio.Button value='smooth'>smooth</Radio.Button>
                      </Radio.Group>
                    </Form.Item>
                  ) : null}
                  <Form.Item label='透明度' name={[...namePrefix, 'fillOpacity']}>
                    <Slider min={0} max={1} step={0.01} />
                  </Form.Item>
                </>
              );
            }
            return null;
          }}
        </Form.Item>
        <Form.Item label='堆叠' name={[...namePrefix, 'stack']}>
          <Radio.Group buttonStyle='solid'>
            <Radio.Button value='noraml'>开启</Radio.Button>
            <Radio.Button value='off'>关闭</Radio.Button>
          </Radio.Group>
        </Form.Item>
      </>
    </Panel>
  );
}

PaintControls: React.FC<Props> = ({ settings, onSettingsChange }) => {
  const [pickerVisible, setPickerVisible] = React.useState(false);

  const sizeRatio = settings.bushSize / 10;
  return (
    <Horizontal verticalAlign="center" spacing={20}>
      <Slider
        style={{ width: "100%" }}
        value={settings.bushSize}
        min={1}
        max={10}
        onChange={(v: any) => onSettingsChange({ ...settings, bushSize: Array.isArray(v) ? 0 : v })}
      />
      <Vertical
        style={{
          width: 40,
          height: 40,
          position: "relative",
        }}
        horizontalAlign="center"
        verticalAlign="center"
        onClick={() => setPickerVisible(true)}
      >
        <div
          style={{
            width: 40 * sizeRatio,
            height: 40 * sizeRatio,
            borderRadius: "0.5em",

            backgroundColor: `rgb(${settings.brushColor.r}, ${settings.brushColor.g}, ${settings.brushColor.b})`,
          }}
        ></div>
        {pickerVisible && (
          <Vertical
            style={{
              position: "absolute",
              top: -0,
              right: -0,
              zIndex: 10000,
              padding: 20,
              background: "white",
              borderRadius: 6,
            }}
          >
            <div
              style={{
                position: "fixed",
                top: "0px",
                right: "0px",
                bottom: "0px",
                left: "0px",
              }}
              onClick={e => {
                setPickerVisible(false);
                e.stopPropagation();
                e.preventDefault();
                return false;
              }}
            ></div>

            <HuePicker
              color={settings.brushColor}
              onChange={color => onSettingsChange({ ...settings, brushColor: color.rgb })}
            />
          </Vertical>
        )}
      </Vertical>
    </Horizontal>
  );
}

RoyaltiesSplitter = (props: {
  creators: Array<UserValue>;
  royalties: Array<Royalty>;
  setRoyalties: Function;
  isShowErrors?: boolean;
}) => {
  return (
    <Col>
      <Row gutter={[0, 24]}>
        {props.creators.map((creator, idx) => {
          const royalty = props.royalties.find(
            royalty => royalty.creatorKey === creator.key,
          );
          if (!royalty) return null;

          const amt = royalty.amount;

          const handleChangeShare = (newAmt: number) => {
            props.setRoyalties(
              props.royalties.map(_royalty => {
                return {
                  ..._royalty,
                  amount:
                    _royalty.creatorKey === royalty.creatorKey
                      ? newAmt
                      : _royalty.amount,
                };
              }),
            );
          };

          return (
            <Col span={24} key={idx}>
              <Row
                align="middle"
                gutter={[0, 16]}
                style={{ margin: '5px auto' }}
              >
                <Col span={4} style={{ padding: 10 }}>
                  {creator.label}
                </Col>
                <Col span={3}>
                  <InputNumber<number>
                    min={0}
                    max={100}
                    formatter={value => `${value}%`}
                    value={amt}
                    parser={value => parseInt(value?.replace('%', '') ?? '0')}
                    onChange={handleChangeShare}
                    className="royalties-input"
                  />
                </Col>
                <Col span={4} style={{ paddingLeft: 12 }}>
                  <Slider value={amt} onChange={handleChangeShare} />
                </Col>
                {props.isShowErrors && amt === 0 && (
                  <Col style={{ paddingLeft: 12 }}>
                    <Text type="danger">
                      The split percentage for this creator cannot be 0%.
                    </Text>
                  </Col>
                )}
              </Row>
            </Col>
          );
        })}
      </Row>
    </Col>
  );
}

TextShadow: FC<FormProps<valueType>> = memo(({ value, onChange }) => {
  const [val, setVal] = useSetState<valueType>({
    h: 0,
    v: 0,
    s: 0,
    c: undefined,
  });
  const marks = {
    '-100': '-100',
    0: '0',
    100: '100',
  };

  const triggerChange = (changedValue: Partial<valueType>) => {
    onChange && onChange({ ...value, ...val, ...changedValue });
  };
  useEffect(() => {
    if (value) {
      setVal(value);
    }
  }, [value]);

  return (
    <>
      <Input
        type={'color'}
        title="阴影的颜色"
        value={val.c}
        onChange={(val) => triggerChange({ c: val.target.value })}
      ></Input>
      <Slider
        marks={marks}
        range={false}
        defaultValue={0}
        min={-100}
        max={100}
        value={val.h}
        onChange={(val) => triggerChange({ h: val })}
        tipFormatter={(val) => <span>水平阴影的位置&nbsp;&nbsp;{val}%</span>}
      />
      <Slider
        marks={marks}
        range={false}
        defaultValue={0}
        min={-100}
        max={100}
        value={val.v}
        onChange={(val) => triggerChange({ v: val })}
        tipFormatter={(val) => <span>垂直阴影的位置&nbsp;&nbsp;{val}%</span>}
      />
      <Slider
        tipFormatter={(val) => <span>模糊的距离&nbsp;&nbsp;{val}%</span>}
        value={val.s}
        onChange={(val) => triggerChange({ s: val })}
        marks={{
          0: '0',
          100: '100',
        }}
      />
    </>
  );
})

export function GeneralSlide(props: GeneralSlideProps): React.ReactElement {
  const {
    value,
    disabled,
    dots,
    max,
    min,
    range,
    marks,
    step,
    included,
    onlyShowMode,
    size,
    uiType,
    tooltipVisible,
    tipFormatter,
  } = props;

  return (
    <div className={uiType === "dashboard" ? style.dashboardSlider : ""}>
      <FormItemWrapper {...omit(props, ["min", "max"])}>
        <Slider
          className={classNames({
            [style.onlyShowMode]: onlyShowMode,
            [style.bigMode]: size === "large",
          })}
          value={props.name && props.formElement ? undefined : value}
          disabled={disabled || onlyShowMode}
          dots={dots}
          max={max}
          min={min}
          range={range}
          marks={marks}
          step={step}
          included={included}
          onChange={props.onChange}
          onAfterChange={props.onAfterChange}
          tipFormatter={tipFormatter}
          tooltipVisible={tooltipVisible}
        />
      </FormItemWrapper>
    </div>
  );
}

BorderRadius: FC<FormProps<valueType>> = memo(function BorderRadius({ value, onChange }) {
  const [positipon, setPosition] = useSetState({
    lt: 0,
    lb: 0,
    rt: 0,
    rb: 0,
  });
  const triggerChange = (changedValue: Partial<valueType>) => {
    onChange && onChange({ ...value, ...positipon, ...changedValue });
  };
  useEffect(() => {
    if (value) {
      setPosition(value);
    }
  }, [value]);
  return (
    <>
      <Slider
        tipFormatter={(val) => <span>左上角&nbsp;&nbsp;{val}%</span>}
        value={positipon.lt}
        onChange={(val) => triggerChange({ lt: val })}
      />
      <Slider
        tipFormatter={(val) => <span>左下角&nbsp;&nbsp;{val}%</span>}
        value={positipon.lb}
        onChange={(val) => triggerChange({ lb: val })}
      />
      <Slider
        tipFormatter={(val) => <span>右上角&nbsp;&nbsp;{val}%</span>}
        value={positipon.rt}
        onChange={(val) => triggerChange({ rt: val })}
      />
      <Slider
        tipFormatter={(val) => <span>右下角&nbsp;&nbsp;{val}%</span>}
        value={positipon.rb}
        onChange={(val) => triggerChange({ rb: val })}
      />
    </>
  );
})

ZoomControl: React.FC<ZoomControlProps> = props => {
  const { sliderValue, scale, zoomIn, zoomOut, sliderChange } = props;
  const percentage = useMemo(() => {
    if (!scale) {
      return '';
    }
    if (scale[0] === scale[1]) {
      return `${Math.floor(scale[0] * 100)}%`;
    }
    return scale.map((s: number) => `${Math.floor(s * 100)}%`).join('/');
  }, [scale]);
  return (
    <Wrapper>
      <div className="bottom-box">
        <Space>
          <Tooltip title="缩小视图">
            <Button
              size="small"
              type="text"
              onClick={zoomIn}
              icon={<MinusSquareOutlined />}
            ></Button>
          </Tooltip>

          <Slider
            className="bottom-slider"
            onChange={sliderChange}
            value={sliderValue}
          />
          <Tooltip title="放大视图">
            <Button
              size="small"
              type="text"
              onClick={zoomOut}
              icon={<PlusSquareOutlined />}
            ></Button>
          </Tooltip>

          <label className="value-label">{percentage}</label>
        </Space>
      </div>
    </Wrapper>
  );
}

FormRender: FC<FormRenderType> = memo(
  function FormRender({ editType, onSave, showEditPropsData, id }) {
    const [form] = Form.useForm();
    useEffect(() => {
      form.setFieldsValue(showEditPropsData);
      return () => {
        form.resetFields();
      };
    }, [form, id]);

    const onFinish = (values: Store) => {
      onSave && onSave(values);
    };

    const handlechange = () => {
      onFinish(form.getFieldsValue());
    };

    const colFun = (col: number | undefined) => (col ? col : 24);

    return (
      <Form form={form} name={`form_editor`} onFinish={onFinish} onValuesChange={handlechange}>
        <Row gutter={[30, 0]}>
          {editType.map((item, index) => {
            return (
              <React.Fragment key={item.key}>
                {item.type === 'Number' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer border={item.border || false} title={item.title}>
                      <Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
                        <InputNumber style={{ width: item.width }} min={0} />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Background' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
                        <BackGround />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Switch' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item
                        style={{ margin: '0' }}
                        label={item.name}
                        name={item.key}
                        valuePropName="checked"
                        labelAlign="left"
                        labelCol={{ span: 19 }}
                      >
                        <Switch />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Image' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item label={null} name={item.key} style={{ margin: '0' }}>
                        <ImgComponent />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Input' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer border={true} title={item.title}>
                      <Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
                        <Input />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'RichText' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer
                      border={false}
                      title={item.title}
                      containerStyle={{ padding: '0' }}
                    >
                      <Form.Item label={null} name={item.key} style={{ margin: '0' }}>
                        <WangEditor />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Radio' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer border={true} title={item.title}>
                      <Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
                        <Radio.Group>
                          {item.options!.map((items, index) => (
                            <Radio value={items.value} key={index}>
                              {items.label}
                            </Radio>
                          ))}
                        </Radio.Group>
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Select' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer border={true} title={item.title}>
                      <Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
                        <Selects data={item.options!} valKey={'value'} valName={'label'} />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'TextArea' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer
                      border={false}
                      title={item.title}
                      containerStyle={{ padding: '0' }}
                    >
                      <Form.Item label={null} name={item.key} style={{ margin: '0' }}>
                        <TextArea autoSize={{ minRows: 2 }} showCount />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Color' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
                        <Input type={'color'} />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Border' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
                        <Border />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Slider' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item
                        label={item.name}
                        name={item.key}
                        style={{ margin: '0' }}
                        initialValue={100}
                      >
                        <Slider tipFormatter={(val) => val + '%'} />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'FontStyle' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item label={null} name={item.key} style={{ margin: '0' }}>
                        <FontStyle />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'Padding' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item
                        label={item.name}
                        name={item.key}
                        style={{ margin: '0', display: 'flex', alignItems: 'center' }}
                      >
                        <Padding />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}

                {item.type === 'BorderRadius' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item
                        label={
                          <div>
                            <span> {item.name}</span>
                            <Tooltip title="只有在背景，边框等样式下有效果">
                              <ExclamationCircleOutlined
                                style={{ color: '#9da3ac', paddingLeft: '3px', fontSize: '17px' }}
                              />
                            </Tooltip>
                          </div>
                        }
                        name={item.key}
                        style={{ margin: '0', display: 'flex', alignItems: 'center' }}
                      >
                        <BorderRadius />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}

                {item.type === 'TextShadow' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item
                        label={item.name}
                        name={item.key}
                        style={{ margin: '0', display: 'flex', alignItems: 'center' }}
                      >
                        <TextShadow />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}

                {item.type === 'BoxShadow' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item
                        label={
                          <div>
                            <span> {item.name}</span>
                            <Tooltip title="只有在背景下有效果">
                              <ExclamationCircleOutlined
                                style={{ color: '#9da3ac', paddingLeft: '3px', fontSize: '17px' }}
                              />
                            </Tooltip>
                          </div>
                        }
                        name={item.key}
                        style={{ margin: '0', display: 'flex', alignItems: 'center' }}
                      >
                        <BoxShadow />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'OlUl' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item style={{ margin: '0' }}>
                        <OlUl
                          keyName={item.key}
                          form={form}
                          showEditPropsData={showEditPropsData}
                        />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
                {item.type === 'TaskList' && (
                  <Col span={colFun(item.col)}>
                    <AttrContainer title={item.title}>
                      <Form.Item style={{ margin: '0' }}>
                        <TaskList keyName={item.key} />
                      </Form.Item>
                    </AttrContainer>
                  </Col>
                )}
              </React.Fragment>
            );
          })}
        </Row>
      </Form>
    );
  },
  (prevProps, nextProps) => {
    if (prevProps.id !== nextProps.id) {
      // 防止多次出发组件
      return false;
    } else {
      return true;
    }
  },
)

DormantFunds: React.FC<Props> = ({ data }) => {
  const { t } = useTranslation();
  const [marks, setMarks] = React.useState({});
  const [totalFunds, setTotalFunds] = React.useState<number>(0);
  const [unknownDormantFunds, setUnknownDormantFunds] = React.useState<number>(
    0,
  );
  const {
    frontierCount: { count: frontierCount },
  } = useFrontierCount();
  const { availableSupply } = useAvailableSupply();
  const isMediumAndLower = !useMediaQuery("(min-width: 768px)");

  React.useEffect(() => {
    if (!data || !availableSupply) return;
    let totalFunds: number = 0;
    dormantFundsByRange = {};

    Object.entries(data).forEach(([year, months]: [string, any]) => {
      months.forEach((total: number, i: number) => {
        if (!total) return;
        const key = `Q${Math.ceil(i / 4 + 1)} ${year}`;

        totalFunds = new BigNumber(totalFunds).plus(total).toNumber();
        dormantFundsByRange[key] = {
          total: new BigNumber(dormantFundsByRange[key]?.total || 0)
            .plus(total)
            .toNumber(),
        };
      });
    });

    let totalDormant: number = 0;
    const dormantFundsByRangeKeys = Object.keys(dormantFundsByRange);
    const marks = dormantFundsByRangeKeys.reduce(
      (acc: any = {}, key: string, i: number) => {
        const percent = Math.ceil(
          (100 / (dormantFundsByRangeKeys.length - 1)) * i,
        );

        dormantFundsByRange[key].percent = percent;
        totalDormant =
          i === 0
            ? 0
            : new BigNumber(totalDormant)
                .plus(dormantFundsByRange[key].total)
                .toNumber();
        dormantFundsByRange[key].totalDormant = totalDormant;

        acc[percent] = key;

        return acc;
      },
      {},
    );

    setMarks(marks);
    setTotalFunds(totalFunds);
    setUnknownDormantFunds(
      new BigNumber(availableSupply).minus(totalFunds).toNumber(),
    );
  }, [data, availableSupply]);

  return (
    <>
      <Title level={3}>{t("pages.distribution.dormantFunds")}</Title>
      <Card size="small">
        <div style={{ marginBottom: "12px" }}>
          <Text style={{ fontSize: "12px" }}>
            {t("pages.distribution.dormantFundsExperiment", {
              totalAccounts: new BigNumber(frontierCount).toFormat(),
            })}
          </Text>
          <br />
          <Text style={{ fontSize: "12px" }}>
            <ul style={{ margin: "12px 0" }}>
              <li>
                {t("pages.distribution.availableSupply")}:{" "}
                <strong>Ӿ {new BigNumber(availableSupply).toFormat()}</strong>
              </li>
              <li>
                {t("pages.distribution.knownAccountBalances")}:{" "}
                <strong>Ӿ {new BigNumber(totalFunds).toFormat()}</strong>
              </li>
              <li>
                {t("pages.distribution.unknownDormantFunds")}:{" "}
                <strong>
                  Ӿ {new BigNumber(unknownDormantFunds).toFormat()}
                </strong>
              </li>
            </ul>
          </Text>
          <Text style={{ fontSize: "12px" }}>
            {t("pages.distribution.dormantFundsQuarterExample")}
          </Text>
        </div>

        <div
          style={{
            margin: `${
              isMediumAndLower ? "48px 20px 48px auto" : "72px auto 0"
            }`,
            width: isMediumAndLower ? "20%" : "90%",
            height: isMediumAndLower ? "300px" : "auto",
          }}
        >
          <Slider
            marks={marks}
            step={null}
            vertical={isMediumAndLower}
            reverse={isMediumAndLower}
            tooltipVisible
            defaultValue={0}
            tooltipPlacement={isMediumAndLower ? "left" : "top"}
            tipFormatter={key => {
              const totalDormant = new BigNumber(
                find(dormantFundsByRange, ["percent", key])?.totalDormant || 0,
              )
                .plus(unknownDormantFunds)
                .toNumber();
              const percentAvailableSupply = new BigNumber(totalDormant)
                .times(100)
                .dividedBy(availableSupply)
                .toFormat(2);

              return (
                <div style={{ fontSize: "12px" }}>
                  <div>
                    <strong>{new BigNumber(totalDormant).toFormat(5)}</strong>{" "}
                    {t("pages.distribution.dormantNano")}
                  </div>
                  <div>
                    <strong>{percentAvailableSupply}%</strong>{" "}
                    {t("pages.distribution.ofAvailableSupply")}
                  </div>
                </div>
              );
            }}
          />
        </div>
      </Card>
    </>
  );
}

FilterTransactionsRangePreferences: React.FC<Props> = ({
  isDetailed,
}) => {
  const { t } = useTranslation();
  const {
    filterTransactions,
    setFilterTransactions,
    filterTransactionsRange,
    setFilterTransactionsRange,
  } = React.useContext(PreferencesContext);
  const isMediumAndLower = !useMediaQuery("(min-width: 768px)");

  const marks = React.useCallback(() => {
    return units.reduce((acc, { unit, raw }, index) => {
      if (raw === 1e30) {
        acc[index] = {
          label: (
            <>
              <strong>{unit}</strong>
              <Tooltip
                placement="top"
                title={<Trans i18nKey="tooltips.mnano" />}
              >
                <QuestionCircle />
              </Tooltip>
            </>
          ),
        };
      } else if (raw === Infinity) {
        acc[index] = {
          label: <Trans i18nKey="pages.preferences.noLimit" />,
        };
      } else {
        if (!isMediumAndLower || raw === 1) {
          acc[index] = unit;
        }
      }

      return acc;
    }, {} as { [key: number]: any });
  }, [isMediumAndLower]);

  return (
    <Row>
      <Col xs={24}>
        <Text className={isDetailed ? "preference-detailed-title" : ""}>
          {t("pages.preferences.filterTransactionsRange")}
        </Text>
      </Col>

      <Col xs={18}>
        <Text>{t("pages.preferences.filterTransactionsRangeDetailed")}</Text>
      </Col>

      <Col xs={6} style={{ textAlign: "right" }}>
        <Switch
          checkedChildren={<CheckOutlined />}
          unCheckedChildren={<CloseOutlined />}
          onChange={(checked: boolean) => {
            setFilterTransactions(checked);
          }}
          checked={filterTransactions}
        />
      </Col>
      <Col xs={22} push={1}>
        <Slider
          style={{ marginTop: "18px" }}
          disabled={!filterTransactions}
          dots
          reverse
          marks={marks()}
          min={0}
          max={units.length - 1}
          step={1}
          range
          tipFormatter={value => {
            const { display } = units[value || 0];

            return display || t("pages.preferences.noLimit");
          }}
          defaultValue={[
            units.findIndex(({ raw }) => filterTransactionsRange[0] === raw),
            units.findIndex(({ raw }) => filterTransactionsRange[1] === raw),
          ]}
          onAfterChange={value => {
            setFilterTransactionsRange([
              units[value[0]].raw,
              units[value[1]].raw,
            ]);
          }}
        />
      </Col>
    </Row>
  );
}

install = (registerField: (fieldType: string, field: RegisterFieldProps) => void) => {
  // 注册输入框
  registerField(FORM_TYPE_INPUT, {
    type: FORM_TYPE_INPUT,
    defaultValue: FORM_DEFAULT_VALUE_INPUT,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
      return readonly ? (
        <span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
      ) : (
        <Input
          placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
          disabled={readonly}
          maxLength={INPUT_DEFAULT_MAXLENGTH}
          allowClear={FORM_DEFAULT_ALLOW_CLEAR}
          {...omitObj(field.props, 'readonly')}
        />
      )
    }
  })

  // 注册搜索框
  registerField(FORM_TYPE_SEARCH, {
    type: FORM_TYPE_SEARCH,
    defaultValue: FORM_DEFAULT_VALUE_SEARCH,
    render: ({ field, readonly, getFieldValue, formInstans }: AnyKeyProps) => {
      return readonly ? (
        <span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
      ) : (
        <Input.Search
          placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
          disabled={readonly}
          onPressEnter={e => {
            e.preventDefault()
            formInstans.submit()
          }}
          onSearch={() => formInstans.submit()}
          maxLength={INPUT_DEFAULT_MAXLENGTH}
          allowClear={FORM_DEFAULT_ALLOW_CLEAR}
          enterButton
          {...field.props}
        />
      )
    }
  })

  // 注册数字框
  registerField(FORM_TYPE_NUMBER, {
    type: FORM_TYPE_NUMBER,
    defaultValue: FORM_DEFAULT_VALUE_NUMBER,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
      readonly ? (
        <span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
      ) : (
        <InputNumber
          className="max-width"
          disabled={readonly}
          min={NUMBER_DEFAULT_MIN}
          max={NUMBER_DEFAULT_MAX}
          {...field.props}
        />
      )
  })

  // 注册百分比数字框
  registerField(FORM_TYPE_PERCENT, {
    type: FORM_TYPE_PERCENT,
    defaultValue: FORM_DEFAULT_VALUE_PERCENT,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
      readonly ? (
        <span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}%</span>
      ) : (
        <InputNumber
          className="max-width"
          disabled={readonly}
          min={NUMBER_DEFAULT_MIN}
          max={PERCENT_DEFAULT_MAX}
          formatter={(value?: string | number) => (value !== '' ? `${value}%` : '')}
          parser={(value?: string) => (value || '').replace('%', '')}
          {...field.props}
        />
      )
  })

  // 注册密码框
  registerField(FORM_TYPE_PASSWORD, {
    type: FORM_TYPE_PASSWORD,
    defaultValue: FORM_DEFAULT_VALUE_PASSWORD,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
      readonly ? (
        <span className="ay-form-text">
          {(getFieldValue(field.key) + '').replace(/./g, '*') || FORM_READONLY_EMPTY}
        </span>
      ) : (
        <Input.Password
          placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
          disabled={readonly}
          allowClear={FORM_DEFAULT_ALLOW_CLEAR}
          {...field.props}
        />
      )
  })

  // 注册多行文本框
  registerField(FORM_TYPE_TEXTAREA, {
    type: FORM_TYPE_TEXTAREA,
    defaultValue: FORM_DEFAULT_VALUE_TEXTAREA,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
      readonly ? (
        <span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
      ) : (
        <Input.TextArea
          placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
          disabled={readonly}
          allowClear={FORM_DEFAULT_ALLOW_CLEAR}
          maxLength={TEXTAREA_DEFAULT_MAXLENGTH}
          {...field.props}
        />
      )
  })

  // 注册选择框
  registerField(FORM_TYPE_SELECT, {
    type: FORM_TYPE_SELECT,
    defaultValue: FORM_DEFAULT_VALUE_SELECT,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
      if (readonly) {
        let value = getFieldValue(field.key)
        let text = ''
        if (Array.isArray(value)) {
          if (!value.length) {
            text = FORM_READONLY_EMPTY
          }
          text = value.map(item => getValueByOptions(item, field.options)).join(field.splitText || '、')
        } else {
          text = getValueByOptions(value, field.options)
        }
        return <span className="ay-form-text">{text || FORM_READONLY_EMPTY}</span>
      }

      return (
        <AySelect
          placeholder={`${locale.form.pleaseSelect}${field.title || ''}${locale.form.pleaseSelectAfter}`}
          disabled={readonly}
          allowClear={FORM_DEFAULT_ALLOW_CLEAR}
          options={field.options}
          {...field.props}
        />
      )
    }
  })

  // 注册开关
  registerField(FORM_TYPE_SWITCH, {
    type: FORM_TYPE_SWITCH,
    defaultValue: FORM_DEFAULT_VALUE_SWITCH,
    valuePropName: 'checked',
    render: ({ field, readonly }: AnyKeyProps) => <Switch disabled={readonly} {...field.props} />
  })

  // 注册单个选择框
  registerField(FORM_TYPE_CHECKBOX, {
    type: FORM_TYPE_CHECKBOX,
    defaultValue: FORM_DEFAULT_VALUE_CHECKBOX,
    valuePropName: 'checked',
    render: ({ field, readonly }: AnyKeyProps) => <Checkbox disabled={readonly} {...field.props} />
  })

  // 注册多个选择框
  registerField(FORM_TYPE_CHECKBOX_GROUP, {
    type: FORM_TYPE_CHECKBOX_GROUP,
    defaultValue: FORM_DEFAULT_VALUE_CHECKBOX_GROUP,
    render: ({ field, readonly }: AnyKeyProps) => (
      <Checkbox.Group disabled={readonly} options={field.options} {...field.props} />
    )
  })

  // 注册多个单选框
  registerField(FORM_TYPE_RADIO_GROUP, {
    type: FORM_TYPE_RADIO_GROUP,
    defaultValue: FORM_DEFAULT_VALUE_RADIO_GROUP,
    render: ({ field, readonly }: AnyKeyProps) => (
      <Radio.Group disabled={readonly} options={field.options} {...field.props} />
    )
  })

  // 注册日期
  registerField(FORM_TYPE_DATE, {
    type: FORM_TYPE_DATE,
    defaultValue: FORM_DEFAULT_VALUE_DATE,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
      let text = getFieldValue(field.key, readonly)
      if (typeof text !== 'string') {
        text = ''
      }
      return readonly ? (
        <span className="ay-form-text">{text || FORM_READONLY_EMPTY}</span>
      ) : (
        <DatePicker
          className="max-width"
          placeholder={`${locale.form.pleaseSelect}${field.title || ''}${locale.form.pleaseSelectAfter}`}
          {...field.props}
        />
      )
    }
  })

  // 注册区间日期
  registerField(FORM_TYPE_DATE_RANGE, {
    type: FORM_TYPE_DATE_RANGE,
    defaultValue: FORM_DEFAULT_VALUE_DATE_RANGE,
    render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
      let text = getFieldValue(field.key, readonly)
      if (Array.isArray(text)) {
        if (text[0] === null) {
          text = null
        } else if (text) {
          text = [
            <span key="start" style={{ display: 'inline-block' }}>
              {(text[0] || '').toString()}
            </span>,
            <span key="divider" style={{ margin: '0 0.5em' }}>
              {locale.form.dateTo}
            </span>,
            <span key="end" style={{ display: 'inline-block' }}>
              {(text[1] || '').toString()}
            </span>
          ]
        }
      }
      return readonly ? (
        <span className="ay-form-text">{text || FORM_READONLY_EMPTY}</span>
      ) : (
        <DatePicker.RangePicker
          placeholder={[locale.form.startDate, locale.form.endDate]}
          className="max-width"
          {...field.props}
        />
      )
    }
  })

  // 注册空节点
  registerField(FORM_TYPE_EMPTY, {
    type: FORM_TYPE_EMPTY,
    defaultValue: FORM_DEFAULT_VALUE_EMPTY,
    render: () => <input hidden type="text" />
  })

  // 注册评分
  registerField(FORM_TYPE_RATE, {
    type: FORM_TYPE_RATE,
    defaultValue: FORM_DEFAULT_VALUE_RATE,
    render: ({ field, readonly }: AnyKeyProps) => <Rate disabled={readonly} {...field.props} />
  })

  // 滑动输入条
  registerField(FORM_TYPE_SLIDER, {
    type: FORM_TYPE_SLIDER,
    defaultValue: FORM_DEFAULT_VALUE_SLIDER,
    render: ({ field, readonly }: AnyKeyProps) => <Slider disabled={readonly} {...field.props} />
  })

  // 标签选择
  registerField(FORM_TYPE_TAG_GROUP, {
    type: FORM_TYPE_TAG_GROUP,
    defaultValue: FORM_DEFAULT_VALUE_TAG_GROUP,
    render: ({ field, readonly }: AnyKeyProps) => (
      <AyTagGroup readonly={readonly} options={field.options} {...field.props} />
    )
  })

  // 卡片选择
  registerField(FORM_TYPE_CARD_GROUP, {
    type: FORM_TYPE_CARD_GROUP,
    defaultValue: FORM_DEFAULT_VALUE_CARD_GROUP,
    render: ({ field, readonly }: AnyKeyProps) => (
      <AyCardGroup readonly={readonly} options={field.options} {...field.props} />
    )
  })

  // 注册 html
  registerField(FORM_TYPE_HTML, {
    type: FORM_TYPE_HTML,
    defaultValue: FORM_DEFAULT_VALUE_HTML,
    render: ({ field }: AnyKeyProps) => <div dangerouslySetInnerHTML={{ __html: field.html }}></div>
  })
}

builder: FieldInputBuilderType = ({
  parseUrlValue,
  parseValue,
}) => function SliderInput ({
  field,
  urlValue,
  focus,
}) {
  const [min, setMin] = useState<number>()
  const [max, setMax] = useState<number>()
  const [step, setStep] = useState<number>()
  const [loading, setLoading] = useState(true)

  const { t } = useTranslation()

  useEffect(() => {
    field.options.forEach((option) => {
      if (option.key === 'min') {
        try {
          setMin(JSON.parse(option.value))
        } catch (e) {
          logger('invalid min value %O', e)
        }
      }
      if (option.key === 'max') {
        try {
          setMax(JSON.parse(option.value))
        } catch (e) {
          logger('invalid max value %O', e)
        }
      }
      if (option.key === 'step') {
        try {
          setStep(JSON.parse(option.value))
        } catch (e) {
          logger('invalid step value %O', e)
        }
      }
    })

    setLoading(false)
  }, [field])

  let initialValue: number = undefined

  if (field.defaultValue) {
    try {
      initialValue = parseValue(field.defaultValue)
    } catch (e) {
      logger('invalid default value %O', e)
    }
  }

  if (urlValue) {
    initialValue = parseUrlValue(urlValue)
  }

  if (loading) {
    return (
      <div>
        <Spin />
      </div>
    )
  }

  return (
    <div>
      <Form.Item
        name={[field.id]}
        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
        initialValue={initialValue}
      >
        <Slider
          autoFocus={focus}
          min={min}
          max={max}
          step={step}
          tooltipVisible={true}
          dots={(max - min) / step <= 10}
        />
      </Form.Item>
    </div>
  )
}

SliderAdmin: React.FC<FieldAdminProps> = (props) => {
  const { t } = useTranslation()

  return (
    <div>
      <Form.Item shouldUpdate noStyle>
        {(form) => {
          //const prefix = React.useContext(FormItemContext).prefixName
          const prefix = (form as any).prefixName

          const getValue = (name, defaultValue: number): number => {
            const current: unknown = form.getFieldValue([
              ...prefix,
              props.field.name as string,
              'optionKeys',
              name,
            ])

            if (!current) {
              return defaultValue
            }

            return parseFloat(current as string)
          }

          const max = getValue('max', 100)
          const min = getValue('min', 0)
          const step = getValue('step', 1)

          return (
            <Form.Item
              label={t('type:slider.default')}
              name={[props.field.name as string, 'defaultValue']}
              labelCol={{ span: 6 }}
              getValueProps={(value: string) => ({ value: value ? parseFloat(value) : undefined })}
            >
              <Slider min={min} max={max} step={step} dots={(max - min) / step <= 10} />
            </Form.Item>
          )
        }}
      </Form.Item>

      <Form.Item
        label={t('type:slider.min')}
        name={[
          props.field.name as string,
          'optionKeys',
          'min',
        ]}
        labelCol={{ span: 6 }}
        initialValue={0}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item
        label={t('type:slider.max')}
        name={[
          props.field.name as string,
          'optionKeys',
          'max',
        ]}
        labelCol={{ span: 6 }}
        initialValue={100}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item
        label={t('type:slider.step')}
        name={[
          props.field.name as string,
          'optionKeys',
          'step',
        ]}
        labelCol={{ span: 6 }}
        initialValue={1}
      >
        <InputNumber />
      </Form.Item>
    </div>
  )
}

palette = () => (
  <Palette>
    <Category name="Text">
      <Component name="Formatted Message">
        <Variant>
          <FormattedMessage />
        </Variant>
      </Component>
      <Component name="Heading">
        <Variant name="h1">
          <Typography.Title></Typography.Title>
        </Variant>
        <Variant name="h2">
          <Typography.Title level={2}></Typography.Title>
        </Variant>
        <Variant name="h3">
          <Typography.Title level={3}></Typography.Title>
        </Variant>
        <Variant name="h4">
          <Typography.Title level={4}></Typography.Title>
        </Variant>
        <Variant name="h5">
          <Typography.Title level={5}></Typography.Title>
        </Variant>
      </Component>
      <Component name="Text">
        <Variant>
          <Typography.Text></Typography.Text>
        </Variant>
        <Variant name="Secondary">
          <Typography.Text type="secondary"></Typography.Text>
        </Variant>
        <Variant name="Success">
          <Typography.Text type="success"></Typography.Text>
        </Variant>
        <Variant name="Warning">
          <Typography.Text type="warning"></Typography.Text>
        </Variant>
        <Variant name="Danger">
          <Typography.Text type="danger"></Typography.Text>
        </Variant>
        <Variant name="Disabled">
          <Typography.Text disabled></Typography.Text>
        </Variant>
      </Component>
    </Category>
    <Category name="Layout">
      <Component name="Divider">
        <Variant>
          <Divider />
        </Variant>
      </Component>

      <Component name="Grid">
        <Variant name="Simple Row">
          <Row></Row>
        </Variant>
        <Variant name="Two columns">
          <Row>
            <Col span={12}></Col>
            <Col span={12}></Col>
          </Row>
        </Variant>
        <Variant name="Three columns">
          <Row>
            <Col span={8}></Col>
            <Col span={8}></Col>
            <Col span={8}></Col>
          </Row>
        </Variant>
      </Component>

      <Component name="Space">
        <Variant>
          <Space />
        </Variant>
        <Variant name="Small">
          <Space size={"small"} />
        </Variant>
        <Variant name="Large">
          <Space size={"large"} />
        </Variant>
      </Component>
    </Category>
    <Category name="Controls">
      <Component name="Autocomplete">
        <Variant>
          <AutoComplete placeholder="input here" />
        </Variant>
      </Component>

      <Component name="Button">
        <Variant>
          <Button></Button>
        </Variant>
        <Variant name="Primary">
          <Button type="primary"></Button>
        </Variant>
        <Variant name="Link">
          <Button type="link"></Button>
        </Variant>
        <Variant name="Dropdown">
          <Dropdown
            trigger={["click"]}
            overlay={
              <Menu>
                <Menu.Item></Menu.Item>
                <Menu.Item></Menu.Item>
                <Menu.Item></Menu.Item>
              </Menu>
            }
          >
            <Button></Button>
          </Dropdown>
        </Variant>
      </Component>

      <Component name="Checkbox">
        <Variant>
          <Checkbox />
        </Variant>
      </Component>

      <Component name="Switch">
        <Variant>
          <Switch />
        </Variant>
      </Component>

      <Component name="Radio Group">
        <Variant>
          <Radio.Group>
            <Radio value={1}>A</Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
            <Radio value={4}>D</Radio>
          </Radio.Group>
        </Variant>
        <Variant name="Button">
          <Radio.Group>
            <Radio.Button value={1}>A</Radio.Button>
            <Radio.Button value={2}>B</Radio.Button>
            <Radio.Button value={3}>C</Radio.Button>
            <Radio.Button value={4}>D</Radio.Button>
          </Radio.Group>
        </Variant>
      </Component>

      <Component name="DatePicker">
        <Variant>
          <DatePicker />
        </Variant>
        <Variant name="Range">
          <DatePicker.RangePicker />
        </Variant>
      </Component>

      <Component name="TimePicker">
        <Variant>
          <TimePicker />
        </Variant>
        <Variant name="Range">
          <TimePicker.RangePicker />
        </Variant>
      </Component>

      <Component name="Input">
        <Variant>
          <Input />
        </Variant>
        <Variant name="Number">
          <InputNumber />
        </Variant>
      </Component>

      <Component name="Select">
        <Variant>
          <Select defaultValue="1">
            <Select.Option value="1">1</Select.Option>
            <Select.Option value="2">2</Select.Option>
          </Select>
        </Variant>
        <Variant name="Multiple">
          <Select defaultValue={["1"]} mode="multiple" allowClear>
            <Select.Option value="1">1</Select.Option>
            <Select.Option value="2">2</Select.Option>
          </Select>
        </Variant>
      </Component>

      <Component name="Link">
        <Variant>
          <Typography.Link href="" target="_blank"></Typography.Link>
        </Variant>
      </Component>

      <Component name="Slider">
        <Variant>
          <Slider defaultValue={30} />
        </Variant>
        <Variant name="Range">
          <Slider range defaultValue={[20, 50]} />
        </Variant>
      </Component>
    </Category>
    <Category name="Data Display">
      <Component name="Field">
        <Variant>
          <Field
            entityName={ENTITY_NAME}
            disabled={readOnlyMode}
            propertyName=""
            formItemProps={{
              style: { marginBottom: "12px" }
            }}
          />
        </Variant>
      </Component>
      <Component name="Card">
        <Variant>
          <Card />
        </Variant>
        <Variant name="With Title">
          <Card>
            <Card title="Card title">
              <p>Card content</p>
            </Card>
          </Card>
        </Variant>
        <Variant name="My custom card">
          <Card>
            <Card title="Card title">
              <p>Card content</p>
              <Avatar />
            </Card>
          </Card>
        </Variant>
      </Component>
      <Component name="Tabs">
        <Variant>
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="Tab 1" key="1">
              Content of Tab Pane 1
            </Tabs.TabPane>
            <Tabs.TabPane tab="Tab 2" key="2">
              Content of Tab Pane 2
            </Tabs.TabPane>
            <Tabs.TabPane tab="Tab 3" key="3">
              Content of Tab Pane 3
            </Tabs.TabPane>
          </Tabs>
        </Variant>
        <Variant name="Tab Pane">
          <Tabs.TabPane></Tabs.TabPane>
        </Variant>
      </Component>
      <Component name="Collapse">
        <Variant>
          <Collapse defaultActiveKey="1">
            <Collapse.Panel
              header="This is panel header 1"
              key="1"
            ></Collapse.Panel>
            <Collapse.Panel
              header="This is panel header 2"
              key="2"
            ></Collapse.Panel>
            <Collapse.Panel
              header="This is panel header 3"
              key="3"
            ></Collapse.Panel>
          </Collapse>
        </Variant>
      </Component>
      <Component name="Image">
        <Variant>
          <Image width={200} src="" />
        </Variant>
      </Component>
      <Component name="Avatar">
        <Variant>
          <Avatar icon={<UserOutlined />} />
        </Variant>
        <Variant name="Image">
          <Avatar src="https://joeschmoe.io/api/v1/random" />
        </Variant>
      </Component>
      <Component name="Badge">
        <Variant>
          <Badge count={1}></Badge>
        </Variant>
      </Component>
      <Component name="Statistic">
        <Variant>
          <Statistic title="Title" value={112893} />
        </Variant>
      </Component>
      <Component name="Alert">
        <Variant name="Success">
          <Alert message="Text" type="success" />
        </Variant>
        <Variant name="Info">
          <Alert message="Text" type="info" />
        </Variant>
        <Variant name="Warning">
          <Alert message="Text" type="warning" />
        </Variant>
        <Variant name="Error">
          <Alert message="Text" type="error" />
        </Variant>
      </Component>
      <Component name="List">
        <Variant>
          <List
            bordered
            dataSource={[]}
            renderItem={item => <List.Item></List.Item>}
          />
        </Variant>
      </Component>
    </Category>
    <Category name="Icons">
      <Component name="Arrow">
        <Variant name="Up">
          <ArrowUpOutlined />
        </Variant>
        <Variant name="Down">
          <ArrowDownOutlined />
        </Variant>
        <Variant name="Left">
          <ArrowLeftOutlined />
        </Variant>
        <Variant name="Right">
          <ArrowRightOutlined />
        </Variant>
      </Component>
      <Component name="Question">
        <Variant>
          <QuestionOutlined />
        </Variant>
        <Variant name="Circle">
          <QuestionCircleOutlined />
        </Variant>
      </Component>
      <Component name="Plus">
        <Variant>
          <PlusOutlined />
        </Variant>
        <Variant name="Circle">
          <PlusCircleOutlined />
        </Variant>
      </Component>
      <Component name="Info">
        <Variant>
          <InfoOutlined />
        </Variant>
        <Variant name="Circle">
          <InfoCircleOutlined />
        </Variant>
      </Component>
      <Component name="Exclamation">
        <Variant>
          <ExclamationOutlined />
        </Variant>
        <Variant name="Circle">
          <ExclamationCircleOutlined />
        </Variant>
      </Component>
      <Component name="Close">
        <Variant>
          <CloseOutlined />
        </Variant>
        <Variant name="Circle">
          <CloseCircleOutlined />
        </Variant>
      </Component>
      <Component name="Check">
        <Variant>
          <CheckOutlined />
        </Variant>
        <Variant name="Circle">
          <CheckCircleOutlined />
        </Variant>
      </Component>
      <Component name="Edit">
        <Variant>
          <EditOutlined />
        </Variant>
      </Component>
      <Component name="Copy">
        <Variant>
          <CopyOutlined />
        </Variant>
      </Component>
      <Component name="Delete">
        <Variant>
          <DeleteOutlined />
        </Variant>
      </Component>
      <Component name="Bars">
        <Variant>
          <BarsOutlined />
        </Variant>
      </Component>
      <Component name="Bell">
        <Variant>
          <BellOutlined />
        </Variant>
      </Component>
      <Component name="Clear">
        <Variant>
          <ClearOutlined />
        </Variant>
      </Component>
      <Component name="Download">
        <Variant>
          <DownloadOutlined />
        </Variant>
      </Component>
      <Component name="Upload">
        <Variant>
          <UploadOutlined />
        </Variant>
      </Component>
      <Component name="Sync">
        <Variant>
          <SyncOutlined />
        </Variant>
      </Component>
      <Component name="Save">
        <Variant>
          <SaveOutlined />
        </Variant>
      </Component>
      <Component name="Search">
        <Variant>
          <SearchOutlined />
        </Variant>
      </Component>
      <Component name="Settings">
        <Variant>
          <SettingOutlined />
        </Variant>
      </Component>
      <Component name="Paperclip">
        <Variant>
          <PaperClipOutlined />
        </Variant>
      </Component>
      <Component name="Phone">
        <Variant>
          <PhoneOutlined />
        </Variant>
      </Component>
      <Component name="Mail">
        <Variant>
          <MailOutlined />
        </Variant>
      </Component>
      <Component name="Home">
        <Variant>
          <HomeOutlined />
        </Variant>
      </Component>
      <Component name="Contacts">
        <Variant>
          <ContactsOutlined />
        </Variant>
      </Component>
      <Component name="User">
        <Variant>
          <UserOutlined />
        </Variant>
        <Variant name="Add">
          <UserAddOutlined />
        </Variant>
        <Variant name="Remove">
          <UserDeleteOutlined />
        </Variant>
      </Component>
      <Component name="Team">
        <Variant>
          <TeamOutlined />
        </Variant>
      </Component>
    </Category>
    <Category name="Screens">
      <Component name="ExampleCustomScreen">
        <Variant>
          <ExampleCustomScreen />
        </Variant>
      </Component>
      <Component name="CustomEntityFilterTest">
        <Variant>
          <CustomEntityFilterTest />
        </Variant>
      </Component>
      <Component name="CustomFormControls">
        <Variant>
          <CustomFormControls />
        </Variant>
      </Component>
      <Component name="CustomDataDisplayComponents">
        <Variant>
          <CustomDataDisplayComponents />
        </Variant>
      </Component>
      <Component name="CustomAppLayouts">
        <Variant>
          <CustomAppLayouts />
        </Variant>
      </Component>
      <Component name="CustomControls">
        <Variant>
          <CustomControls />
        </Variant>
      </Component>
      <Component name="ErrorBoundaryTests">
        <Variant>
          <ErrorBoundaryTests />
        </Variant>
      </Component>
      <Component name="TestBlankScreen">
        <Variant>
          <TestBlankScreen />
        </Variant>
      </Component>
      <Component name="CarEditor">
        <Variant>
          <CarEditor />
        </Variant>
      </Component>
      <Component name="CarBrowserCards">
        <Variant>
          <CarBrowserCards />
        </Variant>
      </Component>
      <Component name="CarBrowserList">
        <Variant>
          <CarBrowserList />
        </Variant>
      </Component>
      <Component name="CarBrowserTable">
        <Variant>
          <CarBrowserTable />
        </Variant>
      </Component>
      <Component name="CarCardsGrid">
        <Variant>
          <CarCardsGrid />
        </Variant>
      </Component>
      <Component name="FavoriteCars">
        <Variant>
          <FavoriteCars />
        </Variant>
      </Component>
      <Component name="CarCardsWithDetails">
        <Variant>
          <CarCardsWithDetails />
        </Variant>
      </Component>
      <Component name="CarTableWithFilters">
        <Variant>
          <CarTableWithFilters />
        </Variant>
      </Component>
      <Component name="CarMasterDetail">
        <Variant>
          <CarMasterDetail />
        </Variant>
      </Component>
      <Component name="FormWizardCompositionO2O">
        <Variant>
          <FormWizardCompositionO2O />
        </Variant>
      </Component>
      <Component name="FormWizardEditor">
        <Variant>
          <FormWizardEditor />
        </Variant>
      </Component>
      <Component name="FormWizardBrowserTable">
        <Variant>
          <FormWizardBrowserTable />
        </Variant>
      </Component>
      <Component name="CarMultiSelectionTable">
        <Variant>
          <CarMultiSelectionTable />
        </Variant>
      </Component>
      <Component name="DatatypesTestEditor">
        <Variant>
          <DatatypesTestEditor />
        </Variant>
      </Component>
      <Component name="DatatypesTestBrowserCards">
        <Variant>
          <DatatypesTestBrowserCards />
        </Variant>
      </Component>
      <Component name="DatatypesTestBrowserList">
        <Variant>
          <DatatypesTestBrowserList />
        </Variant>
      </Component>
      <Component name="DatatypesTestBrowserTable">
        <Variant>
          <DatatypesTestBrowserTable />
        </Variant>
      </Component>
      <Component name="DatatypesTestCards">
        <Variant>
          <DatatypesTestCards />
        </Variant>
      </Component>
      <Component name="AssociationO2OEditor">
        <Variant>
          <AssociationO2OEditor />
        </Variant>
      </Component>
      <Component name="AssociationO2OBrowserTable">
        <Variant>
          <AssociationO2OBrowserTable />
        </Variant>
      </Component>
      <Component name="AssociationO2MEditor">
        <Variant>
          <AssociationO2MEditor />
        </Variant>
      </Component>
      <Component name="AssociationO2MBrowserTable">
        <Variant>
          <AssociationO2MBrowserTable />
        </Variant>
      </Component>
      <Component name="AssociationM2OEditor">
        <Variant>
          <AssociationM2OEditor />
        </Variant>
      </Component>
      <Component name="AssociationM2OBrowserTable">
        <Variant>
          <AssociationM2OBrowserTable />
        </Variant>
      </Component>
      <Component name="AssociationM2MEditor">
        <Variant>
          <AssociationM2MEditor />
        </Variant>
      </Component>
      <Component name="AssociationM2MBrowserTable">
        <Variant>
          <AssociationM2MBrowserTable />
        </Variant>
      </Component>
      <Component name="CompositionO2OEditor">
        <Variant>
          <CompositionO2OEditor />
        </Variant>
      </Component>
      <Component name="CompositionO2OBrowserTable">
        <Variant>
          <CompositionO2OBrowserTable />
        </Variant>
      </Component>
      <Component name="CompositionO2MEditor">
        <Variant>
          <CompositionO2MEditor />
        </Variant>
      </Component>
      <Component name="CompositionO2MBrowserTable">
        <Variant>
          <CompositionO2MBrowserTable />
        </Variant>
      </Component>
      <Component name="DeeplyNestedTestEntityEditor">
        <Variant>
          <DeeplyNestedTestEntityEditor />
        </Variant>
      </Component>
      <Component name="DeeplyNestedO2MTestEntityTable">
        <Variant>
          <DeeplyNestedO2MTestEntityTable />
        </Variant>
      </Component>
      <Component name="DeeplyNestedO2MTestEntityEditor">
        <Variant>
          <DeeplyNestedO2MTestEntityEditor />
        </Variant>
      </Component>
      <Component name="IntIdEditor">
        <Variant>
          <IntIdEditor />
        </Variant>
      </Component>
      <Component name="IntIdBrowserTable">
        <Variant>
          <IntIdBrowserTable />
        </Variant>
      </Component>
      <Component name="IntIdBrowserCards">
        <Variant>
          <IntIdBrowserCards />
        </Variant>
      </Component>
      <Component name="IntIdBrowserList">
        <Variant>
          <IntIdBrowserList />
        </Variant>
      </Component>
      <Component name="IntIdentityIdCards">
        <Variant>
          <IntIdentityIdCards />
        </Variant>
      </Component>
      <Component name="IntIdentityIdEditor">
        <Variant>
          <IntIdentityIdEditor />
        </Variant>
      </Component>
      <Component name="IntIdentityIdBrowserTable">
        <Variant>
          <IntIdentityIdBrowserTable />
        </Variant>
      </Component>
      <Component name="IntIdentityIdBrowserCards">
        <Variant>
          <IntIdentityIdBrowserCards />
        </Variant>
      </Component>
      <Component name="IntIdentityIdBrowserList">
        <Variant>
          <IntIdentityIdBrowserList />
        </Variant>
      </Component>
      <Component name="StringIdCards">
        <Variant>
          <StringIdCards />
        </Variant>
      </Component>
      <Component name="StringIdMgtCardsEdit">
        <Variant>
          <StringIdMgtCardsEdit />
        </Variant>
      </Component>
      <Component name="StringIdBrowserCards">
        <Variant>
          <StringIdBrowserCards />
        </Variant>
      </Component>
      <Component name="StringIdBrowserList">
        <Variant>
          <StringIdBrowserList />
        </Variant>
      </Component>
      <Component name="StringIdBrowserTable">
        <Variant>
          <StringIdBrowserTable />
        </Variant>
      </Component>
      <Component name="WeirdStringIdEditor">
        <Variant>
          <WeirdStringIdEditor />
        </Variant>
      </Component>
      <Component name="WeirdStringIdBrowserCards">
        <Variant>
          <WeirdStringIdBrowserCards />
        </Variant>
      </Component>
      <Component name="WeirdStringIdBrowserList">
        <Variant>
          <WeirdStringIdBrowserList />
        </Variant>
      </Component>
      <Component name="WeirdStringIdBrowserTable">
        <Variant>
          <WeirdStringIdBrowserTable />
        </Variant>
      </Component>
      <Component name="BoringStringIdEditor">
        <Variant>
          <BoringStringIdEditor />
        </Variant>
      </Component>
      <Component name="BoringStringIdBrowserTable">
        <Variant>
          <BoringStringIdBrowserTable />
        </Variant>
      </Component>
      <Component name="TrickyIdEditor">
        <Variant>
          <TrickyIdEditor />
        </Variant>
      </Component>
      <Component name="TrickyIdBrowserTable">
        <Variant>
          <TrickyIdBrowserTable />
        </Variant>
      </Component>
    </Category>
  </Palette>
)

render (): React.ReactNode {
    const attributes: Array<{ name: string, value: string }> = [
      {
        name: 'Property Category',
        value: this.props.segment.propertyCategory.CodeMeaning
      },
      {
        name: 'Property Type',
        value: this.props.segment.propertyType.CodeMeaning
      },
      {
        name: 'Algorithm Name',
        value: this.props.segment.algorithmName
      }
    ]

    const settings = (
      <div>
        <Row justify='center' align='middle'>
          <Col span={6}>
            Opacity
          </Col>
          <Col span={12}>
            <Slider
              range={false}
              min={0}
              max={1}
              step={0.01}
              value={this.state.currentStyle.opacity}
              onChange={this.handleOpacityChange}
            />
          </Col>
          <Col span={6}>
            <InputNumber
              min={0}
              max={1}
              size='small'
              step={0.1}
              style={{ width: '65px' }}
              value={this.state.currentStyle.opacity}
              onChange={this.handleOpacityChange}
            />
          </Col>
        </Row>
      </div>
    )

    /**
     * This hack is required for Menu.Item to work properly:
     * https://github.com/react-component/menu/issues/142
     */
    const {
      defaultStyle,
      isVisible,
      segment,
      metadata,
      onVisibilityChange,
      onStyleChange,
      ...otherProps
    } = this.props
    return (
      <Menu.Item
        style={{ height: '100%', paddingLeft: '3px' }}
        key={this.props.segment.uid}
        {...otherProps}
      >
        <Space align='start'>
          <div style={{ paddingLeft: '14px' }}>
            <Space direction='vertical' align='end'>
              <Switch
                size='small'
                onChange={this.handleVisibilityChange}
                checked={this.props.isVisible}
                checkedChildren={<FaEye />}
                unCheckedChildren={<FaEyeSlash />}
              />
              <Popover
                placement='left'
                content={settings}
                overlayStyle={{ width: '350px' }}
                title='Display Settings'
              >
                <Button
                  type='primary'
                  shape='circle'
                  icon={<SettingOutlined />}
                />
              </Popover>
            </Space>
          </div>
          <Description
            header={this.props.segment.label}
            attributes={attributes}
            selectable
            hasLongValues
          />
        </Space>
      </Menu.Item>
    )
  }

render (): React.ReactNode {
    const identifier = this.props.opticalPath.identifier
    const description = this.props.opticalPath.description
    const attributes: Array<{ name: string, value: string }> = []
    if (this.props.opticalPath.illuminationWaveLength !== undefined) {
      attributes.push(
        {
          name: 'Illumination wavelength',
          value: `${this.props.opticalPath.illuminationWaveLength} nm`
        }
      )
    }
    if (this.props.opticalPath.illuminationColor !== undefined) {
      attributes.push(
        {
          name: 'Illumination color',
          value: this.props.opticalPath.illuminationColor.CodeMeaning
        }
      )
    }

    // TID 8001 "Specimen Preparation"
    const specimenDescriptions: dmv.metadata.SpecimenDescription[] = (
      this.props.metadata[0].SpecimenDescriptionSequence ?? []
    )
    specimenDescriptions.forEach(description => {
      const specimenPreparationSteps: dmv.metadata.SpecimenPreparation[] = (
        description.SpecimenPreparationSequence ?? []
      )
      specimenPreparationSteps.forEach(
        (step: dmv.metadata.SpecimenPreparation, index: number): void => {
          step.SpecimenPreparationStepContentItemSequence.forEach((
            item: (
              dcmjs.sr.valueTypes.CodeContentItem |
              dcmjs.sr.valueTypes.TextContentItem |
              dcmjs.sr.valueTypes.UIDRefContentItem |
              dcmjs.sr.valueTypes.PNameContentItem |
              dcmjs.sr.valueTypes.DateTimeContentItem
            ),
            index: number
          ) => {
            const name = new dcmjs.sr.coding.CodedConcept({
              value: item.ConceptNameCodeSequence[0].CodeValue,
              schemeDesignator:
                item.ConceptNameCodeSequence[0].CodingSchemeDesignator,
              meaning: item.ConceptNameCodeSequence[0].CodeMeaning
            })
            if (item.ValueType === dcmjs.sr.valueTypes.ValueTypes.CODE) {
              item = item as dcmjs.sr.valueTypes.CodeContentItem
              const value = new dcmjs.sr.coding.CodedConcept({
                value: item.ConceptCodeSequence[0].CodeValue,
                schemeDesignator:
                  item.ConceptCodeSequence[0].CodingSchemeDesignator,
                meaning: item.ConceptCodeSequence[0].CodeMeaning
              })
              if (!name.equals(SpecimenPreparationStepItems.PROCESSING_TYPE)) {
                if (name.equals(SpecimenPreparationStepItems.STAIN)) {
                  attributes.push({
                    name: 'Tissue stain',
                    value: value.CodeMeaning
                  })
                }
              }
            } else if (item.ValueType === dcmjs.sr.valueTypes.ValueTypes.TEXT) {
              item = item as dcmjs.sr.valueTypes.TextContentItem
              if (!name.equals(SpecimenPreparationStepItems.PROCESSING_TYPE)) {
                if (name.equals(SpecimenPreparationStepItems.STAIN)) {
                  attributes.push({
                    name: 'Tissue stain',
                    value: item.TextValue
                  })
                }
              }
            }
          })
        }
      )
    })

    const maxValue = Math.pow(2, this.props.metadata[0].BitsAllocated) - 1

    const title = (
      description != null ? `${identifier}: ${description}` : identifier
    )
    let settings
    let item
    if (this.props.opticalPath.isMonochromatic) {
      // monochrome images that can be pseudo-colored
      let colorSettings
      if (this.state.currentStyle.color != null) {
        colorSettings = (
          <>
            <Divider plain>
              Color
            </Divider>
            <Row justify='center' align='middle' gutter={[8, 8]}>
              <Col span={5}>
                Red
              </Col>
              <Col span={14}>
                <Slider
                  range={false}
                  min={0}
                  max={255}
                  step={1}
                  value={this.state.currentStyle.color[0]}
                  onChange={this.handleColorRChange}
                />
              </Col>
              <Col span={5}>
                <InputNumber
                  min={0}
                  max={255}
                  size='small'
                  style={{ width: '65px' }}
                  value={this.state.currentStyle.color[0]}
                  onChange={this.handleColorRChange}
                />
              </Col>
            </Row>

            <Row justify='center' align='middle' gutter={[8, 8]}>
              <Col span={5}>
                Green
              </Col>
              <Col span={14}>
                <Slider
                  range={false}
                  min={0}
                  max={255}
                  step={1}
                  value={this.state.currentStyle.color[1]}
                  onChange={this.handleColorGChange}
                />
              </Col>
              <Col span={5}>
                <InputNumber
                  min={0}
                  max={255}
                  size='small'
                  style={{ width: '65px' }}
                  value={this.state.currentStyle.color[1]}
                  onChange={this.handleColorGChange}
                />
              </Col>
            </Row>

            <Row justify='center' align='middle' gutter={[8, 8]}>
              <Col span={5}>
                Blue
              </Col>
              <Col span={14}>
                <Slider
                  range={false}
                  min={0}
                  max={255}
                  step={1}
                  value={this.state.currentStyle.color[2]}
                  onChange={this.handleColorBChange}
                />
              </Col>
              <Col span={5}>
                <InputNumber
                  min={0}
                  max={255}
                  size='small'
                  style={{ width: '65px' }}
                  value={this.state.currentStyle.color[2]}
                  onChange={this.handleColorBChange}
                />
              </Col>
            </Row>
          </>
        )
      }

      let windowSettings
      if (this.state.currentStyle.limitValues != null) {
        windowSettings = (
          <>
            <Divider plain>
              Values of interest
            </Divider>
            <Row justify='center' align='middle' gutter={[8, 8]}>
              <Col span={6}>
                <InputNumber
                  min={0}
                  max={this.state.currentStyle.limitValues[1]}
                  size='small'
                  style={{ width: '75px' }}
                  value={this.state.currentStyle.limitValues[0]}
                  onChange={this.handleLowerLimitChange}
                />
              </Col>
              <Col span={12}>
                <Slider
                  range
                  min={0}
                  max={maxValue}
                  step={1}
                  value={[
                    this.state.currentStyle.limitValues[0],
                    this.state.currentStyle.limitValues[1]
                  ]}
                  onChange={this.handleLimitChange}
                />
              </Col>
              <Col span={6}>
                <InputNumber
                  min={this.state.currentStyle.limitValues[0]}
                  max={maxValue}
                  size='small'
                  style={{ width: '75px' }}
                  value={this.state.currentStyle.limitValues[1]}
                  onChange={this.handleUpperLimitChange}
                />
              </Col>
            </Row>
          </>
        )
      }
      settings = (
        <div>
          {windowSettings}
          {colorSettings}
          <Divider plain />
          <Row justify='center' align='middle' gutter={[8, 8]}>
            <Col span={6}>
              Opacity
            </Col>
            <Col span={12}>
              <Slider
                range={false}
                min={0}
                max={1}
                step={0.01}
                value={this.state.currentStyle.opacity}
                onChange={this.handleOpacityChange}
              />
            </Col>
            <Col span={6}>
              <InputNumber
                min={0}
                max={1}
                size='small'
                step={0.1}
                style={{ width: '65px' }}
                value={this.state.currentStyle.opacity}
                onChange={this.handleOpacityChange}
              />
            </Col>
          </Row>
        </div>
      )
      const colors = this.getCurrentColors()
      item = (
        <Badge
          offset={[-20, 20]}
          count={' '}
          style={{
            borderStyle: 'solid',
            borderWidth: '1px',
            borderColor: 'gray',
            visibility: this.state.isVisible ? 'visible' : 'hidden',
            backgroundImage: `linear-gradient(to right, ${colors.toString()})`
          }}
        >
          <Description
            header={title}
            attributes={attributes}
            selectable
            hasLongValues
          />
        </Badge>
      )
    } else {
      // color images
      settings = (
        <div>
          <Row justify='center' align='middle' gutter={[8, 8]}>
            <Col span={6}>
              Opacity
            </Col>
            <Col span={12}>
              <Slider
                range={false}
                min={0}
                max={1}
                step={0.01}
                value={this.state.currentStyle.opacity}
                onChange={this.handleOpacityChange}
              />
            </Col>
            <Col span={6}>
              <InputNumber
                min={0}
                max={1}
                size='small'
                step={0.1}
                style={{ width: '60px' }}
                value={this.state.currentStyle.opacity}
                onChange={this.handleOpacityChange}
              />
            </Col>
          </Row>
        </div>
      )
      item = (
        <Description
          header={title}
          attributes={attributes}
          selectable
          hasLongValues
        />
      )
    }

    const buttons = []
    if (this.props.isRemovable) {
      buttons.push(
        <Tooltip title='Remove Optical Path'>
          <Button
            type='default'
            shape='circle'
            icon={<DeleteOutlined />}
            onClick={this.handleRemoval}
          />
        </Tooltip>
      )
    }

    const {
      defaultStyle,
      isRemovable,
      isVisible,
      metadata,
      onVisibilityChange,
      onStyleChange,
      onRemoval,
      opticalPath,
      ...otherProps
    } = this.props
    return (
      <Menu.Item
        style={{ height: '100%', paddingLeft: '3px' }}
        key={this.props.opticalPath.identifier}
        {...otherProps}
      >
        <Space align='start'>
          <div style={{ paddingLeft: '14px' }}>
            <Space direction='vertical' align='end'>
              <Switch
                size='small'
                checked={this.state.isVisible}
                onChange={this.handleVisibilityChange}
                checkedChildren={<EyeOutlined />}
                unCheckedChildren={<EyeInvisibleOutlined />}
              />
              <Popover
                placement='left'
                content={settings}
                overlayStyle={{ width: '350px' }}
                title='Display Settings'
              >
                <Button
                  type='primary'
                  shape='circle'
                  icon={<SettingOutlined />}
                />
              </Popover>
              {buttons}
            </Space>
          </div>
          {item}
        </Space>
      </Menu.Item>
    )
  }