src/components/fields/ArrayField.js
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>
  );
}
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>
  );
}
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 > ) ; }
Used in the two templates
Used in the two templates