cx 25.10.1 → 26.0.1

package/src/widgets/form/Radio.js

@@ -1,188 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Field, getFieldTooltip } from "./Field";
-import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { KeyCode } from "../../util/KeyCode";
-import { isUndefined } from "../../util/isUndefined";
-
-export class Radio extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            selection: undefined,
-            option: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            readOnly: undefined,
-            required: undefined,
-            text: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   init() {
-      if (this.selection) this.value = this.selection;
-
-      super.init();
-   }
-
-   formatValue(context, { data }) {
-      return data.text;
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(...arguments);
-      let { data } = instance;
-      data.checked = data.value === data.option;
-      if (this.default && isUndefined(data.value)) instance.set("value", data.option);
-   }
-
-   renderValue(context, { data }) {
-      if (data.value === data.option) return super.renderValue(...arguments);
-      return null;
-   }
-
-   renderWrap(context, instance, key, content) {
-      var { data } = instance;
-      return (
-         <label
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-            onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-            onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            onClick={(e) => {
-               this.handleClick(e, instance);
-            }}
-            htmlFor={data.id}
-         >
-            {content}
-            {this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-         </label>
-      );
-   }
-
-   renderNativeCheck(context, instance) {
-      var { CSS, baseClass } = this;
-      var { data } = instance;
-      return (
-         <input
-            key="input"
-            className={CSS.element(baseClass, "radio")}
-            id={data.id}
-            type="radio"
-            checked={data.checked}
-            disabled={data.disabled}
-            {...data.inputAttrs}
-            onClick={stopPropagation}
-            onChange={(e) => {
-               this.handleChange(e, instance);
-            }}
-         />
-      );
-   }
-
-   renderCheck(context, instance) {
-      return <RadioCmp key="check" instance={instance} data={instance.data} />;
-   }
-
-   renderInput(context, instance, key) {
-      var { data } = instance;
-      var text = data.text || this.renderChildren(context, instance);
-      var { CSS, baseClass } = this;
-      return this.renderWrap(context, instance, key, [
-         this.native ? this.renderNativeCheck(context, instance) : this.renderCheck(context, instance),
-         text ? (
-            <div key="text" className={CSS.element(baseClass, "text")}>
-               {text}
-            </div>
-         ) : (
-            <span key="baseline" className={CSS.element(baseClass, "baseline")}>
-               &nbsp;
-            </span>
-         ),
-      ]);
-   }
-
-   handleClick(e, instance) {
-      if (this.native) e.stopPropagation();
-      else {
-         var el = document.getElementById(instance.data.id);
-         if (el) el.focus();
-         e.preventDefault();
-         this.handleChange(e, instance);
-      }
-   }
-
-   handleChange(e, instance) {
-      var { data } = instance;
-      if (data.disabled || data.readOnly || data.viewMode) return;
-      instance.set("value", data.option);
-   }
-}
-
-Radio.prototype.baseClass = "radio";
-Radio.prototype.native = false;
-Radio.prototype.default = false;
-
-Widget.alias("radio", Radio);
-
-class RadioCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         value: props.data.checked,
-      };
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-         value: props.data.checked,
-      });
-   }
-
-   render() {
-      var { instance, data } = this.props;
-      var { widget } = instance;
-      var { baseClass, CSS } = widget;
-
-      return (
-         <span
-            key="check"
-            tabIndex={data.disabled ? null : data.tabIndex || 0}
-            className={CSS.element(baseClass, "input", {
-               checked: this.state.value,
-            })}
-            style={CSS.parseStyle(data.inputStyle)}
-            id={data.id}
-            onClick={this.onClick.bind(this)}
-            onKeyDown={this.onKeyDown.bind(this)}
-         />
-      );
-   }
-
-   onClick(e) {
-      var { instance, data } = this.props;
-      var { widget } = instance;
-      if (!data.disabled && !data.readOnly) {
-         e.stopPropagation();
-         e.preventDefault();
-         widget.handleChange(e, instance);
-      }
-   }
-
-   onKeyDown(e) {
-      let { instance } = this.props;
-      if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-      switch (e.keyCode) {
-         case KeyCode.space:
-            this.onClick(e);
-            break;
-      }
-   }
-}

package/src/widgets/form/Select.d.ts

@@ -1,69 +0,0 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface SelectProps extends FieldProps {
-   /** Select value. */
-   value?: Cx.Prop<number | string>;
-
-   /** Value when no selection is made. Default is `undefined` */
-   emptyValue?: any;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Default text displayed when the field is empty. */
-   placeholder?: Cx.StringProp;
-
-   /**
-    * Set to `true` to hide the clear button. It can be used interchangeably with the `showClear` property. Default value is `false`.
-    * Note, the `placeholder` needs to be specified for the clear button to render.
-    */
-   hideClear?: boolean;
-
-   /**
-    * Set to `false` to hide the clear button. It can be used interchangeably with the `hideClear` property. Default value is `true`.
-    * Note, the `placeholder` needs to be specified for the clear button to render.
-    */
-   showClear?: boolean;
-
-   /**
-    * Set to `true` to display the clear button even if `required` is set. Default is `false`.
-    */
-   alwaysShowClear?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `select`. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   /**
-    * Convert values before selection.
-    * Useful for converting strings into numbers. Default is `true`.
-    */
-   convertValues?: boolean;
-
-   /** String value used to indicate a `null` entry */
-   nullString?: string;
-
-   /** Name or configuration of the icon to be put on the left side of the input.  */
-   icon?: Cx.StringProp | Cx.Record;
-}
-
-export class Select extends Cx.Widget<SelectProps> {}
-
-interface OptionProps extends Cx.HtmlElementProps {
-   /** Value property. */
-   value?: Cx.StringProp;
-
-   /** Defaults to `false`. Set to `true` to disable the field. */
-   disabled?: Cx.BooleanProp;
-
-   /** The opposite of `disabled`. */
-   enabled?: Cx.BooleanProp;
-
-   /** Defaults to `false`. Set to `true` to select the the option. */
-   selected?: Cx.BooleanProp;
-}
-
-export class Option extends Cx.Widget<OptionProps> {}

package/src/widgets/form/Select.js

@@ -1,269 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { Field, getFieldTooltip } from "./Field";
-import {
-   tooltipParentWillReceiveProps,
-   tooltipMouseMove,
-   tooltipMouseLeave,
-   tooltipParentDidMount,
-} from "../overlay/tooltip-ops";
-import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
-import DropdownIcon from "../icons/drop-down";
-import ClearIcon from "../icons/clear";
-import { Localization } from "../../ui/Localization";
-import { isString } from "../../util/isString";
-import { isDefined } from "../../util/isDefined";
-import { KeyCode } from "../../util/KeyCode";
-import { autoFocus } from "../autoFocus";
-
-export class Select extends Field {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            required: undefined,
-            placeholder: undefined,
-            icon: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   init() {
-      if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-      if (this.alwaysShowClear) this.showClear = true;
-      super.init();
-   }
-
-   renderInput(context, instance, key) {
-      return (
-         <SelectComponent
-            key={key}
-            instance={instance}
-            multiple={this.multiple}
-            select={(v) => this.select(v, instance)}
-            label={this.labelPlacement && getContent(this.renderLabel(context, instance, "label"))}
-            help={this.helpPlacement && getContent(this.renderHelp(context, instance, "help"))}
-            icon={this.renderIcon(context, instance, "icon")}
-         >
-            {this.renderChildren(context, instance)}
-         </SelectComponent>
-      );
-   }
-
-   convert(value) {
-      if (value == this.nullString) return null;
-      if (value == "true") return true;
-      if (value == "false") return false;
-      if (value.match(/^\d+(\.\d+)?$/)) return Number(value);
-      return value;
-   }
-
-   select(value, instance) {
-      if (this.convertValues && value != null) value = this.convert(value);
-      instance.set("value", value);
-   }
-
-   add(item) {
-      if (isString(item)) return;
-      super.add(item);
-   }
-}
-
-Select.prototype.baseClass = "select";
-Select.prototype.multiple = false;
-Select.prototype.convertValues = true;
-Select.prototype.nullString = "";
-Select.prototype.suppressErrorsUntilVisited = true;
-Select.prototype.showClear = true;
-Select.prototype.alwaysShowClear = false;
-Select.prototype.icon = null;
-
-Widget.alias("select", Select);
-Localization.registerPrototype("cx/widgets/Select", Select);
-
-class SelectComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         visited: false,
-         focus: false,
-      };
-   }
-
-   render() {
-      let { multiple, select, instance, label, help, icon: iconVDOM } = this.props;
-      let { data, widget, state } = instance;
-      let { CSS, baseClass } = widget;
-
-      let icon = iconVDOM && <div className={CSS.element(baseClass, "left-icon")}>{iconVDOM}</div>;
-
-      let insideButton,
-         readOnly = data.disabled || data.readOnly;
-
-      if (
-         widget.showClear &&
-         !readOnly &&
-         !this.props.multiple &&
-         (widget.alwaysShowClear || !data.required) &&
-         data.placeholder &&
-         !data.empty
-      ) {
-         insideButton = (
-            <div
-               onMouseDown={preventDefault}
-               onClick={(e) => this.onClearClick(e)}
-               className={CSS.element(baseClass, "clear")}
-            >
-               <ClearIcon className={CSS.element(baseClass, "icon")} />
-            </div>
-         );
-      } else {
-         insideButton = (
-            <div className={CSS.element(baseClass, "tool")}>
-               <DropdownIcon className={CSS.element(baseClass, "icon")} />
-            </div>
-         );
-      }
-
-      let placeholder;
-      if (data.placeholder) {
-         placeholder = (
-            <option value={widget.nullString} className={CSS.element(baseClass, "placeholder")} disabled hidden>
-               {data.placeholder}
-            </option>
-         );
-      }
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  visited: state.visited,
-                  icon: !!iconVDOM,
-                  focus: this.state.focus,
-                  error: state.visited && data.error,
-                  empty: data.empty && !data.placeholder,
-               }),
-            )}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-         >
-            <select
-               id={data.id}
-               ref={(el) => {
-                  this.select = el;
-               }}
-               className={CSS.expand(CSS.element(baseClass, "select"), data.inputClass)}
-               style={data.inputStyle}
-               value={data.value == null ? widget.nullString : String(data.value)}
-               multiple={multiple}
-               disabled={data.disabled}
-               tabIndex={data.tabIndex}
-               {...data.inputAttrs}
-               onBlur={this.onBlur.bind(this)}
-               onFocus={(e) => this.onFocus()}
-               onKeyDown={this.onKeyDown.bind(this)}
-               onChange={(e) => {
-                  e.preventDefault();
-                  select(e.target.value);
-               }}
-               onMouseMove={(e) => tooltipMouseMove(e, ...getFieldTooltip(instance))}
-               onMouseLeave={(e) => tooltipMouseLeave(e, ...getFieldTooltip(instance))}
-            >
-               {placeholder}
-               {this.props.children}
-            </select>
-            {insideButton}
-            {icon}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   onBlur() {
-      this.props.instance.setState({ visited: true });
-      if (this.state.focus)
-         this.setState({
-            focus: false,
-         });
-   }
-
-   onFocus() {
-      let { instance } = this.props;
-      let { widget } = instance;
-      if (widget.trackFocus) {
-         this.setState({
-            focus: true,
-         });
-      }
-   }
-
-   onClearClick(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      let { instance } = this.props;
-      let { widget } = instance;
-      instance.set("value", widget.emptyValue);
-   }
-
-   onKeyDown(e) {
-      switch (e.keyCode) {
-         case KeyCode.up:
-         case KeyCode.down:
-            e.stopPropagation();
-            break;
-      }
-   }
-
-   componentDidMount() {
-      var { select } = this.props;
-      select(this.select.value);
-      tooltipParentDidMount(this.select, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.select, this);
-   }
-
-   componentDidUpdate() {
-      autoFocus(this.select, this);
-   }
-
-   UNSAFE_componentWillReceiveProps(props) {
-      tooltipParentWillReceiveProps(this.select, ...getFieldTooltip(props.instance));
-   }
-}
-
-export class Option extends HtmlElement {
-   declareData() {
-      super.declareData(
-         {
-            value: undefined,
-            disabled: undefined,
-            enabled: undefined,
-            selected: undefined,
-            text: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, { data }) {
-      super.prepareData(...arguments);
-      if (!data.empty) data.value = data.value.toString();
-   }
-
-   render(context, instance, key) {
-      var { data } = instance;
-      return (
-         <option key={key} value={data.value}>
-            {data.text || this.renderChildren(context, instance)}
-         </option>
-      );
-   }
-}
-
-Widget.alias("option", Option);

package/src/widgets/form/Slider.d.ts

@@ -1,65 +0,0 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
-
-interface SliderProps extends FieldProps {
-
-   /** Low value of the slider range. */
-   from?: Cx.NumberProp,
-
-   /** High value of the slider range. */
-   to?: Cx.NumberProp,
-
-   /** Rounding step. */
-   step?: Cx.NumberProp,
-
-   /** Minimum allowed value. Default is `0`. */
-   minValue?: Cx.NumberProp,
-
-   /** Maximum allowed value. Default is `100`. */
-   maxValue?: Cx.NumberProp,
-
-   /** Defaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
-
-   /** Style object to be applied on the selected axis range. */
-   rangeStyle?: Cx.StyleProp,
-
-   /** Style object to be applied on the handle. */
-   handleStyle?: Cx.StyleProp,
-
-   /** Minimum allowed value. Default is `0`. */
-   min?: Cx.NumberProp,
-
-   /** Maximum allowed value. Default is `100`. */
-   max?: Cx.NumberProp,
-   
-   /** High value of the slider range. */
-   value?: Cx.NumberProp,
-
-   /** Base CSS class to be applied to the field. Defaults to `slider`. */
-   baseClass?: string,
-
-   /** Set to `true` to orient the slider vertically. */
-   vertical?: boolean,
-   
-   /** Invert vertical slider behavior. Set this to `true` if you want the slider to go from `top` to `bottom`. */
-   invert?: boolean,
-
-   /** Range tooltip configuration. */
-   toTooltip?: Cx.StringProp | Cx.StructuredProp,
-
-   /** Range tooltip configuration. */
-   valueTooltip?: Cx.StringProp | Cx.StructuredProp,
-
-   /** Range tooltip configuration. */
-   fromTooltip?: Cx.StringProp | Cx.StructuredProp, 
-
-   /** When set to `true`, slider respondes to mouse wheel events, while hovering it. It will not work if both `from` and `to` values are used. Default value is `false`. */
-   wheel?: Cx.BooleanProp,
-
-   /** Value increment/decrement, when controlling the slider with mouse wheel. Default value is set to `1%` of range. */
-   increment?: Cx.NumberProp
-   
-}
-
-export class Slider extends Cx.Widget<SliderProps> {}