cx 25.11.1 → 26.0.1

package/src/widgets/Resizer.js

@@ -1,151 +0,0 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { captureMouseOrTouch, getCursorPos } from "./overlay/captureMouse";
-
-export class Resizer extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         size: undefined,
-         defaultSize: undefined,
-         minSize: undefined,
-         maxSize: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-
-      return <ResizerCmp key={key} instance={instance} data={data} />;
-   }
-}
-
-Resizer.prototype.baseClass = "resizer";
-Resizer.prototype.styled = true;
-Resizer.prototype.horizontal = false;
-Resizer.prototype.forNextElement = false;
-Resizer.prototype.defaultSize = null;
-Resizer.prototype.minSize = 0;
-Resizer.prototype.maxSize = 1e6;
-
-class ResizerCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         dragged: false,
-         offset: 0,
-      };
-   }
-
-   shouldComponentUpdate(props, state) {
-      return state != this.state;
-   }
-
-   render() {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      let { baseClass, CSS } = widget;
-
-      return (
-         <div
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  vertical: !widget.horizontal,
-                  horizontal: widget.horizontal,
-               })
-            )}
-            style={data.style}
-            onDoubleClick={(e) => {
-               instance.set("size", data.defaultSize);
-            }}
-            onMouseDown={(e) => {
-               let initialPosition = getCursorPos(e);
-               this.setState({ dragged: true, initialPosition });
-            }}
-            onMouseUp={(e) => {
-               this.setState({ dragged: false });
-            }}
-            onMouseMove={this.startCapture.bind(this)}
-            onMouseLeave={this.startCapture.bind(this)}
-         >
-            <div
-               className={CSS.element(baseClass, "handle", { dragged: this.state.dragged })}
-               style={{
-                  left: !widget.horizontal ? this.state.offset : 0,
-                  top: widget.horizontal ? this.state.offset : 0,
-               }}
-            />
-         </div>
-      );
-   }
-
-   startCapture(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (this.state.dragged && !this.hasCapture) {
-         this.hasCapture = true;
-         captureMouseOrTouch(
-            e,
-            this.onHandleMove.bind(this),
-            this.onDragComplete.bind(this),
-            this.state.initialPosition,
-            widget.horizontal ? "row-resize" : "col-resize"
-         );
-      }
-   }
-
-   onHandleMove(e, initialPosition) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      let currentPosition = getCursorPos(e);
-      const offset = !widget.horizontal
-         ? currentPosition.clientX - initialPosition.clientX
-         : currentPosition.clientY - initialPosition.clientY;
-
-      let size = this.getNewSize(0);
-      let newSize = this.getNewSize(offset);
-
-      let allowedOffset = widget.forNextElement ? size - newSize : newSize - size;
-
-      this.setState({ offset: allowedOffset });
-   }
-
-   getNewSize(offset) {
-      let { instance, data } = this.props;
-      let { horizontal, forNextElement } = instance.widget;
-
-      if (
-         !this.el ||
-         (!forNextElement && !this.el.previousElementSibling) ||
-         (forNextElement && !this.el.nextElementSibling)
-      )
-         return 0;
-
-      let newSize;
-
-      if (horizontal) {
-         if (forNextElement) newSize = this.el.nextElementSibling.offsetHeight - offset;
-         else newSize = this.el.previousElementSibling.offsetHeight + offset;
-      } else {
-         if (forNextElement) newSize = this.el.nextElementSibling.offsetWidth - offset;
-         else newSize = this.el.previousElementSibling.offsetWidth + offset;
-      }
-
-      return Math.max(data.minSize, Math.min(newSize, data.maxSize));
-   }
-
-   onDragComplete() {
-      this.hasCapture = false;
-      let { instance } = this.props;
-
-      instance.set("size", this.getNewSize(this.state.offset));
-
-      this.setState({
-         dragged: false,
-         offset: 0,
-      });
-   }
-}

package/src/widgets/Sandbox.d.ts

@@ -1,18 +0,0 @@
-import * as Cx from "../core";
-
-interface SandboxProps extends Cx.PureContainerProps {
-   storage: Cx.Prop<Cx.Record>;
-
-   /* Cx.StringProp doesn't work for unknown reason */
-   key?: any;
-
-   accessKey?: Cx.StringProp;
-
-   recordName?: Cx.RecordAlias;
-   recordAlias?: Cx.RecordAlias;
-
-   immutable?: boolean;
-   sealed?: boolean;
-}
-
-export class Sandbox extends Cx.Widget<SandboxProps> {}

package/src/widgets/Sandbox.js

@@ -1,65 +0,0 @@
-import { Widget } from "../ui/Widget";
-import { PureContainer } from "../ui/PureContainer";
-import { Binding } from "../data/Binding";
-import { ExposedValueView } from "../data/ExposedValueView";
-
-export class Sandbox extends PureContainer {
-   init() {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ExposedValueView({
-         store: instance.parentStore,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance) {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            recordName: this.recordName,
-            immutable: this.immutable,
-            sealed: this.sealed,
-         });
-         instance.clearChildrenCache();
-      }
-      super.prepareData(context, instance);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-Sandbox.prototype.sealed = false;
-
-Widget.alias("sandbox", Sandbox);

package/src/widgets/Section.d.ts

@@ -1,52 +0,0 @@
-import {
-   Widget,
-   Prop,
-   StyledContainerProps,
-   BooleanProp,
-   StringProp,
-   StyleProp,
-   ClassProp,
-   Config
-} from '../core';
-
-interface SectionProps extends StyledContainerProps {
-
-   id?: Prop<string | number>,
-
-   /** Add default padding to the section body. Default is `true`. */
-   pad?: BooleanProp,
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the header. */
-   headerClass?: ClassProp,
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: ClassProp,
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the footer. */
-   footerClass?: ClassProp,
-
-   /** Section's title. */
-   title?: StringProp,
-
-   /** Contents that should go in the header. */
-   header?: Config,
-
-   /** Contents that should go in the footer. */
-   footer?: Config,
-
-   /** Title heading level (1-6) */
-   hLevel?: number
-
-}
-
-export class Section extends Widget<SectionProps> {
-}

package/src/widgets/Section.js

@@ -1,139 +0,0 @@
-import {Widget, VDOM, getContent} from '../ui/Widget';
-import {Container} from '../ui/Container';
-import {Heading} from './Heading';
-import {isString} from '../util/isString';
-import {parseStyle} from '../util/parseStyle';
-
-export class Section extends Container {
-
-   init() {
-      if (isString(this.headerStyle))
-         this.headerStyle = parseStyle(this.headerStyle);
-
-      if (isString(this.footerStyle))
-         this.footerStyle = parseStyle(this.footerStyle);
-
-      if (isString(this.bodyStyle))
-         this.bodyStyle = parseStyle(this.bodyStyle);
-
-      super.init();
-   }
-
-   add(item) {
-      if (item && item.putInto == 'header')
-         this.header = {
-            ...item,
-            putInto: null
-         };
-      else if (item && item.putInto == 'footer')
-         this.footer = {
-            ...item,
-            putInto: null
-         };
-      else
-         super.add(...arguments);
-   }
-
-   declareData() {
-      return super.declareData({
-         id: undefined,
-         headerStyle: {structured: true},
-         headerClass: {structured: true},
-         bodyStyle: {structured: true},
-         bodyClass: {structured: true},
-         footerStyle: {structured: true},
-         footerClass: {structured: true}
-      })
-   }
-
-   initComponents() {
-      super.initComponents({
-         header: this.getHeader(),
-         footer: this.getFooter()
-      });
-   }
-
-   getHeader() {
-      if (this.title)
-         return Widget.create(Heading, {
-            text: this.title,
-            level: this.hLevel
-         });
-
-      if (this.header)
-         return Heading.create(this.header);
-
-      return null;
-   }
-
-   getFooter() {
-      if (this.footer)
-         return Widget.create(this.footer);
-
-      return null;
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pad: this.pad
-      };
-      super.prepareData(context, instance);
-   }
-
-   initInstance(context, instance) {
-      instance.eventHandlers = instance.getJsxEventProps();
-      super.initInstance(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data, components, eventHandlers} = instance;
-      let header, footer;
-      let {CSS, baseClass} = this;
-
-      if (components.header) {
-         header = (
-            <header
-               className={CSS.expand(CSS.element(baseClass, 'header'), data.headerClass)}
-               style={data.headerStyle}
-            >
-               {getContent(components.header.render(context))}
-            </header>
-         );
-      }
-
-      if (components.footer) {
-         footer = (
-            <footer
-               className={CSS.expand(CSS.element(baseClass, 'footer'), data.footerClass)}
-               style={data.footerStyle}
-            >
-               {getContent(components.footer.render(context))}
-            </footer>
-         );
-      }
-
-      return (
-         <section
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            id={data.id}
-            {...eventHandlers}
-         >
-            { header }
-            <div className={CSS.expand(CSS.element(this.baseClass, 'body'), data.bodyClass)} style={data.bodyStyle}>
-               {this.renderChildren(context, instance)}
-            </div>
-            { footer }
-         </section>
-      )
-   }
-}
-
-
-Section.prototype.styled = true;
-Section.prototype.pad = true;
-Section.prototype.baseClass = 'section';
-Section.prototype.hLevel = 3;

package/src/widgets/autoFocus.d.ts

@@ -1 +0,0 @@
-export function autoFocus(el: any, component: React.Component);

package/src/widgets/autoFocus.js

@@ -1,9 +0,0 @@
-import { FocusManager } from "../ui/FocusManager";
-import { isTouchEvent } from "../util/isTouchEvent";
-
-export function autoFocus(el, component) {
-   let data = component.props.data || component.props.instance.data;
-   let autoFocusValue = el && data.autoFocus;
-   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el);
-   component.autoFocusValue = autoFocusValue;
-}

package/src/widgets/cx.d.ts

@@ -1,2 +0,0 @@
-export function cx(typeName, props?, ...children);
-export function react(config);

package/src/widgets/cx.js

@@ -1,72 +0,0 @@
-import {HtmlElement} from './HtmlElement';
-import {VDOM} from '../ui/Widget';
-import {createComponentFactory, isComponentFactory} from '../util/Component';
-import {createFunctionalComponent} from '../ui/createFunctionalComponent'
-import {isString} from '../util/isString';
-import {isNumber} from '../util/isNumber';
-import {isFunction} from '../util/isFunction';
-import {isUndefined} from '../util/isUndefined';
-import {isArray} from '../util/isArray';
-
-import {flattenProps} from '../ui/flattenProps';
-
-let htmlFactoryCache = {};
-
-function getHtmlElementFactory(tagName) {
-   let factory = htmlFactoryCache[tagName];
-   if (factory)
-      return factory;
-   return htmlFactoryCache[tagName] = createComponentFactory(() => {}, config => HtmlElement.create(HtmlElement, {tag: tagName}, flattenProps(config)), {tag: tagName});
-}
-
-export function cx(typeName, props, ...children) {
-
-   if (isArray(typeName))
-      return typeName;
-
-   if (isFunction(typeName) && isUndefined(props))
-      return createFunctionalComponent(config => typeName(flattenProps(config)));
-
-   if (typeName.type || typeName.$type)
-      return typeName;
-
-   if (children && children.length == 0)
-      children = null;
-
-   if (children && children.length == 1)
-      children = children[0];
-
-   if (typeName == 'cx')
-      return children;
-
-   if (typeName == 'react')
-      return react(children);
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase())
-      typeName = getHtmlElementFactory(typeName);
-
-   return {
-      $type: typeName,
-      $props: props,
-      jsxAttributes: props && Object.keys(props),
-      children
-   }
-}
-
-export function react(config) {
-   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config))
-      return config;
-
-   if (isArray(config))
-      return config.map(react);
-
-   let type = config.$type;
-
-   if (isComponentFactory(type) && type.$meta && type.$meta.tag)
-      type = type.$meta.tag;
-
-   if (isArray(config.children))
-      return VDOM.createElement(type, config.$props, ...config.children.map(react));
-
-   return VDOM.createElement(type, config.$props, react(config.children));
-}

package/src/widgets/drag-drop/DragHandle.d.ts

@@ -1,10 +0,0 @@
-import * as Cx from '../../core';
-
-interface DragHandleProps extends Cx.StyledContainerProps {
-   
-   /** Base CSS class to be applied to the element. Defaults to 'draghandle'. */
-   baseClass?: string
-   
-}
-
-export class DragHandle extends Cx.Widget<DragHandleProps> {}

package/src/widgets/drag-drop/DragHandle.js

@@ -1,37 +0,0 @@
-import { Widget, VDOM } from '../../ui/Widget';
-import { Container } from '../../ui/Container';
-import { ddHandle } from '../drag-drop/ops';
-import {isArray} from '../../util/isArray';
-
-export class DragHandle extends Container {
-
-   explore(context, instance) {
-      if (isArray(context.dragHandles))
-         context.dragHandles.push(instance);
-      super.explore(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data} = instance;
-      return (
-         <div
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            onTouchStart={ddHandle}
-            onMouseDown={ddHandle}
-            onTouchMove={ddHandle}
-            onMouseMove={ddHandle}
-            onTouchEnd={ddHandle}
-            onMouseUp={ddHandle}
-         >
-            {this.renderChildren(context, instance)}
-         </div>
-      )
-   }
-}
-
-DragHandle.prototype.styled = true;
-DragHandle.prototype.baseClass = 'draghandle';
-
-Widget.alias('draghandle', DragHandle);

package/src/widgets/drag-drop/DragSource.d.ts

@@ -1,45 +0,0 @@
-import * as Cx from "../../core";
-import { Instance } from "../../ui/Instance";
-
-interface DragSourceProps extends Cx.StyledContainerProps {
-   /**
-    * Data about the drag source that can be used by drop zones to test if
-    * drag source is acceptable and to perform drop operations.
-    */
-   data?: any;
-
-   /**
-    * Set to true to hide the element while being dragged.
-    * Use if drop zones are configured to expand to indicate where drop will occur.
-    */
-   hideOnDrag?: boolean;
-
-   /** Set to true to indicate that this drag source can be dragged only by using an inner DragHandle. */
-   handled?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to 'dragsource'. */
-   baseClass?: string;
-
-   onDragStart?: (e, instance: Instance) => any;
-
-   onDragEnd?: (e, instance: Instance) => void;
-
-   id?: Cx.StringProp;
-
-   /** Custom contents to be displayed during drag & drop operation. */
-   clone?: Cx.Config;
-
-   /** CSS styles to be applied to the clone of the element being dragged. */
-   cloneStyle?: Cx.StyleProp;
-
-   /** CSS styles to be applied to the element being dragged. */
-   draggedStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied to the clone of the element being dragged. */
-   cloneClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the element being dragged. */
-   draggedClass?: Cx.ClassProp;
-}
-
-export class DragSource extends Cx.Widget<DragSourceProps> {}