@itsjonq/controls/dist/es/components/Field/Field.Variants.js

A control panel to develop React UI

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import { ColorPicker } from '../ColorPicker';
import { BaseInputField } from './Field.styles';
export var FieldVariants = {
  boolean: BooleanField,
  color: ColorField,
  date: DateField,
  number: NumberField,
  select: SelectField,
  range: RangeField,
  text: TextField,
  textarea: TextAreaField
};
export function BooleanField(props) {
  var value = props.value,
      onChange = props.onChange;
  return React.createElement(BaseInputField, Object.assign({}, props, {
    type: "checkbox",
    checked: value,
    onChange: function handleOnChange(event) {
      onChange && onChange(event.target.checked);
    },
    padding: 0,
    margin: 0
  }));
}
export function ColorField(props) {
  return React.createElement(ColorPicker, props);
}
export function DateField(props) {
  return React.createElement(TextField, Object.assign({}, props, {
    type: "date"
  }));
}
export function NumberField(props) {
  return React.createElement(TextField, props);
}
export function RangeField(props) {
  var options = props.options,
      restProps = _objectWithoutProperties(props, ["options"]);

  return React.createElement(TextField, Object.assign({}, restProps, options, {
    type: "range"
  }));
}
export function SelectField(props) {
  var options = props.options,
      onChange = props.onChange,
      restProps = _objectWithoutProperties(props, ["options", "onChange"]);

  var handleOnChange = createBaseHandleOnChange(onChange);
  var items = Object.keys(options).reduce(function (collection, key) {
    return [].concat(collection, [{
      label: key,
      key: key,
      value: options[key]
    }]);
  }, []);
  return React.createElement(BaseInputField, Object.assign({
    as: "select"
  }, restProps, {
    onChange: handleOnChange
  }), items.map(function (item) {
    return React.createElement("option", item);
  }));
}
export function TextField(props) {
  var onChange = props.onChange;
  var handleOnChange = createBaseHandleOnChange(onChange);
  return React.createElement(BaseInputField, Object.assign({}, props, {
    onChange: handleOnChange
  }));
}
export function TextAreaField(props) {
  return React.createElement(TextField, Object.assign({}, props, {
    as: "textarea",
    resize: "vertical",
    minHeight: 19,
    rows: 3
  }));
}

function createBaseHandleOnChange(onChange) {
  return function (event) {
    onChange && onChange(event.target.value);
  };
}