pragmate-ui/dynamic-list/dynamic-list.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'pragmate-ui/components';
import * as dependency_4 from 'framer-motion';
import * as dependency_5 from 'pragmate-ui/icons';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/dynamic-list"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['pragmate-ui/components', dependency_3],['framer-motion', dependency_4],['pragmate-ui/icons', dependency_5]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/dynamic-list')


const ims = new Map();

/*************************************
INTERNAL MODULE: ./components/add-item
*************************************/

ims.set('./components/add-item', {hash: 3769438584, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AddDynamicItem = AddDynamicItem;
var _react = require("react");
var _components = require("pragmate-ui/components");
var _context = require("../context");
/*bundle */function AddDynamicItem() {
  const {
    addItem
  } = (0, _context.useDynamicListContext)();
  return _react.default.createElement(_components.Button, {
    variant: 'primary',
    onClick: addItem
  }, "Add");
}
}});

/*******************************************
INTERNAL MODULE: ./components/dragabble-list
*******************************************/

ims.set('./components/dragabble-list', {hash: 3835674000, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DraggableList = DraggableList;
var _react = require("react");
var _framerMotion = require("framer-motion");
var _context = require("../context");
/* bundle */function DraggableList({
  children,
  className = ''
}) {
  const {
    values,
    setValues
  } = (0, _context.useDynamicListContext)();
  return _react.default.createElement(_framerMotion.Reorder.Group, {
    className: className,
    values: values,
    onReorder: values => {
      setValues(values);
    }
  }, children);
}
}});

/***********************************
INTERNAL MODULE: ./components/header
***********************************/

ims.set('./components/header', {hash: 3832436420, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Header = Header;
var _react = require("react");
var _context = require("../context");
var _components = require("pragmate-ui/components");
/*bundle */function Header({
  children
}) {
  const {
    addItem
  } = (0, _context.useDynamicListContext)();
  return _react.default.createElement("header", {
    className: 'pui-dynamic-list__header'
  }, _react.default.createElement(_components.Button, {
    variant: 'primary',
    onClick: addItem
  }, "Add"), children);
}
}});

/*********************************
INTERNAL MODULE: ./components/item
*********************************/

ims.set('./components/item', {hash: 639523093, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DynamicItem = DynamicItem;
var _react = require("react");
var _context = require("../context");
var _icons = require("pragmate-ui/icons");
/*bundle */function DynamicItem(props) {
  const {
    children,
    index,
    identifier
  } = props;
  const {
    removeItem,
    draggable,
    Item,
    registerRef
  } = (0, _context.useDynamicListContext)();
  const onRemove = () => removeItem(identifier.id);
  const attrs = {
    className: 'pui-dynamic-list__item',
    ...(draggable ? {
      value: props.identifier
    } : {})
  };
  const body = _react.default.createElement(Item, {
    ...props
  }, _react.default.createElement("div", {
    className: 'item__content'
  }, children), _react.default.createElement("section", {
    className: 'item__actions'
  }, _react.default.createElement(_icons.IconButton, {
    icon: 'delete',
    onClick: onRemove
  })));
  const register = element => registerRef(index, element);
  return _react.default.createElement("div", {
    ...attrs,
    key: index,
    ref: register
  }, body);
}
}});

/*********************************
INTERNAL MODULE: ./components/list
*********************************/

ims.set('./components/list', {hash: 2727787293, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.List = List;
var _react = require("react");
var _context = require("../context");
var _item = require("./item");
/*bundle*/function List({
  className
}) {
  const {
    name,
    values,
    setValues
  } = (0, _context.useDynamicListContext)();
  const attrs = {
    className: `pui-dynamic-list ${className}`
  };
  const handleChange = (index, value) => {
    const newValue = [...values];
    newValue[index] = value;
    setValues(newValue);
  };
  const output = values.map((item, index) => {
    const setValue = value => handleChange(index, value);
    return _react.default.createElement(_item.DynamicItem, {
      value: item,
      key: `${name}.${index}`,
      index: index,
      identifier: item,
      setValue: setValue
    }, item);
  });
  const Container = 'div';
  return _react.default.createElement(Container, {
    ...attrs
  }, output);
}
}});

/*************************
INTERNAL MODULE: ./context
*************************/

ims.set('./context', {hash: 2545632455, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useDynamicListContext = exports.DynamicListContext = void 0;
var _react = require("react");
const DynamicListContext = exports.DynamicListContext = _react.default.createContext({});
/*bundle*/const useDynamicListContext = () => _react.default.useContext(DynamicListContext);
exports.useDynamicListContext = useDynamicListContext;
}});

/*****************************
INTERNAL MODULE: ./definitions
*****************************/

ims.set('./definitions', {hash: 733921901, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
}});

/**************************
INTERNAL MODULE: ./provider
**************************/

ims.set('./provider', {hash: 811037713, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Provider = Provider;
var _react = require("react");
var _context = require("./context");
/*bundle */function Provider({
  name,
  onChange,
  draggable,
  children,
  value,
  Item,
  specs,
  className
}) {
  if (value && !Array.isArray(value)) {
    console.warn('Warning: value prop must be an array or undefined. Received', value);
  }
  const getDefaultValue = () => '';
  if (!value?.length) value = [getDefaultValue()];
  const [items, setItems] = _react.default.useState([...value]);
  const [isDraggable, setIsDraggable] = _react.default.useState(draggable);
  const refs = (0, _react.useRef)([]);
  _react.default.useEffect(() => {
    setItems(value);
  }, [value.length]);
  const providerData = {
    addItem: () => {
      const newValue = [...items, getDefaultValue()];
      setItems(newValue);
    },
    draggable: isDraggable,
    refs,
    specs: specs ?? {},
    toggleDraggable: () => setIsDraggable(!isDraggable),
    removeItem: index => {
      const newItems = items.filter((_, i) => i !== index);
      setItems(newItems);
      const target = {
        name,
        value: newItems
      };
      onChange?.({
        target,
        currentTarget: target
      });
      return newItems;
    },
    name,
    setItems,
    values: items,
    registerRef: (index, ref) => {
      refs.current[index] = ref;
    },
    setValue: (index, value) => {
      const newItems = [...items];
      newItems[index] = value;
      setItems(newItems);
    },
    setValues: value => {
      setItems(value);
      const target = {
        name,
        value
      };
      onChange?.({
        target,
        currentTarget: target
      });
    },
    getDefaultValue,
    items: items,
    Item
  };
  return _react.default.createElement(_context.DynamicListContext.Provider, {
    value: providerData
  }, _react.default.createElement("div", {
    className: className
  }, children));
}
}});

__pkg.exports.descriptor = [{"im":"./components/add-item","from":"AddDynamicItem","name":"AddDynamicItem"},{"im":"./components/dragabble-list","from":"DraggableList","name":"DraggableList"},{"im":"./components/header","from":"Header","name":"Header"},{"im":"./components/item","from":"DynamicItem","name":"DynamicItem"},{"im":"./components/list","from":"List","name":"List"},{"im":"./context","from":"useDynamicListContext","name":"useDynamicListContext"},{"im":"./provider","from":"Provider","name":"Provider"}];

export let AddDynamicItem, DraggableList, Header, DynamicItem, List, useDynamicListContext, Provider;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'AddDynamicItem') && (AddDynamicItem = require ? require('./components/add-item').AddDynamicItem : value);
    (require || prop === 'DraggableList') && (DraggableList = require ? require('./components/dragabble-list').DraggableList : value);
    (require || prop === 'Header') && (Header = require ? require('./components/header').Header : value);
    (require || prop === 'DynamicItem') && (DynamicItem = require ? require('./components/item').DynamicItem : value);
    (require || prop === 'List') && (List = require ? require('./components/list').List : value);
    (require || prop === 'useDynamicListContext') && (useDynamicListContext = require ? require('./context').useDynamicListContext : value);
    (require || prop === 'Provider') && (Provider = require ? require('./provider').Provider : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=dynamic-list.browser.mjs.map