code: function DefaultArrayItem(props) {
    const btnStyle = {
      flex: 1,
      paddingLeft: 6,
      paddingRight: 6,
      fontWeight: "bold",
    };
    return (
      <div key={props.index} className={props.className}>
        <div className={props.hasToolbar ? "col-xs-9" : "col-xs-12"}>
          {props.children}
        </div>
  
        {props.hasToolbar && (
          <div className="col-xs-3 array-item-toolbox">
            <div
              className="btn-group"
              style={{
                display: "flex",
                justifyContent: "space-around",
              }}>
              {(props.hasMoveUp || props.hasMoveDown) && (
                <IconButton
                  icon="arrow-up"
                  className="array-item-move-up"
                  tabIndex="-1"
                  style={btnStyle}
                  disabled={props.disabled || props.readonly || !props.hasMoveUp}
                  onClick={props.onReorderClick(props.index, props.index - 1)}
                />
              )}
  
              {(props.hasMoveUp || props.hasMoveDown) && (
                <IconButton
                  icon="arrow-down"
                  className="array-item-move-down"
                  tabIndex="-1"
                  style={btnStyle}
                  disabled={
                    props.disabled || props.readonly || !props.hasMoveDown
                  }
                  onClick={props.onReorderClick(props.index, props.index + 1)}
                />
              )}
  
              {props.hasRemove && (
                <IconButton
                  type="danger"
                  icon="remove"
                  className="array-item-remove"
                  tabIndex="-1"
                  style={btnStyle}
                  disabled={props.disabled || props.readonly}
                  onClick={props.onDropIndexClick(props.index)}
                />
              )}
            </div>
          </div>
        )}
      </div>
    );
  }
docs: Used in the two templates