goblin-magic 1.0.3

package/widgets/magic-number-field/widget.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
+import MagicTextField from '../magic-text-field/widget.js';
+import {number as NumberConverters} from 'xcraft-core-converters';
+import InputGroup from '../input-group/widget.js';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {mdiMinus, mdiPlus} from '@mdi/js';
+
+class MagicNumberFieldNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.inputRef = this.props.inputRef || React.createRef();
+  }
+
+  get input() {
+    return this.inputRef.current;
+  }
+
+  parse = (value) => {
+    const {min, max} = this.props;
+    const edited = NumberConverters.parseEdited(value, min, max);
+    return edited.value;
+  };
+
+  format = (value) => {
+    if (!value && value !== 0) {
+      return '';
+    }
+    return NumberConverters.getDisplayed(value);
+  };
+
+  increase = () => {
+    const {value, max, step = 1} = this.props;
+    if (max === undefined || value < max) {
+      this.props.onChange?.(value + step);
+    }
+  };
+
+  decrease = () => {
+    const {value, min, step = 1} = this.props;
+    if (min === undefined || value > min) {
+      this.props.onChange?.(value - step);
+    }
+  };
+
+  handleKeyDown = (event) => {
+    this.props.onKeyDown?.(event);
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      const {max, min, step = 1} = this.props;
+      const value = this.parse(event.target.value);
+      const newStep = event.shiftKey ? 10 * step : step;
+      const direction = event.key === 'ArrowUp' ? 1 : -1;
+      let newValue = value + newStep * direction;
+      if (max !== undefined && newValue > max) {
+        newValue = max;
+      }
+      if (min !== undefined && newValue < min) {
+        newValue = min;
+      }
+      if (newValue !== value) {
+        const text = this.format(newValue);
+        this.input.changeAndSelect(
+          text,
+          event.shiftKey ? 0 : text.length,
+          text.length
+        );
+      }
+
+      event.preventDefault();
+    }
+  };
+
+  render() {
+    const {className = '', ...props} = this.props;
+    return (
+      <InputGroup>
+        <MagicTextField
+          inputRef={this.inputRef}
+          format={this.format}
+          parse={this.parse}
+          {...props}
+          onKeyDown={this.handleKeyDown}
+          className={this.styles.classNames.numberField + ' ' + className}
+        />
+        <MagicButton onClick={this.decrease} disabled={props.disabled}>
+          <Icon path={mdiMinus} size={0.8} />
+        </MagicButton>
+        <MagicButton onClick={this.increase} disabled={props.disabled}>
+          <Icon path={mdiPlus} size={0.8} />
+        </MagicButton>
+      </InputGroup>
+    );
+  }
+}
+const MagicNumberField = withC(MagicNumberFieldNC, {value: 'onChange'});
+MagicNumberField.displayName = 'MagicNumberField';
+
+export default MagicNumberField;

package/widgets/magic-panel/styles.js

@@ -0,0 +1,61 @@
+/******************************************************************************/
+
+export default function styles() {
+  const action = {
+    padding: '4px',
+  };
+
+  const show = {
+    position: 'fixed',
+    top: '47px',
+    left: 0,
+    width: '50%',
+    height: 'auto',
+    transition: 'width 0.2s ease, opacity 0.2s ease',
+    // zIndex: 10000,
+  };
+
+  const hidden = {
+    ...show,
+    left: '-2px',
+    width: '0%',
+  };
+
+  const content = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const hiddenContent = {
+    visibility: 'hidden',
+  };
+
+  const shortcut = {
+    fontSize: '80%',
+  };
+
+  const closeButton = {
+    'position': 'absolute',
+    'top': 0,
+    'right': 0,
+    'fontSize': '20px',
+    'padding': '7px 10px',
+    'opacity': 0.6,
+    'cursor': 'pointer',
+    ':hover': {
+      opacity: 1,
+    },
+  };
+
+  return {
+    hiddenContent,
+    content,
+    action,
+    hidden,
+    show,
+    shortcut,
+    closeButton,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-panel/widget.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import MagicButton from '../magic-button/widget.js';
+import MagicDiv from '../magic-div/widget.js';
+import Icon from '@mdi/react';
+import {mdiClose} from '@mdi/js';
+
+class MagicPanel extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.state = {
+      hidden: true,
+    };
+    this.togglePanel = this.togglePanel.bind(this);
+  }
+
+  componentDidMount() {
+    // Mousetrap.bind('ctrl+space', this.togglePanel);
+  }
+
+  togglePanel() {
+    this.setState({hidden: !this.state.hidden});
+  }
+
+  render() {
+    const classState = this.state.hidden ? 'hidden' : 'show';
+    return (
+      <>
+        <div className={this.styles.classNames.action}>
+          <MagicButton onClick={this.togglePanel}>
+            Menu{' '}
+            <span className={this.styles.classNames.shortcut}>
+              (ctrl+space)
+            </span>
+          </MagicButton>
+        </div>
+        <MagicDiv className={this.styles.classNames[classState]}>
+          <div
+            className={
+              classState === 'hidden'
+                ? this.styles.classNames.hiddenContent
+                : this.styles.classNames.content
+            }
+          >
+            <div
+              className={this.styles.classNames.closeButton}
+              onClick={this.togglePanel}
+            >
+              <Icon path={mdiClose} />
+            </div>
+            {this.props.children}
+          </div>
+        </MagicDiv>
+      </>
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default MagicPanel;

package/widgets/magic-radio/styles.js

@@ -0,0 +1,93 @@
+/******************************************************************************/
+
+export default function styles() {
+  const input = {
+    'display': 'flex',
+    'justifyContent': 'center',
+    'alignItems': 'center',
+    'width': '24px',
+    'height': '24px',
+    'margin': '1px 0',
+    'flexShrink': 0,
+    'position': 'relative',
+    // 'bottom': '1px',
+    'top': '1px',
+    'cursor': 'pointer',
+
+    'appearance': 'none',
+    'backgroundColor': 'color-mix(in srgb, var(--text-color), transparent 80%)',
+    'border':
+      '1px solid color-mix(in srgb, var(--text-color), transparent 60%)',
+    'borderRadius': '50%',
+
+    '&::after': {
+      content: "''",
+      display: 'block',
+      width: '16px',
+      height: '16px',
+      borderRadius: '50%',
+      backgroundColor: 'rgba(15, 26, 54, 0.8)',
+      opacity: 0,
+    },
+
+    '&:checked::after': {
+      opacity: 1,
+    },
+
+    '&:focus-visible': {
+      borderColor: 'var(--text-color)',
+      boxShadow: '0px 0px 3px var(--text-color)',
+      outline: 'none',
+    },
+
+    '&:focus': {
+      outline: 'none',
+    },
+
+    '&:active': {
+      transform: 'scale(0.9)',
+    },
+
+    '&:disabled': {
+      'borderColor': 'transparent',
+      'backgroundColor':
+        'color-mix(in srgb, var(--text-color), transparent 90%)',
+      '&:hover': {
+        cursor: 'unset',
+      },
+    },
+  };
+
+  const radioLabel = {
+    'display': 'flex',
+    'alignItems': 'center',
+    // 'alignItems': 'baseline',
+
+    '&:hover input[type=radio]': {
+      'backgroundColor':
+        'color-mix(in srgb, var(--text-color), transparent 60%)',
+
+      '&:disabled': {
+        backgroundColor:
+          'color-mix(in srgb, var(--text-color), transparent 90%)',
+      },
+    },
+  };
+
+  const text = {
+    // 'display': 'flex',
+    // 'alignItems': 'baseline',
+    'marginLeft': '8px',
+    '&:empty': {
+      marginLeft: 0,
+    },
+  };
+
+  return {
+    radioLabel,
+    input,
+    text,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-radio/widget.js

@@ -0,0 +1,74 @@
+import * as styles from './styles.js';
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c';
+
+class InputRadio extends Widget {
+  constructor() {
+    super(...arguments);
+    this.onChange = this.onChange.bind(this);
+    this.styles = styles;
+  }
+
+  onChange(e) {
+    this.props.onChange(e.target.value);
+  }
+
+  render() {
+    const {name, value, checked, state, ...props} = this.props;
+    return (
+      <input
+        {...props}
+        type="radio"
+        name={name}
+        value={value}
+        checked={state !== undefined ? state === value : checked}
+        className={this.styles.classNames.input}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+class MagicRadioNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {
+      name,
+      value,
+      checked,
+      state,
+      onChange,
+      text,
+      title,
+      disabled,
+      children,
+      className = '',
+      ...props
+    } = this.props;
+    return (
+      <label
+        className={this.styles.classNames.radioLabel + ' ' + className}
+        title={title}
+      >
+        <InputRadio
+          {...props}
+          name={name}
+          value={value}
+          checked={checked}
+          state={state}
+          onChange={onChange}
+          disabled={disabled}
+        />
+        <span className={this.styles.classNames.text}>{text || children}</span>
+      </label>
+    );
+  }
+}
+const MagicRadio = withC(MagicRadioNC, {state: 'onChange'});
+MagicRadio.displayName = 'MagicRadio';
+export default MagicRadio;

package/widgets/magic-scroll/styles.js

@@ -0,0 +1,22 @@
+export default function styles() {
+  const scroll = {
+    'padding': '20px',
+    'overflow': 'auto',
+
+    '& > h1:first-child': {
+      marginTop: 0,
+    },
+    '& > h2:first-child': {
+      marginTop: 0,
+    },
+    '& > h3:first-child': {
+      marginTop: 0,
+    },
+  };
+
+  return {
+    scroll,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-scroll/widget.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+
+export default class MagicScroll extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', ...props} = this.props;
+    return (
+      <div
+        className={this.styles.classNames.scroll + ' ' + className}
+        {...props}
+      />
+    );
+  }
+}

package/widgets/magic-select/styles.js

@@ -0,0 +1,16 @@
+export default function styles() {
+  const selectButton = {
+    flexGrow: 0,
+  };
+
+  const chevronDown = {
+    position: 'relative',
+    top: '1px',
+    fontSize: '13px',
+  };
+
+  return {
+    selectButton,
+    chevronDown,
+  };
+}

package/widgets/magic-select/widget.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import Menu from '../menu/widget.js';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faChevronDown} from '@fortawesome/free-solid-svg-icons';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c.js';
+import C from 'goblin-laboratory/widgets/connect-helpers/c.js';
+
+const SelectContext = React.createContext();
+
+function examples() {
+  <MagicSelect value={C('.type')}>
+    <option value="external">External</option>
+    <option value="internal">Internal</option>
+    <option value="personal">Personal</option>
+  </MagicSelect>;
+
+  <MagicSelect
+    value={C('.type')}
+    options={{
+      external: <>External</>,
+      internal: <>Internal</>,
+      personal: <>Personal</>,
+    }}
+  />;
+
+  <MagicSelect
+    value={C('.type')}
+    options={[
+      {value: 'external', text: <>External</>},
+      {value: 'internal', text: <>Internal</>},
+      {value: 'personal', text: <>Personal</>},
+    ]}
+  />;
+}
+
+class MagicSelectOption extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {value, children} = this.props;
+    return (
+      <SelectContext.Consumer>
+        {(select) => (
+          <Menu.Item value={value} onPointerUp={select.setValue}>
+            {children}
+          </Menu.Item>
+        )}
+      </SelectContext.Consumer>
+    );
+  }
+}
+
+class MagicSelectNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  setValue = (event) => {
+    const value = event.currentTarget.value;
+    this.props.onChange?.(value, event);
+  };
+
+  render() {
+    let {
+      className = '',
+      value,
+      options,
+      position,
+      onChange,
+      children,
+      ...props
+    } = this.props;
+
+    let displayedValue = value;
+    let list;
+    if (options) {
+      list = Array.isArray(options)
+        ? options
+        : Object.entries(options).map(([value, text]) => ({value, text}));
+
+      displayedValue = list.find((item) => item.value === value)?.text || value;
+    } else {
+      children = React.Children.map(children, (child) => {
+        if (React.isValidElement(child) && child.type === 'option') {
+          return <MagicSelectOption {...child.props} />;
+        }
+        return child;
+      });
+      React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return;
+        }
+        if (child.type === MagicSelectOption && child.props.value === value) {
+          displayedValue = child.props.children;
+        }
+      });
+    }
+
+    return (
+      <SelectContext.Provider value={this}>
+        <Menu>
+          <Menu.Button {...props} className={'input no-grow ' + className}>
+            {displayedValue}
+            <FontAwesomeIcon
+              className={this.styles.classNames.chevronDown}
+              icon={faChevronDown}
+            />
+          </Menu.Button>
+          <Menu.Content position={position}>
+            {list &&
+              list.map(({value, text}) => (
+                <MagicSelectOption key={value} value={value}>
+                  {text || value}
+                </MagicSelectOption>
+              ))}
+            {children}
+          </Menu.Content>
+        </Menu>
+      </SelectContext.Provider>
+    );
+  }
+}
+
+const MagicSelect = withC(MagicSelectNC, {value: 'onChange'});
+
+MagicSelect.Option = MagicSelectOption;
+
+export default MagicSelect;

package/widgets/magic-table/reducer.js

@@ -0,0 +1,63 @@
+import Shredder from 'xcraft-core-shredder';
+/******************************************************************************/
+
+const initialState = new Shredder({
+  id: null,
+  sortIndex: null,
+  sortType: null,
+  sortOrder: '-',
+  sortCustom: null,
+  showMenu: false,
+});
+
+/******************************************************************************/
+
+export default (state = initialState, action = {}) => {
+  switch (action.type) {
+    case 'INITIALISE': {
+      const {id, columns} = action;
+      state = initialState;
+      state = state.set('id', id);
+      for (const [index, column] of columns.entries()) {
+        if (column.sortable && column.sortOrder) {
+          state = state.set('sortIndex', index);
+          state = state.set('sortType', column.type);
+          state = state.set('sortOrder', column.sortOrder);
+          state = state.set('sortCustom', column.sortCustom);
+        }
+      }
+      return state;
+    }
+    case 'TOGGLE_MENU': {
+      const {sortIndex, sortType, sortCustom} = action;
+      state = state.set('sortIndex', sortIndex);
+      state = state.set('sortType', sortType);
+      state = state.set('sortCustom', sortCustom);
+      state = state.set('showMenu', !state.get('showMenu'));
+      return state;
+    }
+    case 'SORT_COLUMN': {
+      const {sortIndex, sortType, sortCustom} = action;
+      const current = state.get('sortIndex');
+      state = state.set('sortIndex', sortIndex);
+      state = state.set('sortType', sortType);
+      state = state.set('sortCustom', sortCustom);
+
+      //set new asc sort for column
+      if (current !== sortIndex) {
+        state = state.set('sortOrder', 'asc');
+        return state;
+      }
+      //cycle sort
+      if (state.get('sortOrder') === '-') {
+        state = state.set('sortOrder', 'asc');
+      } else if (state.get('sortOrder') === 'asc') {
+        state = state.set('sortOrder', 'desc');
+      } else {
+        state = state.set('sortOrder', '-');
+      }
+      return state;
+    }
+  }
+  return state;
+};