onekijs-ui 0.9.2 → 0.15.2

package/src/components/modal/typings.ts

@@ -0,0 +1,20 @@
+import { HeightProperty, WidthProperty } from 'csstype';
+import { ReactNode } from 'react';
+import { SizePropertyTheme, TLength, TshirtSize } from '../../styles/typings';
+
+export type ModalProps = {
+  attachToBody?: boolean;
+  className?: string;
+  size?: TshirtSize;
+  width?: TshirtSize | SizePropertyTheme | WidthProperty<TLength>;
+  height?: TshirtSize | SizePropertyTheme | HeightProperty<TLength>;
+  animationDuration?: number;
+  open?: boolean;
+  closeIcon?: boolean;
+  closeOnEscape?: boolean;
+  closeOnClickOutside?: boolean;
+  onClose: () => void;
+  onClosed: () => void;
+  buttons?: ReactNode[];
+  title?: ReactNode;
+};

package/src/components/properties/components/PropertiesComponent.tsx

@@ -0,0 +1,44 @@
+import React, { FC, useMemo } from 'react';
+import { addClassname } from '../../../utils/style';
+import { DefaultPropertiesContext } from '../hooks/usePropertiesContext';
+import { PropertiesContext, PropertiesProps } from '../typings';
+import Property from './Property';
+
+const PropertiesComponent: FC<PropertiesProps> = ({
+  className,
+  properties,
+  PropertyComponent = Property,
+  order = false,
+  size,
+  sm,
+  md,
+  lg,
+  xl,
+}) => {
+  const classNames = addClassname('o-properties', className);
+  const keys = Object.keys(properties);
+  if (order) {
+    keys.sort();
+  }
+  const context = useMemo<PropertiesContext>(() => {
+    return {
+      size,
+      sm,
+      md,
+      lg,
+      xl,
+    };
+  }, [size, sm, md, lg, xl]);
+
+  return (
+    <DefaultPropertiesContext.Provider value={context}>
+      <div className={classNames}>
+        {keys.map((key) => (
+          <PropertyComponent key={key} name={key} value={properties[key]} />
+        ))}
+      </div>
+    </DefaultPropertiesContext.Provider>
+  );
+};
+
+export default PropertiesComponent;

package/src/components/properties/components/Property.tsx

@@ -0,0 +1,40 @@
+import { AnonymousObject, get } from 'onekijs-framework';
+import React, { FC } from 'react';
+import Col from '../../grid/Col';
+import Row from '../../grid/Row';
+import { GridSize } from '../../grid/typings';
+import usePropertiesContext from '../hooks/usePropertiesContext';
+import { PropertyProps } from '../typings';
+
+const Property: FC<PropertyProps> = React.memo(({ name, value }) => {
+  const context = usePropertiesContext();
+  const nameSize = context.size ?? 3;
+  const valueSize = (nameSize === 12 ? 12 : 12 - nameSize) as GridSize;
+  const variantValueSize: AnonymousObject<GridSize | undefined> = {};
+  ['sm', 'md', 'lg', 'xl'].forEach((variant) => {
+    const nameSize = get(context, variant);
+    variantValueSize[variant] =
+      nameSize === undefined ? undefined : ((nameSize === 12 ? 12 : 12 - nameSize) as GridSize);
+  });
+  return (
+    <Row className="o-property" gapX="10px" gapY="0px">
+      <Col size={nameSize} sm={context.sm} md={context.md} lg={context.lg} xl={context.xl} className="o-property-name">
+        {name}
+      </Col>
+      <Col
+        size={valueSize}
+        sm={variantValueSize.sm}
+        md={variantValueSize.md}
+        lg={variantValueSize.lg}
+        xl={variantValueSize.xl}
+        className="o-property-value"
+      >
+        {value}
+      </Col>
+    </Row>
+  );
+});
+
+Property.displayName = 'Property';
+
+export default Property;

package/src/components/properties/hooks/usePropertiesContext.ts

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+import { PropertiesContext } from '../typings';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+export const DefaultPropertiesContext = React.createContext<PropertiesContext>({});
+const usePropertiesContext = (): PropertiesContext => {
+  return useContext(DefaultPropertiesContext);
+};
+
+export default usePropertiesContext;

package/src/components/properties/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import PropertiesComponent from './components/PropertiesComponent';
+import { propertiesStyle } from './style';
+
+const Properties = styled(PropertiesComponent)`
+  ${propertiesStyle}
+`;
+
+export default Properties;

package/src/components/properties/style.ts

@@ -0,0 +1,17 @@
+import { css } from 'styled-components';
+import { paddingY } from '../../styles/spacing';
+import { ComponentStyle } from '../../styles/typings';
+import { fontWeight } from '../../styles/typography';
+import { PropertiesProps } from './typings';
+
+export const propertiesStyle: ComponentStyle<PropertiesProps> = ({ theme }) => {
+  const t = theme.properties;
+  return css`
+    .o-property {
+      ${paddingY(t.paddingY)}
+    }
+    .o-property-name {
+      ${fontWeight(t.fontWeight)}
+    }
+  `;
+};

package/src/components/properties/typings.ts

@@ -0,0 +1,30 @@
+import { AnonymousObject } from 'onekijs-framework';
+import React, { ReactNode } from 'react';
+import { GridSize } from '../grid/typings';
+
+export type PropertiesProps = {
+  properties: PropertiesList;
+  PropertyComponent?: React.FC<PropertyProps>;
+  order?: boolean;
+  className?: string;
+  size?: GridSize;
+  sm?: GridSize;
+  md?: GridSize;
+  lg?: GridSize;
+  xl?: GridSize;
+};
+
+export type PropertyProps = {
+  value: ReactNode;
+  name: string;
+};
+
+export type PropertiesContext = {
+  size?: GridSize;
+  sm?: GridSize;
+  md?: GridSize;
+  lg?: GridSize;
+  xl?: GridSize;
+};
+
+export type PropertiesList = AnonymousObject<ReactNode>;

package/src/components/resizer/ResizerService.ts

@@ -0,0 +1,96 @@
+import { cancel, delay, fork } from '@redux-saga/core/effects';
+import { Task } from '@redux-saga/types';
+import { DefaultService, reducer, saga, SagaEffect, service, useService } from 'onekijs-framework';
+import { clearSelection, markBodyAsSelectable, markBodyAsUnselectable } from '../../utils/dom';
+import { ResizerHandle, ResizerHandler, ResizerState } from './typings';
+
+@service
+export class ResizerService extends DefaultService<ResizerState> {
+  protected hoverTask: Task | null = null;
+  protected currentHandle?: ResizerHandle;
+
+  @reducer
+  setSize(width: number, height: number, lastX: number, lastY: number): void {
+    this.state.width = width;
+    this.state.height = height;
+    this.state.lastX = lastX;
+    this.state.lastY = lastY;
+    this.state.handler('run', width, height);
+  }
+
+  @reducer
+  setHover(hover: boolean): void {
+    this.state.hover = hover;
+  }
+
+  *delayEnter(delay_ms: number) {
+    yield delay(delay_ms);
+    yield this.setHover(true);
+  }
+
+  @saga(SagaEffect.Every)
+  *onEnter() {
+    this.hoverTask = yield fork([this, this.delayEnter], 250);
+  }
+
+  @saga(SagaEffect.Every)
+  *onLeave() {
+    if (this.hoverTask !== null) {
+      yield cancel(this.hoverTask);
+    }
+    this.setHover(false);
+  }
+
+  @saga(SagaEffect.Latest)
+  *onResize(e: any) {
+    if (
+      this.state.lastX !== undefined &&
+      this.state.lastY !== undefined &&
+      this.state.width !== undefined &&
+      this.state.height !== undefined &&
+      this.currentHandle !== undefined
+    ) {
+      const diffX = e.screenX - this.state.lastX;
+      const diffY = e.screenY - this.state.lastY;
+      const isEast = ['e', 'ne', 'se'].includes(this.currentHandle);
+      const isNorth = ['n', 'ne', 'nw'].includes(this.currentHandle);
+      const nextWidth = this.state.width + (isEast ? diffX : -diffX);
+      const nextHeight = this.state.height + (isNorth ? -diffY : diffY);
+      yield this.setSize(nextWidth, nextHeight, e.screenX, e.screenY);
+    }
+  }
+
+  @reducer
+  startResize(handle: ResizerHandle, target: React.RefObject<HTMLDivElement>, x: number, y: number): void {
+    this.currentHandle = handle;
+    this.state.active = true;
+    this.state.lastX = x;
+    this.state.lastY = y;
+    if (target.current !== null) {
+      this.state.width = target.current.offsetWidth;
+      this.state.height = target.current.offsetHeight;
+      this.state.handler('start', this.state.width, this.state.height);
+    }
+    clearSelection();
+    markBodyAsUnselectable();
+    document.addEventListener('mouseup', this.stopResize);
+  }
+
+  @reducer
+  stopResize(): void {
+    this.currentHandle = undefined;
+    document.removeEventListener('mouseup', this.stopResize);
+    markBodyAsSelectable();
+    // ensure that the resize is active
+    this.state.active = false;
+    this.state.lastX = undefined;
+    this.state.lastY = undefined;
+    if (this.state.width !== undefined && this.state.height !== undefined) {
+      this.state.handler('stop', this.state.width, this.state.height);
+    }
+  }
+}
+
+export const useResizerService = (handler: ResizerHandler): [ResizerState, ResizerService] => {
+  return useService(ResizerService, { handler } as ResizerState);
+};

package/src/components/resizer/components/ResizerComponent.tsx

@@ -0,0 +1,28 @@
+import { FCC } from 'onekijs-framework';
+import React, { useRef } from 'react';
+import { ResizerProps } from '../typings';
+import ResizerHorizontalSplitter from './ResizerHorizontalSplitter';
+import ResizerVerticalSplitter from './ResizerVerticalSplitter';
+
+const ResizerComponent: FCC<ResizerProps> = ({ className, children, handles = [], onResize }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  return (
+    <div className={className} ref={ref}>
+      {children}
+      {(handles.includes('e') || handles.includes('all')) && (
+        <ResizerVerticalSplitter onResize={onResize} target={ref} handle="e" />
+      )}
+      {(handles.includes('w') || handles.includes('all')) && (
+        <ResizerVerticalSplitter onResize={onResize} target={ref} handle="w" />
+      )}
+      {(handles.includes('n') || handles.includes('all')) && (
+        <ResizerHorizontalSplitter onResize={onResize} target={ref} handle="n" />
+      )}
+      {(handles.includes('s') || handles.includes('all')) && (
+        <ResizerHorizontalSplitter onResize={onResize} target={ref} handle="s" />
+      )}
+    </div>
+  );
+};
+
+export default ResizerComponent;

package/src/components/resizer/components/ResizerHorizontalSplitter.tsx

@@ -0,0 +1,38 @@
+import { FCC, useEventListener } from 'onekijs-framework';
+import React from 'react';
+import { useResizerService } from '../ResizerService';
+import { ResizerHandle, ResizeHorizontalSplitterProps } from '../typings';
+
+const getClassNames = (handle: ResizerHandle, active?: boolean, hover?: boolean) => {
+  return `o-resizer-horizontal-splitter o-resizer-${handle}-splitter${active || hover ? ' o-resizer-active' : ''}`;
+};
+
+const ResizerHorizontalSplitter: FCC<ResizeHorizontalSplitterProps> = ({ children, target, handle, onResize }) => {
+  const [resizerState, resizerService] = useResizerService(onResize);
+  const style: React.CSSProperties = {
+    position: 'absolute',
+  };
+
+  if (handle === 's') {
+    style.bottom = 0;
+  } else {
+    style.top = 0;
+  }
+
+  useEventListener('mousemove', (e) => resizerService.onResize(e));
+
+  return (
+    <div
+      className={getClassNames(handle, resizerState.active, resizerState.hover)}
+      style={style}
+      onMouseEnter={() => resizerService.onEnter()}
+      onMouseLeave={() => resizerService.onLeave()}
+      onMouseDown={(e) => resizerService.startResize(handle, target, e.screenX, e.screenY)}
+      onMouseUp={() => resizerService.stopResize()}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ResizerHorizontalSplitter;

package/src/components/resizer/components/ResizerVerticalSplitter.tsx

@@ -0,0 +1,37 @@
+import { FCC, useEventListener } from 'onekijs-framework';
+import React from 'react';
+import { useResizerService } from '../ResizerService';
+import { ResizerHandle, ResizeVerticalSplitterProps } from '../typings';
+
+const getClassNames = (handle: ResizerHandle, active?: boolean, hover?: boolean) => {
+  return `o-resizer-vertical-splitter o-resizer-${handle}-splitter${active || hover ? ' o-resizer-active' : ''}`;
+};
+
+const ResizerVerticalSplitter: FCC<ResizeVerticalSplitterProps> = ({ children, target, handle, onResize }) => {
+  const [resizerState, resizerService] = useResizerService(onResize);
+  const style: React.CSSProperties = {
+    position: 'absolute',
+    top: 0,
+  };
+
+  if (handle === 'e') {
+    style.right = 0;
+  }
+
+  useEventListener('mousemove', (e) => resizerService.onResize(e));
+
+  return (
+    <div
+      className={getClassNames(handle, resizerState.active, resizerState.hover)}
+      style={style}
+      onMouseEnter={() => resizerService.onEnter()}
+      onMouseLeave={() => resizerService.onLeave()}
+      onMouseDown={(e) => resizerService.startResize(handle, target, e.screenX, e.screenY)}
+      onMouseUp={() => resizerService.stopResize()}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ResizerVerticalSplitter;

package/src/components/resizer/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import ResizerComponent from './components/ResizerComponent';
+import resizerStyle from './style';
+
+const Resizer = styled(ResizerComponent)`
+  ${resizerStyle}
+`;
+
+export default Resizer;

package/src/components/resizer/style.ts

@@ -0,0 +1,51 @@
+import { ComponentStyle } from '../../styles/typings';
+import { ResizerProps } from './typings';
+import { css } from 'styled-components';
+import { width, height } from '../../styles/size';
+import { backgroundColor } from '../../styles/background';
+import { zIndex } from '../../styles/position';
+
+const resizerStyle: ComponentStyle<ResizerProps> = () => {
+  return css`
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]}
+      ${(props) => props.theme.colors[props.theme.colors.lighter]};
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
+    &::-webkit-scrollbar-track {
+      background: ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]};
+      border: 3px solid ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
+    }
+    .o-resizer-vertical-splitter {
+      ${width('6px')};
+      ${backgroundColor('transparent')}
+      ${height('full')}
+      cursor: e-resize;
+      transition: background 0.1s ease-out;
+      &.o-resizer-active {
+        ${backgroundColor('primary')}
+        ${zIndex(35)}
+      }
+    }
+    .o-resizer-horizontal-splitter {
+      ${height('6px')};
+      ${backgroundColor('transparent')}
+      ${width('full')}
+      cursor: n-resize;
+      transition: background 0.1s ease-out;
+      &.o-resizer-active {
+        ${backgroundColor('primary')}
+        ${zIndex(35)}
+      }
+    }
+  `;
+};
+
+export default resizerStyle;

package/src/components/resizer/typings.ts

@@ -0,0 +1,40 @@
+export type ResizerVerticalHandle = 'e' | 'w';
+export type ResizerHorizontallHandle = 'n' | 's';
+export type ResizerHandle = ResizerVerticalHandle | ResizerHorizontallHandle | 'se' | 'sw' | 'nw' | 'all';
+
+export type ResizeStep = 'start' | 'stop' | 'run';
+
+export type ResizerHandler = (step: ResizeStep, nextWidth: number, nextHeight: number) => void;
+
+export interface ResizerProps {
+  className?: string;
+  onResize: ResizerHandler;
+  handles?: ResizerHandle[];
+  minWidth?: string | 0;
+  maxWidth?: string | 0;
+  minHeight?: string | 0;
+  maxHeight?: string | 0;
+}
+
+export interface ResizeSplitterProps {
+  onResize: ResizerHandler;
+  target: React.RefObject<HTMLDivElement>;
+}
+
+export interface ResizeVerticalSplitterProps extends ResizeSplitterProps {
+  handle: ResizerVerticalHandle;
+}
+
+export interface ResizeHorizontalSplitterProps extends ResizeSplitterProps {
+  handle: ResizerHorizontallHandle;
+}
+
+export interface ResizerState {
+  active?: boolean;
+  height?: number;
+  hover?: boolean;
+  lastX?: number;
+  lastY?: number;
+  width?: number;
+  handler: ResizerHandler;
+}

package/src/components/select/FormSelect.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import Select from '.';
+import FieldLayout from '../field/FieldLayout';
+import useFieldLayout from '../field/hooks/useFieldLayout';
+import { FormSelectProps, SelectProps } from './typings';
+
+const FormSelect: FC<FormSelectProps> = React.memo((props) => {
+  const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<SelectProps>(
+    Object.assign(
+      {
+        defaultValue: props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue,
+      },
+      props,
+    ),
+  );
+  const Component = props.FieldComponent || Select;
+
+  return (
+    <FieldLayout {...fieldLayoutProps} required={props.required}>
+      <Component {...fieldComponentProps} />
+    </FieldLayout>
+  );
+});
+
+FormSelect.displayName = 'FormSelect';
+export default FormSelect;

package/src/components/select/SelectService.ts

@@ -0,0 +1,9 @@
+import { CollectionService, service } from 'onekijs-framework';
+import { SelectController, SelectItem, SelectState } from './typings';
+
+@service
+class SelectService<T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>>
+  extends CollectionService<T, I, S>
+  implements SelectController<T, I> {}
+
+export default SelectService;

package/src/components/select/components/ArraySelectComponent.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import useSelectController from '../hooks/useSelectController';
+import { ArraySelectProps } from '../typings';
+import ControllerSelectComponent from './ControllerSelectComponent';
+
+const ArraySelectComponent: FC<ArraySelectProps> = (props) => {
+  const controller = useSelectController(props.dataSource, { adapter: props.adapter, fetchOnce: props.fetchOnce });
+  return <ControllerSelectComponent {...props} controller={controller} />;
+};
+
+export default ArraySelectComponent;